단위

스타일은 값을 가지게 됩니다. 값의 종류는 다양합니다.

자동완성

vscode는 스타일의 값을 빠르게 입력할 수 있도록 미리 저장된 값을 빠르게 찾아 줍니다.

글자단위

기본적으로 글자의 단위의 픽셀입니다.

3개의 단위를 지원합니다.

• px : 절대단위
• em : 배수단위 지정
• rem : html 테그 폰트기준 배수단위 지정
• % : 비율단위

색상

색상을 입력합니다. 키워드를 이용하여 빠르게 지정된 색을 지정할 수 있습니다.

RGB

키워드를 이용하여 수많은 색상을 모두 표현을 할 수 없습니다. 이런경우 직접 RGB값을 이용하여 색상을 지정할 수 있습니다.

RGB로 색상을 입력할때에는 #기호를 사용합니다.

H1 {
    color: #RRGGBB;
}

16진수 값으로 0~255까지의 값으로 표현을 합니다. RR은 래드값, GG 초록색, BB 파랑색

#FFFFFF은 흰색, #000000은 검정색을 표현합니다.

rgb()함수를 사용할 수 있습니다. 10진수로 RGB값을 지정할때 사용을 합니다.

H1 {
    color: rgb(255,255,255);
}

칼라픽커

vscode는 RGB의 색상을 빠르게 선택할 수 있도록 color picker 확장 패키지를 설치 할 수 있습니다.

칼라피커를 이용하면 보다 쉽게 RGB값을 찾아 적용할 수 있습니다.

색상조합

웹사이를 꾸밀때 색상은 매우 중요합니다. 색상을 잘 배합을 하는 것이 중요합니다. 이를 쉽게 도와줄 수 있는 adobe color 서비스가 있습니다.

검색에서 adobe color 를 입력합니다.

하나의 색을 기준으로 5개의 색을 추천해 줍니다.

url

url을 값으로 지정할 수 있습니다. 대표적인 속성으로는 backgound-image가 있습니다.

이때 url()함수를 사용할 수 있습니다.

H1 {
    backgound-image: url(http://~~~~);
}