3장. CSS 프로퍼티 값의 단위

[ 목차 ]

1. 키워드

2. 크기 단위

3. px

4. %

5. em

 

1. 키워드

1) 각 프로퍼티에 따라 사용할 수 있는 키워드가 존재

2) ex. display의 경우 block, inline, inline-block, none

 

2. 크기 단위

1) CSS에서 사용하는 대표적 크기 단위는 px, em, %

2) cm, mm, inch도 존재

3) 대부분 브라우저 포트 사이즈의 기본값은 16px, 1em, 100%

 

3. px

1) 픽셀단위로, 1px는 화소1개 크기를 의미

2) 디바이스 해상도에 따라 상대적인 크기를 가지며, 제각각이기에 픽셀 기준 단위는 정확하지 않음

3) 대부분의 브라우저는 1px를 1/96 인치의 절대단위로 인식

4) 요소의 크기나 이미지의 크기 지정에 주로 사용

 

4. %

1) %는 백분률 단위의 상대 요소

2) 요소에 지정된 사이즈에 상대적인 사이즈를 설정

 

5. em

1) 배수 단위로 상대 단위

2) 요소에 지정된 사이즈에 상대적인 사이즈를 설정

3) 폰트 사이즈 설정이나 콘텐츠를 포함하는 컨테이너의 크기 설정에 사용하면 상대적인 설정이 가능

4) 중첩된 자식 요소에 em을 지정하면 모든 자식 요소의 사이즈에 영향을 미치기 때문에 주의