[CSS] 박스모델 정리

border 속성

굵기, 테두리종류, 색상 순서대로 작성

border: 2px solid #ededed;

 

---

border-radius 속성

박스 모델의 모서리를 둥글게 만들 때 작성

border-radius: 16px;

 

타원 만들기

border-radius: 50%;

 

알약 만들기

border-radius: 9999px;

---

 

box-sizing 속성

기본적으로 요소의 크기를 지정하면 그 크기는 콘텐트 영역에 대한 크기가 된다.

#box 요소의 실제 너비는 100 + 30 + 30 = 160px.

#box {
  margin: 20px;
  padding: 30px;
    width: 100px;
}

 

좀 더 직관적으로 코드를 작성하고 싶다면 다음과 같이 작성할 수 있다.

#box {
  margin: 20px;
  padding: 30px;
    width: 100px;
    box-sizing: border-box;
}

이렇게 작성하면, 테두리까지 합쳐진 영역이 100px 이 된다.

 

---

overflow 속성

박스의 크기를 지정했을 때, 안에 있는 내용이 너무 많아서 가끔 빠져나올때가 있다.

 

1. 넘치는 내용 감추기

overflow: hidden;

 

2. 넘치면 스크롤하기

overflow: auto;

 

3. 항상 스크롤하기

overflow: scroll;

---

 

마진상쇄 (Margin Collapsing)

일반적으로 세로 마진은 서로 겹쳐서 화면에 나타난다. 서로 이웃한 형제태그에는 세로로 마진을 겹쳐서 적용하고, 부모자식에도 마진을 겹쳐서 적용한다. 이 때, 부모에 padding 이나 border 가 있으면 경계가 있다고 생각하여 겹치지 않음.

 

1. 서로 이웃한 태그

 

<div id="a">a</div>
<div id="b">b</div>

#a {
  margin: 30px;
}

#b {
  margin: 20px;
}

20px 은 겹쳐지고, 둘 사이의 마진은 30px;

 

 

2. 부모 자식 태그

b는 c의 부모태그로 b 와 c의 마진은 40px, a 가 영향을 받아 40px.

<div id="a">
  a
</div>
<div id="b">
  <div id="c">
    c
  </div>
  b
</div>

#a {
  margin: 30px;
}

#b {
  margin: 20px;
}

#c {
  margin: 40px;
}