CSS프로퍼티 값의 단위: CSS 프로퍼티에는 키워드, 크기 단위, 생상 표현 단위 등의 특정 단위를 갖는 값을 지정
1.키워드
: 각 프로퍼티에 따라 사용할 수 있는 키워드가 존재
예를 들면, display프로퍼티의 값으로 사용할 수 있는 키워드는 block, inline, inline-block, none이 있다.
2. 크기 단위
- CSS에서 사용하는 대표적인 크기 단위는 px, em, % -> px은 절대값, em,%는 상대값
- 대부분 브라우저의 폰트 사이즈 기본값은 16px, 1em, 100%
- 프로퍼티 값이 0인 경우, 단위 생략 가능
(1)px
- px은 픽셀(화소) 단위, 1px은 화소 1개 크기를 의미
- 픽셀은 디바이스 해상도(resolution)에 따라 상대적인 크기를 가짐 -> 픽셀의 크기는 제각각, 픽셀을 기준으로 하는 단위는 명확하지 않기 때문에 대부분의 브라우저는 1px을 1/96인치의 절대단위로 인식
- 요소의 크기나 이미지의 크기 지정에 주로 사용
(2)%
- 백분율 단위의 상대 단위, 요소에 지정된 사이즈(상속된 사이즈나 디폴트 사이즈)에 상대적인 사이즈를 설정
<style>
body {
font-size: 14px;
text-align: center;
}
div {
font-size: 120%;
font-weight: bold;
padding: 2em;
background-color: rgba(255, 0, 0, 0.2);
}
</style>-> font-size: 120%는 14px*1.2=16.8px
(3)em
- 배수 단위로 상대단위, 요소에 지정된 사이즈(상속된 사이즈나 디폴트 사이즈)에 상대적인 사이즈 설정
- 중첩된 자식 요소에 em 지정시 모든 자식 요소의 사이즈에 영향 미침 -> em의 기준이 상속의 영향으로 바뀔 수 있다.(상황에 따라 1.2em은 각기 다른 값을 가질 수 있다)
- 1em은 요소에 지정된 사이즈와 같고, 2em은 요소에 지정된 사이즈의 *2
(4)rem(root em)
- 최상위 요소(html)의 사이즈를 기준으로 삼는다
- 사용자가 브라우저의 기본 폰트 크기를 변경하면 이에 따라 웹사이트의 레이아웃을 적절히 조정 가능하다는 장점 -> 폰트 사이즈 뿐 아니라 콘텐츠의 크기에 따라 가변적으로 대응하여야 하는 wrapper요소(container)등에 적합
- Reset CSS를 사용하여 사전에 html요소의 font-size 지정이 필요, 미지정시 16px이 적용
(5)Viewport단위 (vh, vw, vmin, nmax)
: Viewport 단위는 상대적인 단위로 viewport(가시영역)을 기준으로한 상대적 사이즈를 이미(IE8 이하 지원❌, IE9~11, Edge는 지원이 완전하지 않으므로 주의 요망)
vw: viewport 너비의 1/100
vh: viewport 높이의 1/100
vmin: viewport 너비 또는 높이 중 작은 쪽의 1/100
wmax: viewport너비 또는 높이 중 큰 쪽의 1/100
-> 예를 들어 viewport 너비가 1000px 높이가 600px인 경우
1vw: viewport 너비 1000px의 1%인 10px
1vh: viewport 높이 600px의 1%인 6px
vmin: viewport 높이 600px의 1%인 6px
vmax: viewport 너비 1000px의 1%인 10px
3.색상 표현 단위
- 색상을 지정하기 위해 키워드 사용 가능 -> 간편하다는 장점, 표현할 수 있는 색상의 수 제한된다는 단점
- 색상 표현할 수 있는 키워드 리스트 참고: W3C css3-color
- HTML COLOR COEDS
HEX 코드 단위(Hexadecimal Color): #000000
RGB(Red, Green, Blue): rgb(255, 255, 0)
RGBA(Red, Green, Blue, Alpha/투명도): rgba(255, 255, 0, 1)
HSL(Hue/색상, Saturation/채도, Lightness, Alpha): hsla(60, 100%, 50%, 1)
(1)Color keywords
poiemaweb
출처
