[CSS] 박스 모델 (Box-Model)

크기 단위 및 속성

크기 단위

단위	설명
px	스크린의 픽셀을 기준으로 하는 절대적인 크기를 설정
em	해당 글꼴(font)의 기본 크기를 1em으로 놓고, 그에 대한 상대적인 크기를 설정 자기 자신의 font-size가 없다면 상위 요소의 font-size를 상속 받음
rem	최상위 글꼴(font)의 기본 크기를 1em으로 놓고, 그에 대한 상대적인 크기를 설정
%	기본 크기를 100%로 놓고, 그에 대한 상대적인 크기를 설정

크기 속성

속성	설명
height	해당 HTML 요소의 높이를 설정
width	해당 HTML 요소의 높이를 설정
max-width	해당 HTML 요소가 가질 수 있는 최대 너비(width)를 설정
min-width	해당 HTML 요소가 가질 수 있는 최소 너비(width)를 설정
max-height	해당 HTML 요소가 가질 수 있는 최대 높이(height)를 설정
min-height	해당 HTML 요소가 가질 수 있는 최소 높이(height)를 설정

박스의 기본 크기를 결정하는 특성

• 가로축은 부모 태그의 크기만큼 가득 채운다.
• 세로축은 자신이 포함하고 있는 내용만큼 설정되며, 내용이 없을 경우에는 높이가 형성되지 않는다.

박스의 구성 요소

속성	설명
content	텍스트나 이미지가 들어있는 박스의 실질적인 내용부분, width과 height로 크기를 조절
padding	content과 border 사이의 간격
border	content과 padding 주변을 감싸는 테두리
margin	border와 이웃하는 요소 사이의 간격

padding

• 내용과 테두리 사이의 간격으로, 값이 높아질 수록 테두리를 밀어낸다.

속성	설명
padding	모든 padding 속성을 이용한 스타일을 한 줄에 설정 1개의 값을 지정시 상/하/좌/우 모두 같은 크기의 여백을 지정 2개의 값을 지정시 첫 번째 값은 “상/하” 두 번째 값은 “좌/우”로 지정 4개의 값을 지정시 첫 번째 값은 상단, 그 다음 우측, 하단, 좌측 순서로 시계방향으로 적용
padding-top	상단 여백의 크기를 지정
padding-right	우측 여백의 크기를 지정
padding-bottom	하단 여백의 크기를 지정
padding-left	좌측 여백의 크기를 지정

border

• 테두리의 굵기, 종류, 색상을 지정할 수 있다.

border 종류

종류	설명
none	투명한 테두리
solid	직선
dotted	점선
dashed	끊긴 선

표시 위치에 따른 border 속성의 세분화

속성	설명	적용 값
border-top	상단 테두리	굵기 종류 색상
border-right	우측 테두리
border-bottom	하단 테두리
border-left	좌측 테두리

표시 형식에 따른 border 속성의 세분화

속성	설명	적용 값
border-width	굵기	단위 값
border-style	종류	none solid dotted dashed
border-color	색상	16진수(HEX) RGB 값

margin

• 움직일 수 없는 요소를 밀어내어 스스로의 위치를 변경시키거나, 다른 요소를 밀어내는 특성을 갖기 때문에 위치와 관련된 속성이다.
• 요소의 위치를 변경시키면서 주변 요소에게 영향을 주게 된다.
• 음수 값을 적용할 경우, 주변 요소를 끌어당겨 겹친다.
  • 벽과 인접한 경우, 자신이 화면 밖으로 벗어난다.

값의 적용 방법

• padding과 동일한 방법을 사용한다.

속성	설명
margin	모든 margin 속성을 이용한 스타일을 한 줄에 설정 1개의 값을 지정시 상/하/좌/우 모두 같은 크기의 여백을 지정 2개의 값을 지정시 첫 번째 값은 “상/하” 두 번째 값은 “좌/우”로 지정 4개의 값을 지정시 첫 번째 값은 상단, 그 다음 우측, 하단, 좌측 순서로 시계방향으로 적용
margin-top	상단 여백의 크기를 지정
margin-right	우측 여백의 크기를 지정
margin-bottom	하단 여백의 크기를 지정
margin-left	좌측 여백의 크기를 지정

