박스 모델

목차

1) 블록 레벨 요소와 인라인 레벨 요소

 

① 블록 레벨 요소
- 요소를 삽입했을 때 혼자 한 줄을 차지하는 요소로 요소의 너비가 100%라는 의미
- 해당 요소 좌우에는 다른 요소들이 올 수 없음
- 너비나 마진, 패딩 등을 이용해 크기나 위치 지정
② 인라인 레벨 요소
- 줄을 차지하지 않는 요소
- 화면에 표시되는 콘텐츠만큼 영역을 차지하고 나머지 공간에 다른 요소 올 수 있음
- 한 줄에 여러 개의 인라인 레벨 요소 표시 가능

 

③ 블록 레벨 요소와 인라인 레벨 요소를 만드는 태그의 종류

종류	해당 태그
블록 레벨 태그	<p>, <h1>~<h6>, <ul>, <ol>, <div>, <blockquote>, <form>, <hr>, <table>, <fieldset>, <address>
인라인 레벨 태그	<img>, <object>, <br>, <sub>, <sup>, <span>, <input>, <textarea>, <label>, <button>

 

2) 박스 모델(box model)

① 블록 레벨 요소들은 모두 박스 형태
② 박스 형태의 요소들을 박스 모델이라고 부름
③ 여러 요소들을 원하는 위치에 배치하려면 CSS 박스 모델을 잘 사용해야 함
④ 박스 모델은 실제 콘텐츠 영역, 패딩(padding), 박스의 테두리(border), 마진(margin)등 요소로 구성
- 패딩(padding) : 박스와 콘텐츠 영역 사이의 여백
- 마진(margin) : 여러 박스 모델 사이의 여백

 

 

 

 

3) 콘텐츠 영역의 크기

width, height 속성

① 실제 콘텐츠 영역의 크기를 지정할 때 너비는 width, 높이는 height 속성을 사용

② 기본형

width  : <크기> | <백분율> | auto

height :  <크기> | <백분율> | auto

③ width, height 속성 값

속성 값	설명
< 크기 >	너비나 높이 값을 px이나 cm 같은 단위와 함께 수치로 지정
< 백분율 >	박스 모델을 포함하는 부모 요소를 기준으로 너비나 높이 값을 백분율(%)로 지정
auto	박스 모델의 너비와 높이 값이 콘텐츠 양에 따라 자동으로 결정. 기본 값

④ 실제 콘텐츠 크기 계산하기

 모던 브라우저에서 박스 모델의 전체 너비 = width 값 + 좌우 패딩 + 좌우 테두리

 인터넷 익스플로러 6에서 박스 모델의 width 값 = 콘텐츠 너비 + 좌우 패딩 + 좌우 태두리

 

4) 화면 배치 방법 결정

display 속성

① 블록 레벨 요소를 인라인 레벨 요소로 바꾸거나 인라인 레벨 요소를 블록 레벨 요소로 바꿀 때 사용
② 기본형 display : none | contents | block | inline | inline-block | table | table-cell등
③ display: block;
- 해당 요소를 블록 레벨로 지정
- <img>같은 인라인 레벨 요소도 블록 레벨 요소로 바꿈
④ display: inline;
- 해당 요소를 인라인 레벨로 지정
- <li>같은 블록 레벨 요소도 인라인 레벨 요소로 바꿈
⑤ display: inline-block;
- 요소를 인라인 레벨로 배치하면서 내용에는 블록 레벨 속성(너비, 높이, 마진 등)을 지정하고 싶을 때
사용
- 블록 레벨 요소와 인라인 레벨 요소 두 가지 특성을 모두 갖음
⑥ display: none;
- 해당 요소를 화면에 표시하지 않고 화면에서의 공간도 차지하지 않음
- visibility: hidden; 화면에서만 감춰지고 공간은 그대로 차지

⑦ 기타 display 속성 값들

속성 값	설명
inherit	상위 요소의 display 속성을 상속 받음
table	블록 레벨의 표로 만듬
inline-table	인라인 레벨의 표로 만듬( <table>태그 사용한 것처럼)
table-row	표의 행으로 만듬( <tr> 태그 사용한 것처럼)
table-row-group	표의 행 그룹으로 만듬( <tbody>태그 사용한 것처럼)
table-header-group	표의 제목 영역(header) 그룹으로 만듬( <thead>태그 사용한 것처럼)
table-footer-group	표의 요약 영역(footer) 그룹으로 만듬( <tfoot>태그 사용한 것처럼)
table-column	표의 열로 만듬( <col>태그 사용한 것처럼)
table-column-group	표의 열 그룹으로 만듬( <colgroup>태그 사용한 것처럼)
table-cell	표에서 하나의 셀로 만듬(<td>나 <th>태그 사용한 것처럼)
table-caption	표의 캡션으로 만듬( <caption>태그 사용한 것처럼)
list-item	목록의 항목을 표시할 수 있도록 기본적인 블록 박스와 표시자 박스를 만듬(<li> 태그 사용한 것처럼) 기본적인 블록 박스 : 항목의 내용이 표시되는 부분 표시자 박스 : 불릿이 표시되는 부분