CSS 박스모델
HTML의 요소는 박스 모양으로 일정한 공간을 차지하고 있다.
박스 모델의 요소들은 컨덴츠를 제외한 마진, 테두리, 패딩 3개의 영역을 추가로 가지고 있습니다.
content
텍스트나 이미지가 들어 있는 HTML 요소의 실질적인 내용
컨덴츠의 영역은 css의 width 와 height 속성을 통하여 크기를 변경할 수 있습니다.
인라인 요소는 width와 height 속성이 적용되지 않습니다. 인라인 요소는 컨덴츠의 크기만큼의 영역을 가지고 있기 때문입니다. 만일, 인라인 요소에 크기를 지정하고 싶은 경우에는 display:inline-block 속성으로 변경하면 됩니다.
인라인블럭이란? 요소의 형태는 inline 이미잔, 내부의 처리는 block 처럼 행동하는 중간 형태의 요소입니다.
박스 모델에 영향을 줄 수 있는 속성들
박스 형태의 텍스트 단락
박스 형태를 가지는 요소를 박스 모델 (box model) 요소라고 부릅니다.
박스 모델은 실제 콘텐츠 영역，박스와 콘텐츠 영역 사이의 여백
인 패딩(padding), 박스의 테두리,(border)，그리고 여러 박스 모델 간의 여백인 마진(margin) 등의
요소로 구성되어 있습니다.
width, height 속성 - 박스 모델 크기 지정하기
박스 모델의 크기를 강제로
정해야 할 경우에는 너 비를 지 정하는 width 속성과높이를 지정하는 height 속성을 사용합니 다.
- 크기 : 너비나 높이 값을 px（픽셀）이나 cm（센티미테 같은 단위와 함께 수치로 지정합니다.
- 백분율(%) : 박스 모델을 포함하고 있는 부모 요소를 기준으로 너비나 높이 값을 %로 지정합니다.
- auto : 박스 모델의 너비와 높이 값이 콘텐츠 양에 따라 자동으로 결정됩니다. 기본 값입니다.
배치와 관련된 블록 레벨과 인라인 레벨
요소들은 크게 블록 레벨 요소와 인라인 레벨 규小로 나누어집니다
블록 레벨 요소와 인라인 레벨 요소의 특징을 살펴보겠습니다.
블록 레벨 요소와 인라인 레벨 요소
블록 레벨(block-level) 요소는
태그를 사용해 요소를 삽입했을 때 혼자서 한 줄을 차지하는 요소 입니다.
<p>,〈h1〉~〈h6〉. <ul>. <ol>, <div>, (blockquote), <form>, <hr>. <table>, <fieldset>. (address)
인라인 레벨(inline-level) 요소는 화면에 표시되는 콘텐
츠만큼만 영역을 차지합니다.
<img>, <object>, <br>, <sub>. <sup>, <span>, <input>, <textarea>, <label>, <button>
박스모델
모든 요소들은 사각형의 형태를 가지고 있습니다.
박스의 크기
div {
width: 100px;
height: 100px;
}
가로 세로 100px의 박스 크기가 됩니다.
padding 추가
박스에서 패딩 설정시 박스의 크기는 padding 설정값 많큼 크게 됩니다.
div {
width: 100px;
height: 100px;
padding: 20px;
}
패딩이 추가돠어 가로 세로 140px 의 크기가 됩니다.
실제 박스의 크기를 동일하게 하기 위해서는 가로사이즈 - 안쪽여백 = 현재 사이즈
margin 추가
마진은 바깥쪽 여백으로 박스 사이즈의 크기 변화는 없습니다. 하지만, 마진으로 인하여 박스의 위치가 틀어지게 됩니다.
div {
width: 100px;
height: 100px;
padding: 20px;
margin: 50px;
}
선 추가
박스모델에서 선이 추가 되면, 선의 굵기 많큼 박스의 크기가 커지게 됩니다.
box-sizing
박스의 크기를 자동으로 계산해 줍니다.
css3에서 추가된 기능입니다. ie7 이하에서는 지원하지 않습니다.