박스 (Box)

- CSS에서 중요한 개념 중 하나로 박스 모델이라는 것이 있음.

- 모든 요소는 '박스'라 불리는 사각 틀을 갖고 있음.

* 박스의 폭과 높이

- 박스의 폭과 높이를 지정하려면 width와 height 프로퍼티를 사용해야 함.

.mybox {

width: 200px;

height: 100px;

}

1) height 프로퍼티

- 박스의 높이를 지정함.

auto(자동) // 초기값

또는 %나 px로 지정

2) width 프로퍼티

- 박스의 폭을 지정함.

auto(자동) // 초기값

또는 %나 px로 지정

* 여백, 패딩, 테두리

- 값을 하나만 지정하면 상하좌우에 동일한 값이 지정됨.

- 스페이스로 구분하여 값을 4개 지정하면 상, 하, 좌, 우순으로 지정한 것이 됨.

프로퍼티명	의미	값
margin	여백의 폭	%나 px로 지정하거나 auto(자동 조절)를 지정함. 초기값은 0.
padding	패딩의 폭	%나 px로 지정함. 초기값은 0.
border-width	테두리 폭	thin(가늘게), medium(중간), thick(굵게) 중의 값을 넣거나 %나 px로 지정함. 초기값은 medium.
border-color	테두리 색	색을 지정하거나 transparent(투명)를 지정함.
border-style	테두리 종류	none : 표시 안 함               hidden : 표시 안 함  solid : 실선  dotted : 점선  dashed : 파선  double : 이중선  groove : 오목한 선  ridge : 볼록한 선  inset : 안쪽이 오목한 선  outset : 안쪽이 볼록한 선

[개별 지정 방법]

프로퍼티명	의미	값
margin	margin-top, margin-right, margin-bottom, margin-left	상하좌우순으로 스페이스를 구분하여 지정함.  또한 2개의 값을 지정하면 '상하, 좌우', 3개의 값을 지정하면 '상, 좌우, 하'의 값을 나타냄.
padding	padding-top, padding-right, padding-bottom. padding-left
border-width	border-top-width, borer-right-width, border-bottom-width, border-left-width
border-color	border-top-color, borer-right-color, border-bottom-color, border-left-color
border-style	border-top-style, borer-right-style, border-bottom-style, border-left-style

내용 출처 : HTML5가 보이는 그림책 (ANK Co., Ltd 저, 성안당)