CSS에서 자주 사용되는 표현단위와 색상 표현법, 투명도에 대해 알아봅니다.
🖍️ 자주 사용되는 표현단위
px: 픽셀 (디바이스에 따라 달라질 수 있어 절대단위는 아님)%: 상대적 백분율 (부모요소 등의 영향을 받음)em: 요소의 글꼴 크기
(하나의 요소가 가진 기본 글꼴크기는 1em. 글꼴 크기가 10px이라면 1em도 10px. 상대적 단위)rem: 루트(최상위)요소 (= html)의 글꼴 크기.
(em은 각각 요소의 글꼴크기, rem은 html요소에 지정되어 있는 글꼴크기)vw: 뷰포트 가로 너비의 백분율vh: 뷰포트 세로 너비의 백분율
- 폰트사이즈 : 설정하지 않을 시 기본적으로 16px의 글자 크기를 가짐
이 상태에서 width를 10em으로 설정하게 되면, 160px이 된다. - 부모요소에 font-size가 10px로 지정되어 있다면
글자에 관련된 속성은 상속되기 때문에 100px이 된다. - 그러나 최상단이 .html{font-size : 16px} 로 지정되어 있고, rem단위를 사용했다면, 부모요소의 값과 상관 없이 16 * 10 px이 된다.
🖍️ 색상표현
색상이름
- 브라우저에서 제공하는 색상 이름, 브라우저별로 지정된 값이 다를 수 있어 정확하지 않음.
- red, royalblue, yellow 형태로 사용
Hex 색상코드
- 16진수 색상(Hexadecimal Colors)
- 정확함, 가장 많이 사용됨
- #000, #FFFFFF 형태로 사용
RGB
- 빛의 삼원색
- rgb(255,255,255) 와 같이 함수 형태로 사용
RGBA
- 빛의 삼원색+투명도(투명0~불투명1 사이의 소수점)
- rgba(0,0,0,0.5) 와 같이 함수 형태로 사용
HSL,HSLA등도 있으나 일반적으로 잘 사용되지는 않음.
🖍️ 투명도 opacity
1 : 기본값, 불투명
0 : 투명
0~1 : 0~1 사이의 소수점 숫자. (0을 생략하고 .5 등으로 입력 가능)
