CSS Values & Units

 

 

 

안녕하세요. 오늘은 CSS의 값과 단위인  Values와 Units에 알아볼게요.

 

 

 

CSS Values & Units

 

들어가기 앞서서 CSS 기본 속성(properties)과 값(values)에 대해 먼저 짚고 넘어갈게요.

 

속성은 변경하고자 하는 스타일의 종류를 지정해줘요.

 

예시를 들자면 텍스트의 색상, 텍스트의 크기, 여백, 배경 색상이 있어요.

 

ex - (color, font-size, margin, background-color )

 

그리고 CSS 규칙 내에서 선언되고, 콜론(:) 뒤에 해당 속성에 적용할 값을 지정해요.

 

 

값은 속성에 할당되어, 그 속성이 어떻게 적용될지를 구체적으로 명시함으로써

 

속성이 실제로 어떤 스타일을 나타낼지를 결정해요.

 

ex - (red, 12px, 20%, #22ff22)

 

또 색상의 구체적인 지정과 크기의 정확한 측정, 여백의 크기 등을 지정해요.

 

그리고 값은 속성 다음에 오고, 세미콜론(;)으로 구문을 종료하기 전에 속성 값으로 지정해 줘요.

 

p {
	color: blue;
	margin: 10px;
}

CSS 값(데이터 유형) - CSS에서 특정 속성에 유효한 데이터를 지정하는 곳

 

길이와 거리(Lengths & Distances)

 

길이와 거리의 종류는 총 두 가지 

 

절대 길이 단위와 상대 길이 단위가 있어요.

 

첫 번째 절대 길이 단위는 픽셀(px)로 가장 일반적으로 사용되는 절대 길이 단위예요.

 

그 외 단위들은 그림과 같아요.

 

두 번째는 상대 길이 단위로 

 

특정한 다른 요소의 변화에 따라 달라지는 값이에요.

 

텍스트나 다른 요소의 크기가 페이지의 다른 모든 것에 비례하여 조정해요.

 

대표적으로 rem, ew와 vw, vh에 설명드린다면

 

rem, ew는 루트 요소의 글꼴 크기 / 요소의 글꼴 크기에 사용하고,

 

vw, vh는 뷰보트의 너비와 높이의 백분율을 나타내는 단위예요.

 

그 외 단위들을 그림과 같아요.

 

 

 

백분율(Percentages, %)

 

백분율은 부모 요소(상위 요소)의 크기에 상대적인 크기를 설정하는 단위로

 

유연한 레이아웃 디자인에 사용이 돼요.

 

 

시간(Times)

 

시간은 초(s)나 밀리초(ms)로 구분하고

 

1초는 1000밀리 초와 같아요. (1s === 1000ms)

 

 

색상(Color)

 

색상을 표현하는 방법은 네 가지로

 

16진수, hsl or hsla, 영문명, rgb or rgba로 표현하는 방법이 있어요.

 

 

첫 번째 16진수로 표현하는 방법은

 

# 기호 다음에 6자리 16진수 (0 ~ f)로 표시할 수 있어요.

 

ex - #ffff00

 

 

두 번째 hsl과 hsla로 표현하는 방법은 단어의 뜻이 중요해요.

 

두 가지의 종류 중 공통된 hsl의 뜻은

 

h: hus(색상) | s: saturation(채도) | l: ligntness(명도)이고,

 

마지막 a는

 

a: alpha(불투명도) 에요.

 

 

세 번째 영문법으로 표현하는 방법은

 

red, yellow, black과 같은 색상 영문명을 사용해요.

 

 

마지막 네 번째 rgb와 rgba로 표현하는 방법은 두 번째 방법처럼 단어의 뜻을 우선 알아보자면

 

r: red | g: green | b:blue이고, a는 동일한 alpha 에요.

 

rgb는 하나도 섞이지 않을 경우 0으로, 가득 섞였을 경우 최대 255로 표시해요.

/* rgb 표기법으로 파란색 지정하기 */
h1 { color: rgb(0, 0, 255); }

 

 

이미지(images)

 

이미지는 URL을 사용해요.

 

url('image/path.jpg')과 같이 이미지 경로를 지정할 때 사용해요.

 

 

함수(functions)

 

함수는 여러 번 실행할 수 있는 새 사용한 코드 섹션 생성으로 

 

대표적으로 calc()와 var()가 있어요.

 

calc()는 CSS 내에서 간단한 계산을 수행함으로 다른 단위의 값들을 계산할 때 사용해요.

 

ex - width: calc(100% - 20px)

 

 

var()는 CSS 변수의 값을 사용할 때 적용할 수 있어요.

 

ex - color: var(--main-color);

 

 

 

 

 

여기까지 CSS Values % Units에 알아봤는데요.

 

값과 단위를 잘 활용한다면 HTML의 뼈대에 아름답게 꾸밀 수 있을 것 같아요.