💫 CSS 단위
반드시 단위 표기를 해야 한다.- 0을 입력하는 경우 단위를 입력하지 않아도 된다.
- HTML에서 단위를 안 붙이는 경우 자동으로 px 적용된다.
💫 크기 단위
% : 백분율
em : 배수
- 상대 크기
- 1배 = 1em = 100%
- 1.5배 = 1.5em = 150%
px : 픽셀
💫 상대 단위
- 고정되지 않고
어떤 기준에 따라서 유동적으로 바뀔 수 있는 길이를 나타내는 단위
em
- element
- 1em = 16px
- 부모 요소 글꼴 크기에 대한 상대 단위
부모 태그를 기준(100%)으로 하는 상대 단위
.content { font-size: 16px; }
.content {
font-size: 1.5em;
margin: 2em;
}
rem
- root element
루트 요소(<html>) 글꼴 크기에 대한 상대 단위<html>을 기준(100%)으로 하는 상대 단위- html의 default 폰트 사이즈는 16px
- 1rem = 16px
html{ font-size: 16px; }
.content {
font-size: 1.5rem;
margin: 2rem;
}
💫 색상 단위
red, yellow, blue
rgb(red, green, blue)
- RGB Color(DEC)
- RGB (0 ~ 255)
#000000
- RGB Color(HEX)
- RGB 색상 단위를 짧게 입력하는 방법
- 16진수 (00 ~ FF)
rgba(red, green, blue, alpha)
- RGBA Color(DEC)
- alpha
- 투명도(0 ~ 1)
- 0 : 완전 투명한 상태
- 1 : 불투명한 상태
#text1 { color: red; }
#text2 { color: #0094FF; }
#text3 { color: rgb(0, 0, 150); }
#text4 { color: rgba(30, 150, 100, 0.5); }
💫 URL 단위
- 이미지 파일이나 폰트 파일을 불러올 때
- url( ) 함수 내부에 경로를 입력하면 된다.
background-image: url(images/bullet01.png);
