CSS 박스 모델

테두리와 모깎기

 

box-sizing: border-box; 

좌우의 테두리를 기준으로 요소의 크기가 결정됨.

이 특성이 없으면 콘텐츠를 크기 기준으로 삼아서 테두리 두께만큼 늘어나서 크기가 커짐 

 

속기법 

테두리의 두께와 색상 그리고 스타일을 설정할 때 

                      width    style  color

ex) border: medium dashed green;

ex) border:        4px   solid    white;

 

모깎기

모서리의 곡률을 조정하는 특성

ex) border-radius: 10px;

ex) border-radius: 50%; --> 정원형을 만드는 방법

 

상단 왼쪽을 깎는 등 개별 위치에서 모깎기도 가능하다. 

 

---

패딩

콘텐츠 박스와 요소를 둘러싼 테두리 사이에 남은 공간

어떤 물건이 있으면 그걸 담을 박스가 필요하다. 박스에 물건을 담으면 물건과 박스 사이에 공간이 남을텐데 그 사이를 스티로폼 같은 완충제로 채운다. 이때 완충제가 패딩이다. 

텍스트 크기는 그대로고 주변 공간을 넓히고 싶을 때 사용한다. 

 

속기법

padding: 10px; --> 사방으로 10px만큼 공간을 넓힌다.

padding: 5px 1px 0 2px; --> top right bottom left 순으로 해당 크기만큼 넓힌다. 

---

여백 (margin)

여백은 한 요소가 있고 다른 요소가 있을 때 두 요소에 둘린 각 테두리 간의 간격을 의미함.

위에서 나온 패딩은 테두리 안쪽 공간을 다뤘지만 여백은 바깥 공간을 다룬다.

---

디스플레이 속성

 

INLINE 

1. 컨텐츠 너비 만큼 공간을 차지하며, 라인 하나에 여러 요소가 배치될 수 있음. (줄바꿈 X)

2. 높이(height), 너비(width) 설정 불가능. (컨텐츠 만큼의 크기를 차지하기 때문)

3. 여백(margin)과 패딩(padding)은 항상 좌우로만 가능하다.

4. block 요소를 컨텐츠로 가질 수 없다. (데이터 또는 inline 요소만 가능)

 

BLOCK

1. 새로운 라인에서 시작한다. (줄바꿈 O)

2. 사용 가능한 전체 너비를 사용한다. (대표적으로 DIV 태그는 해당 페이지의 좌우 최대 크기로 사용한다.)

3. 높이와 너비 설정 가능 

4. 상하 마진 패딩 둘 다 가능하다.

5. 모든 요소를 가질 수 있음.

 

INLINE-BLOCK

1. 줄 바꿈 없이 한 줄에 다른 요소들과 배치 가능(inline 속성)

2. 상하 마진 패딩 둘 다 가능하다. (block 속성)

3. div, p 등 block 요소를 한 줄에 여러 개 배치하고 싶을 때 자주 사용한다.

---

CSS 단위

width나 height 같은 경우 % 단위를 사용하게 되면 부모 요소를 기준으로 잡고

line-height와 같은 줄간격 특성에서 % 단위를 사용하게 되면 부모 요소가 아닌, 자신 요소의 font-size를 기준으로 잡는다.

여기서 알 수 있는건 각각의 특성에 따라 다르게 작용한다는 점을 알 수 있음.

---

CSS 단위: em

em은 자기 자신의 font-size 크기를 기준으로 하는데, 만약 자기 자신의 font-size 크기를 설정해주지 않았을 경우 상위 요소로부터 상속 받은 값을 기준으로 한다. (밑엔 자기 자신의 font-size를 설정해주지 않았을 때이다.)

font-size를 설정할 때 em 단위는 부모 요소의 크기에 따라 좌우된다.  

margin 크기를 설정할 때 em 단위는 해당 요소의 글꼴 크기에 좌우된다. 즉, 설정해주지 않았기 때문에 부모 요소의 크기에 따라 변경된다. 

border-radius 크기를 설정할 때 em 단위를 사용하면 부모 요소의 크기가 변함에 따라 모깎기 크기도 같이 커짐으로써 동일한 모깎기 비율로 둥글게 만들 수 있다.  

 

간단한 컴포넌트나 재사용할 수 있는 항목을 만들어서 해당 글꼴 크기에 맞춰서 달라지게 해야하는 경우 등에 사용된다.

 

단점 : 요소가 중첩될 경우 em의 단위가 1보다 크거나 작으면 계속해서 커지거나 작아진다.

---

CSS 단위: rem (root em)

rem은 em과 유사한데, 글꼴 크기를 부모 요소의 크기에 따라 바꾸지 않고, 루트 HTML 요소의 글씨 크기에 따라 바꾼다.

즉, 문서 전체에서 하나의 글꼴 크기에 비례하여 바뀐다.

 

em에서 단점과는 달리 항상 루트 HTML 요소의 크기를 기준으로 하므로 예측하기 쉽다.