[CSS] CSS 박스 모델을 구성하는 속성 다루기(content 영역)
박스모델은 모든 HTML 요소가 사각형의 박스로 둘러쌓여있다는 개념으로
박스 형태의 요소들을 하나씩 원하는 곳에 배치해 원하는 모양으로 만들어 나가는 것이 웹 페이지를 만드는 본질이다.
박스 모델은 크게 다음과 같이 4가지 요소로 구성되고 앞서 정리한 margin, border, padding에 이어
content에 대해 정리해보고자 한다.
1. content 영역
content 영역은 시작 태그와 종료 태그 사이에 사용된 콘텐츠가 속하는 영역으로
다른 박스 모델의 구성 요소와 다르게 content 영역 자체를 다루는 속성은 없다.
다만, 텍스트 관련 스타일 속성이면 모두 content 영역을 제어하는 속성이라고 할 수 있다.
추가로 content 영역은 제어하는 속성처럼 영향을 주는 width 속성과 height 속성이 있다.
- widht와 height 속성
width 속성은 content 영역의 너비를 height 속성은 content 영역의 높이를 지정하는 데 사용한다.
속성값으로는 단위를 포함한 크기를 넣는다.
형식)
widht:<크기>;
height:<크기>;
아래의 사용 예시를 통해 이해할 수 있디.
코드를 실행하면 위와 같이 div 태그의 너비와 높이가 100px 만큼 지정되어 표시된다.
- box-sizing 속성
width와 height 속성은 content 영역에 직접 영향을 주는 속성이다.
width와 height 속성을 사용하면서 때로는 의도치 않게 작동한다고 느껴질때가 있는데 아래의 예시가 그러하다.
div 요소의 width와 height 속성을 각각 100px로 지정했으면 화면에 표시되는 div 태그의 너비와 높이는 각각 100px라고 생각하게 되는데 코드를 실행해보면 조금 다른 결과가 나타난다.
웹 브라우저가 요소를 호면에 렌더링할때 border, padding, content 영역의 너비와 높이를 종합적으로 계산하기 때문이다.
화면에 보이는 요소의 너비와 높이는 외부 여백인 margin 영역을 제외하고 border, padding, content 영역을 전부 포함한 크기가 된다.
따라서 화면에 표시되는 요소의 너비는 border 영역과 padding 영역까지 포함해 width 속성의 100px, padding 속성의 왼쪽 10px, 오른쪽 10px, border 속성의 왼쪽 1px, 오른쪽 1px을 모두 더한 122px(100px+10px+10px+1px+1px)로 계산된다.
그렇다면 의도한 대로 100px로 표시하려면 어떻게 해야할까?
가장 간단한 방법은 width 속성값을 border, padding 영역 크기를 제외한 78px로 성정해야한다.
그러면 요소의 너비와 높이는 100px(1px+10px+78px+10px+1px)가 된다.
위의 방법은 항상 content 영역의 너비와 높이를 계산해야하고 padding이나 border의 값이 달라지면 다시 계산을 해야한다는 불편함이 있어 content 영역을 제어할 때 이런 불편한 계산 방식을 개선한 box-sizing 속성을 사용한다.
형식)
box-sizing:<속성값>;속성값으로는 conten-box와 border-box가 있다
| 속성값 | 설명 |
| content-box | width, height 속성의 적용 범위를 content 영역으로 제한한다. |
| border-box | width, height 속성의 적용 범위를 border 영역으로 제한한다. |
box-sizing 속성은 width, height 속성의 적용 기준을 지정한다. 이 속성은 기본으로 content-box값이 적용된 상태여서 width, height 속성으로 지정되는 영역을 content 영역으로 제한한다.
기존 코드에서 width, height 속성값을 수정하는 댓신 box-sizing 속성을 추가하고 값으로 border-box를 지정해 보면 아래와 같다.
box-sizing 속성값을 border-box로 지정하고 요소의 너비와 높이를 다루면 훨씬 편하게 제어할 수 있다.