[CSS] 박스

CSS 에서 중요한 개념인 박스에 대해서 알아보자.

사실, 모든 요소는 박스라는 틀 안에 있어서 박스를 조정한다는 것은 요소를 이루고 있는 틀을 변경한다고 볼 수 있다.

---

박스의 폭과 높이

박스의 폭과 높이를 지정하려면 width 와 height 를 사용하면 된다. 

박스가 그려지는지 보기 위해서 테투리에 선을 추가해서 보이겠다.

.mybox 에 폭 200px, 높이는 100px 로 지정하였다.

다음과 같이 나온다.

'리스트' 바깥에 테두리가 설정되었다. 테두리만큼의 박스가 형성됨을 알 수 있다.

폭(width)과 높이(height)는 아무 지정을 안 하면 auto(자동) 로 지정된다.

---

여백, 패딩, 테두리

박스의 여백과 패딩 테두리를 설정할 수 있는데 설정값이 많을 뿐 크게 어려운 건 없다.

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 안쪽이 볼록한 선

자신이 원하는 스타일을 위해 표의 있는 서식을 클래스에 추가로 입력하면 된다.

테두리 종류만 살펴보자.

테두리 모양이 각가 어떤지 살펴볼 것이라 나열만 했다.

기본적인 테두리 모양은 위에 그림처럼 되어있다. 원하는 스타일을 골라 쓰면 된다.