박스 모델

1) Block level element: 화면 전체 차지

ex) h1 태그

2) Inline element: 자신의 크기만큼 공간 차지

ex) a 태그

+) display

block level element를 화면 전체가 아닌 자신의 크기만큼만 사용하도록, 즉 inline element가 되도록 설정

→ display:inline;

반대로, inline element도 block level element가 되도록 설정

→ display:block;

화면에서 안 보이게 설정

→ display:none;

→ 박스의 안쪽부터 content->padding->border->margin

-content

-width: content의 폭 설정

-height: content의 높이 설정

-padding: content와 테두리 사이에 간격 조절

-border

-border-width: 박스의 폭 설정

-border-color: 박스의 색상 설정

-border-style: 박스의 스타일 설정 (실선, 점선 등)

-margin: 테두리와 테두리 사이 간격 조절

→ 콤마 선택자를 통해 코드의 중복을 피할 수 있다.

→ 중복되는 border 부분 한 번 더 간소화 (5px, solid, red의 순서는 중요하지 않다.)

Joong