[CSS] BOX MODEL

 

block-level : 태그를 사용해 요소를 삽입했을 때, 혼자 한 줄을 차지하는 요소

- 해당 요소의 너비가 100%라는 의미

- 오른쪽이나 왼쪽에 다른 요소가 올 수 없음

- 너비나 마진, 패딩 등을 이용해 크기나 위치를 지정

- 해당 태그 : <p> <h1>~<h6> <ul> <ol> <div> <blockquote> <form> <hr> <table> <fieldset> <address>

 

inline-level : 줄을 차지하는 요소

- 화면에 표시되는 콘텐츠만큼만 영역을 차지하고 나머지 공간에는 다른 요소가 올 수 있음

- 한 줄에 여러 개의 인라벨 요소 표시 가능

- 해당 태그 : <img> <object> <br> <sub> <span> <input> <textarea> <label> <button>

ex) <span> 태그는 <p>태그 안에서 사용 가능

 

box model : 박스 형태의 콘텐츠

 

width, height : 콘텐츠 영역 크기

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

- 크기 : 너비나 높이 값을 px이나 cm같은 단위와 함께 수치로 지정

- 백분율 : 박스 모델을 포함하는 부모 요소를 기준으로 너비나 높이 값을 백분율(%)로 지정

- auto : 박스 모델의 너비와 높이 값이 콘텐츠 양에 따라 자동으로 결정 (기본 값)

- 콘텐츠 크기 계산

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

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

 

display : 화면 배치 방법 결정

- 세로로 표시되는 목록을 가로 내비게이션으로 바꿀 때, 한 줄로 표시되는 이미지의 여백과 테두리를 추가해 갤러리로 표시할 때 사용

- block 속성 : 해당 요소를 블록 레벨로 지정

- inline 속성 : 블록 레벨 요소를 인라인 레벨로 지정

- inline-block 속성 : 한 줄로 배치 가능하지만 너비나 높이, 마진 같은 박스 모델 값이 정확지 적용되지 않음

                           요소를 인라인 레벨로 배치하면서 내용에는 블록 레벨 속성을 지정하고 싶을 때 사용

- none 속성 : 해당 요소를 화면에 아예 표시하지 않음

                  공간 조차 차지하지 않음

                  PC용 화면에서는 표시하지만, 모바일 화면에서는 보이지 않도록 하고 싶은 부분이 있을 때 사용

- 기타 속성

속성 값	설명
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> 태그를 사용한 것 처럼)

 

 

---

 

 

테두리 관련

 

border-style : 테두리 스타일 지정

속성 값	설명
none	테두리가 나타나지 않음 (기본 값)
hidden	테두리가 나타나지 않음
dashed	테두리를 짧은 선(직선으로 된 점선)으로 표시
dotted	테두리를 점선으로 표시
double	테두리를 이중선(겹선)으로 표시  두 선 사이의 간격은 border-width값으로 지정
groove	테두리를 창에 조각한 것 처럼 표시
inset	border-collapse : separate - 전체 박스 테두리가 창에 박혀있는 것 처럼 표시 border-collapse : collapse - groove와 똑같이 표시
outset	border-collapse : separate - 전체 박스 테두리가 창에서 튀어나온 것 처럼 표시 border-collapse : collapse - ridge와 똑같이 표시
ridge	테두리를 창에서 튀어나온 것 처럼 표시
solid	테두리를 실선으로 표시

 

border-width : 테두리 두께 지정

속성 값	설명
border-top-width	위쪽 테두리 두께 지정
border-right-width	오른쪽 테두리 두께 지정
border-bottom-width	아래쪽 테두리 두께 지정
border-left-width	왼쪽 테두리 두께 지정
border-width	한꺼번에 테두리 두께 지정

 

border-color : 테두리 색상 지정

속성 값	설명
border-top-color	위쪽 테두리 색상 지정
border-right-color	오른쪽 테두리 색상 지정
border-bottom-color	아래쪽 테두리 색상 지정
border-left-color	왼쪽 테두리 색상 지정
border-width	한꺼번에 테두리 색상 지정

 

border : 테두리 스타일 묶어 지정

속성 값	설명
border-top : <두께> | <색상> | <스타일>	위쪽 테두리 속성 지정
border-right : <두께> | <색상> | <스타일>	오른쪽 테두리 속성 지정
border-bottom : <두께> | <색상> | <스타일>	아래쪽 테두리 속성 지정
border-left : <두께> | <색상> | <스타일>	왼쪽 테두리 속성 지정
border : <두께> | <색상> | <스타일>	한꺼번에 테두리 속성 지정

 

