CSS 박스 모델

박스모델은 웹 페이지에서 검사 도구를 통해 쉽게 확인할 수 있다.

1. content

태그가 차지하는 공간

즉 width와 height가 차지하는 공간.
display의 기본값이 정해져 있어도 width 값으로 태그가 차지하는 폭을 정할 수 있음

2. padding

CONTENT와 테두리(border) 사이의 간격

padding-top/right/bottom/left 를 각각 지정할 수도 있다.
padding: 00px 00px 00px 00px; 와 같이 한꺼번에 작성할 수도 있으며 순서는 [상 우 하 좌] 이다.

3. border

content의 테두리이며 padding과 margin 사이에 위치한다.

border-top/right/bottom/left 로 개별적으로 스타일 적용을할 수 있다. 띄어쓰기로 여러 속성 스타일을 연결하여 한꺼번에 입력하고 중복을 줄일 수 있다. -를 사용하여 유동적으로 설정할 수 있다.

예를 들면
border: 10px solid green; 모든 border 속성 스타일을 한줄에 입력
border-right: 10px solid green; border right부분 속성을 한줄에 입력
border-top-color: border top 부분의 색상 설정
border-width: border 너비, 즉 두께 설정

border-style 속성 종류

테두리의 스타일을 설정할 수 있는 속성이다.

• dotted : 테두리를 점선으로 설정함.
• dashed : 테두리를 약간 긴 점선으로 설정함.
• solid : 테두리를 실선으로 설정함.
• double : 테두리를 이중 실선으로 설정함.
• groove : 테두리를 3차원인 입체적인 선으로 설정하며, border-color 속성값에 영향을 받음.
• ridge : 테두리를 3차원인 능선효과가 있는 선으로 설정하며, border-color 속성값에 영향을 받음.
• inset : 테두리를 3차원인 내지로 끼운 선으로 설정하며, border-color 속성값에 영향을 받음.
• outset : 테두리를 3차원인 외지로 끼운 선으로 설정하며, border-color 속성값에 영향을 받음.
• none : 테두리를 없앰.
• hidden : 테두리가 존재하기는 하지만 표현되지는 않음.

4. margin

border와 border 사이의 간격.

즉 다른 태그와의 거리.