겹침 현상

• 두 박스에 margin을 서로 마주 보는 방향으로 각각 20px과 30px씩 주었을 때, 두 박스 사이의 공간은 50px이 아닌 30px만 형성된다.

Outline

• 박스 요소들의 가장 바깥 부분을 둘러싸고 있는 아웃라인 부분의 스타일 설정이 가능하다.
  • border 속성과 마찬가지로 style, width, color 속성을 가진다.
• 그러나, border 속성과는 달리 HTML 요소의 전체 크기에는 포함되지 않는다.

Outline 종류

종류	설명
none	투명한 테두리
solid	직선
dotted	점선
dashed	끊긴 선

표시 형식에 따른 Outline 속성의 세분화

속성	설명	적용 값
outline-width	굵기	단위 값
outline-style	종류	none solid dotted dashed
outline-color	색상	16진수(HEX) RGB 값
outline-offset	border과 outline 사이의 여백 설정	단위 값

---

기타 박스 스타일 속성

border-radius

• border 속성 없이도 사용 가능하며, 테두리를 둥글게 만들어 주는 속성이다.
• margin/padding 과 마찬가지로 왼쪽-위부터 시계 방향으로 각자 다른 값 지정이 가능하다.

#box {
	border-radius: 5px;
	border-radius: 1px 2px 3px 4px;
}

background 관련 속성

속성	설명	속성 값
background-color	해당 요소의 배경색을 설정	색상 값
background-image	- 해당 요소의 배경으로 나타낼 배경 이미지 설정 - 기본적으로 요소 전체에 걸쳐 반복되어 나타남 - 이미지가 본문의 텍스트를 방해하지 않도록 주의	url("이미지 경로")
background-repeat	- 기본 설정으로 수평과 수직 방향으로 모두 반복 - 배경 이미지의 반복 설정 가능	repeat-x (수평 반복) repeat-y (수직 반복) no-repeat (반복 해제)
background-position	- 배경의 위치를 설정	- 가로 (left, center, right)와 세로 (top, center, bottom) 키워드 조합 - 단위로 상대 위치 직접 명시
background-attachment	- 배경 이미지를 해당 위치에 고정 - 고정된 배경 이미지는 스크롤과는 무관하게 화면 우치에서 이동하지 않음	fixed

body {
	background: #FFCCCC url("/examples/images/img_man.png") no-repeat left bottom fixed; 
}

/** background-color **/
body { background-color: lightblue; }
h1 { background-color: rgb(255,128,0); }
p { background-color: #FFFFCC; }

/** background-image **/
body { background-image: url("/examples/images/img_background_good.png"); }

/** background-repeat **/
background-repeat: repeat-x|repeat-y|no-repeat;

/** background-position **/
body {
    background-image: url("/examples/images/img_man.png");
    background-repeat: no-repeat;
    background-position: top right | 100px 200px;;
}

/** background-attachment **/
body {
    background-image: url("/examples/images/img_man.png");
    background-repeat: no-repeat;
    background-position: left bottom;
    background-attachment: fixed;
}

box-shadow

요소에 그림자를 줄 수 있는 속성으로, box-shadow를 사용한다. 기본 값은 none으로 그림자가 없다.

div {
  box-shadow: 가로값 세로값 흐림값 크기값 색상값;
}

• 위치  설정
  • 가로와 세로 위치를 설정해 준다.
• 색 설정
  • 기본 값은 black으로, 검정색이다.
• 흐림 설정 (blur)
  • 기본 값은 0으로, 가로, 세로 위치 뒤에 추가해 준다.
• 크기 설정 (spread)
  • 그림자가 퍼지는 정도를 설정해 주며, 흐림 값 뒤에 추가해 준다.

box-sizing

두 요소의 width와 height를 똑같이 설정했지만, 결과가 다른 경우가 있습니다. border와 padding을 뺀 content의 크기만 나타내기 때문에 발생하는 현상인데, 이 현상은 box-sizing으로 해결 가능하다.
기본 값은 content-box이며, border-box라는 값을 넣어 주면 해결된다.
보통 모든 요소에 설정하여 사용하는 것이 더 간편하게 개발 가능하다.

* {
  box-sizing: border-box;
}