border-radius : 박스 모서리 둥글게 지정

- 크기 : 둥글게 처리 할 반지름 크기를 px나 em같은 단위와 함께 수치로 표시

- 백분율 : 현재 요소의 크기를 기준으로 둥글게 처리할 반지름 크기를 %로 지정

속성 값	설명
border-top-left-radius : <크기> | <백분율>	왼쪽 위 테두리 모서리 지정
border-top-right-radius : <크기> | <백분율>	오른쪽 위 테두리 모서리 지정
border-bottom-left-radius : <크기> | <백분율>	왼쪽 아래 테두리 모서리 지정
border-bottom-right-radius : <크기> | <백분율>	오른쪽 아래 테두리 모서리 지정
border-radius : <크기> | <백분율>	한꺼번에 테두리 모서리 지정

 

속성 값	설명
border-top-left-radius : <가로 크기> | <세로 크기>	왼쪽 위 테두리를 타원 형태로 둥글게 지정
border-top-right-radius : <가로 크기> | <세로 크기>	오른쪽 위 테두리를 타원 형태로 둥글게 지정
border-bottom-left-radius : <가로 크기> | <세로 크기>	왼쪽 아래 테두리를 타원 형태로 둥글게 지정
border-bottom-right-radius : <가로 크기> | <세로 크기>	오른쪽 아래 테두리를 타원 형태로 둥글게 지정
border-radius : <가로 크기> | <세로 크기>	한꺼번에 테두리를 타원 형태로 둥글게 지정

 

box-shadow : 선택한 요소에 그림자 효과

속석 값	설명
수평 거리	그림자의 수평 옵셋 거리(수평으로 얼마나 떨어져 있는지) 양수 값은 요소의 오른쪽, 음수 값은 요소의 왼쪽에 그림자를 만듦 (필수 속성)
수직 거리	그림자의 수직 옵셋 거리(세로로 얼마나 떨어져 있는지) 양수 값은 요소의 아리쪽, 음수 값은 요소의 위쪽에 그림자를 만듦 (필수 속성)
흐림 정도	그림자의 흐림정도를 지정 (0을 기본값으로 해 진한 그림자를 표시)  값이 커질 수록 부드러운 그림자를 표시하며, 음수 값은 사용 불가
번짐 정도	그람자의 번지는 정도를 나타냄 (기본 값은 0) 양수 값은 그림자가 모든 방향으로 퍼져 나가기 때문에 그림자가 박스보다 크게 표시됨 음수 값은 그림자가 모든 방향으로 축소되어 보임
색상	그림자의 색상을 지정 (기본값은 현재 글자 색) 한 가지만 지정할 수 있고, 공백으로 구분해 여러개의 색상 지정 가능
inset	안쪽 그림자로 그림

 

 

---

 

 

여백

 

margin : 요소 주변 여백 설정

- 크기 : 너비나 높이 값을 px나 cm 같은 단위와 함께 수치로 지정

- 백분율 : 박스 모델을 포함하고 있는 부모 요소를 기준으로 너비나 높이 값을 %로 지정

- auto : display 속성에서 지정한 값게 맞게 적절한 값을 자동으로 지정

속성 값	설명
margin-top : <크기> | <백분율> | auto	위쪽 마진 지정
margin-right : <크기> | <백분율> | auto	오른쪽 마진 지정
margin-bottom : <크기> | <백분율> | auto	아래쪽 마진 지정
margin-left : <크기> | <백분율> | auto	왼쪽 마진 지정
margin : <크기> | <백분율> | auto	한꺼번에 마진 지정

 

padding : 콘텐츠 영역과 테두리 사이 여백 설정

- 크기 : 너비나 높이 값을 px나 cm 같은 단위와 함께 수치로 지정

- 백분율 : 박스 모델을 포함하고 있는 부모 요소를 기준으로 너비나 높이 값을 %로 지정

- auto : display 속성에서 지정한 값게 맞게 적절한 값을 자동으로 지정

속성 값	설명
padding-top : <크기> | <백분율> | auto	위쪽 패딩 지정
padding-right : <크기> | <백분율> | auto	오른쪽 패딩 지정
padding-bottom : <크기> | <백분율> | auto	아래쪽 패딩 지정
padding-left : <크기> | <백분율> | auto	왼쪽 패딩 지정
padding : <크기> | <백분율> | auto	한꺼번에 패딩 지정