CSS 단위
1. px (pixel)
절대값
2. rem (root element)
루트 엘리먼트(html)에 상대적이다
1rem=root element의 폰트사이즈
(브라우저에 설정된 기본 글꼴 크기. 보통 기본 16px)
3. em (element)
부모에 상대적이다.
1em = 부모의 font size
4. percent
부모에 상대적이다.
100% = 부모의 font size
5. vw, vh (viewport width, height)
뷰포트(화면) 넓이,높이에 상대적이다
100vw = viewport width
색상표기법
1. 색상이름
red, blue, gold와 같은 색상의 이름으로 사용 할 수 있다.
2. rgb (red, green, blue)
각각 0 - 255 사이의 값을 입력하여 사용 할 수 있다.
.rgb {color: rgba(255 0 0);} /*빨간색*/3. rgba
rgb에 a(알파값)을 추가 한 표기
a의 값은 0 - 1로 투명도를 지정할 수 있다.
0 : 투명
0.5: 반투명
1 : 불투명
.rgba{color: rgba(255 0 0/0.5)}4. hex
hexadeximal #rrggbb
16 진수를 사용하여 색상을 표기한다,
0~9, a~f의 16가지 숫자
기본 6글자이지만 3개로 줄여서 쓸 수 있는 경우도 있다.
.hex{color:#ff0000;}
.hex-3{color:#f00;} /* 두 코드 모두 동일한 색*/color, backgorund-color
color: 폰트 색상 지정
background-color: 배경색상 지정
div{background-color: #000; /*배경색*/
color:#fff; /*글자색*/ }border
엘리먼트의 경계선을 지정할 수 있다.
.border {border-width: 1px; /*선의 두께*/
border-style: dotted; /*선 종료*/
border-color: #000; /*선 색*/ }아래와 같이 축약해서도 표현가능하다.
border: 1px solid red;
