[CSS] CSS 박스 모델 : 크기, 패딩, 테두리, 마진, 아웃라인

 

크기 단위

다양한 크기 단위가 존재하지만 가장 많이 쓰이는 크기 단위는 다음과 같다

1. 백분율 단위(%)

2. 배수 단위(em)

3. 픽셀 단위(px)

 

 

 

 

크기

크기 조절을 위해 사용할 수 있는 속성

1. height / width

2. max-width / min-width : 해당 HTML요소가 가질 수 있는 최대 / 최소 너비

3. max-height / min-height

 

 

 

 

박스 모델 (Box model)

모든 HTML 요소는 박스 모양으로 구성

박스 모델은 HTML 요소를 다음과 같이 구분한다

 

1. 패딩(padding)

: 내용과 테두리 사이 간격

    - padding, padding-top, padding-right, padding-bottom, padding-left

 

2. 테두리(border)

: 내용과 패딩 주변 감싸는 테두리

    - style, width, color 등을 설정할 수 있음

    - top / right / bottom / left 각각 설정 가능

 

3. 마진(margin)

: 테두리와 이웃하는 요소 사이 간격

    - top / right / bottom / left

 

4. 내용(content)

 

5. 아웃라인(outline)

: HTML 요소의 가장 바깥부분을 둘러싼 부분

    - border 와는 달리 HTML 요소의 전체 크기에는 포함되지 않음

    - style, width, color, offset 설정

 

- height, width 속성을 설정하면 내용(content) 부분만을 대상으로 설정된다

 

 

 

 

[참고] http://tcpschool.com/css/intro