:root선택자
-
css가 처음 등장했을때에는 단순한 스타일링만 가능했다. 예를들어 색상이나
글꼴 줄간격 등 사이트의 겉 모습만 제어하는 속성만 제공했다. -
하지만 웹페이지와 애플리케이션이 점점 더 복잡해지면서 스타일을 더 세밀하게
제어할 방법이 필요해졌다. 그렇게 등장한 것이 css함수이다. -
css함수는 특정 기능을 말하며 ()안에 올바른 값을 넣어 실행한다.
:root선택자는 문서의 최상위 요소를 가리킨다. 즉, html태그를 말하는 것이다.
:root를 사용하는 이유는 css에서 '변수'라는 것을 사용하기 위해서이다.
:root는 웹문서에서 사용할 스타일들을 전체적으로 선언하는 공간으로, 일종의 '스타일 가이드'로 사용한다.
:root안에 사용할 스타일을 변수로 선언하면 일관적인 디자인을 쉽게 유지할 수 있다.
css변수
-
변수란 필요할때마다 값을 저장해놓고 사용하는 데이터 그릇을 말한다.
이 데이터가 바뀌어야 한다면 그 값을 바꿀 수도 있다. -
css에서 사용하는 변수는 마치 피그마의 컴포넌트처럼 일관적인 디자인을 유지하기 위해
미리 웹 문서에서 사용할 스타일에 이름을 붙여서 저장하는 역할을 한다. -
css변수를 쓰는 방법은 :root의 {}안에 하이픈 두개를 앞에 붙여 변수 이름을 지어서 사용한다. 단, 변수 이름을 지을때에는 소문자로만 지어야 한다.
[기본형]
:root{
--변수이름 : 값;
}var(--변수이름)
-
변수에 저장했던 값을 표시하는 함수이다.
값을 표시할때에는 var()소괄호 안에 --변수이름을 넣으면 그에 해당하는 값이 적용된다.[기본형]
선택자{
color : var(--변수이름);
}
calc()
-
계산식으로 값을 나타내는 함수. calc()함수는 calculation의 줄임말로 '계산기'를 뜻한다.
-
이름 그대로 계산식을 사용하여 속성값을 적용한다. 함수의 괄호 안에는 각도, 시간, 백분율, 숫자 등 다양한 단위를 사용하는 계산식이 들어간다.
[기본형]
선택자{
속성 : calc(계산식);
}
clamp()
-
clamp()함수는 대상 2개를 물리적으로 고정하는 장치이다.
특정 값의 범위를 '고정'하거나 '제한'할때 사용한다. -
clamp()함수에는 최솟값과 최적값, 최댓값 이렇게 3가지 값이 들어간다.
-
3가지 값을 지정하면 화면 크기에따라 값을 바꿀 수 있는데, 최솟값보다 작아질 수 없고
최댓값보다 커질 수 없다.
[기본형]
선택자{
속성 : clamp(최솟값, 최적값, 최댓값)
}
filter()
- 다양한 시삭 효과를 줄때 사용하는 속성이다.
마치 포토샵으로 꾸민것 같은 효과를 준다.
[기본형]
filter : 함수(값);
[속성값]
blur(흐림정도px)
: 선택한 이미지에 흐림 효과를 적용한다. 만약 부모에 적용되면
안쪽 컨텐츠까지 블러처리가 된다.
- brightness(밝기 정도)
: 선택한 이미지를 밝거나 어둡게 처리한다. 밝기 정도는 백분율이나 단위없이 숫자를 사용한다.
brightness(0%)또는 brightness(0)은 완전히 검정색으로 변하고,
brightness(100%)또는 brightness(1)은 현재 이미지 밝기를 유지하고,
brightness(200%)또는 brightness(2)는 밝기를 2배로 증가시킨다.
- contrast()
: 이미지의 밝기나 채도 대비를 지정한다. 단위는 %를 사용한다.
contrast(0%)은 대비가 전혀 없이 회색으로 표시된다.
contrast(100%)은 기존 이미지의 밝기와 채도를 유지한다.
contrast(200%)은 대비를 2배로 증가시켜 색상간의 차이를 더 뚜렷하게 한다.
- drop-shadow()
: 이미지의 윤곽을 따라 그림자를 처리한다. box-shadow와 동일하게 속성값을 적용한다.
drop-shadow(가로위치 세로위치 흐림정도 그림자색상)
- invert()
: 이미지의 색상을 반전 시킨다. 값은 0% ~ 100%사이의 값을 입력한다.
1% ~ 50&까지는 회색으로 이미지가 전체 처리되고, 50% 이상부터
색상이 반전된다. 100%가 완전한 색상 반전이다.
- sepia()
: 이미지를 세피아 톤으로 변경해서 표시한다. 세피아 톤이란
이미지나 사진에 색족를 추가하여 빈티지한 효과를 내는 필터이다.
%단위를 사용한다.
- grayscale()
: 이미지를 흑백사진으로 변환한다. 값은 %단위를 사용하고
100%에 가까워 질수로 점점 회색 사진이 된다.
- opacity()
: 투명도를 조절한다. 0% ~ 100%값을 사용할 수 있다.
0%는 이미지를 완전히 투명하게 만들고, 100%는 원본이다.
- hue-rotate()
: hsl색상환을 사용하여 색상을 바꾸는 속성값이다.
각도의 단위(deg)를 사용한다.
- saturate()
: 이미지의 채로들 변경시키는 속성값이다. 값은 %단위를 사용한다.
min()=최솟값, max()=최댓값
-
화면 넓이에 따라 속성값을 다르게 적용할때 최솟값과 최댓값을 고려할 수 있다.
-
min()함수는 괄호안에 나열된 값 중에 가장 작은 값을 적용하고,
max()함수는 괄호안에 나열된 값 중에 가장 큰 값을 적용한다.[기본형]
선택자{
속성 : min(값1, 값2, 값3....)
속성 : max(값1, 값2, 값3....)
}
