1. 사용자 지정 CSS 속성
사용자 지정 속성(CSS 변수, 종속 변수)은 CSS 저작자가 정의하는 개체로, 문서 전반적으로 재사용할 임의의 값을 담는다. 사용자 지정 속성을 사용하면 한 영역에 값을 저장해 놓고 다른 여러 곳에서 참조해갈 수 있어 유지보수에 용이하다.
1-1. 사용자 지정 CSS 속성 정의 방법
사용자 지정 속성은 '--'을 붙이는 전용 표기법을 사용해 정의하고, ex) --main-color: black;
var() 함수를 사용해 접근할 수 있다. ex) color: var(--main-color);
1-2. 사용자 지정 CSS의 사용
: root - 전역 변수 설정
:root 의사 클래스에 선언해서 HTML 문서 어디에서나 사용자 지정 속성에 접근할 수 있도록 구성한다.
하이픈 2개 -- 다음 속성이름을 적어주고 (콜론) 뒤에 속성값을 적는다.
:root {
--main-bg-color: royalblue;
}
지역 변수 설정
지역변수로 선언된 CSS 변수는 변수명이 같을지라도 전체 요소에 공유되지 않고 오로지 그 요소에서만 적용되게 된다.
.box2{
--box-color:gold;
background-color: var(--box-color, yellow);
}
var( )
CSS 변숫값으로 지정할 수 있다. --> 첫 번째 인수: 가져올 사용자 지정 속성 이름 / 두 번째 인수: 대체값
.box1 {
color: var(--main-bg-color, blue);
}
아래의 코드를 보면서 적용이 어떻게 되었는지 살펴보자.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 변수 설정</title>
<style>
:root {
--main-bg-color: royalblue;
}
.box div {
width: 200px;
height: 200px;
background-color: tomato;
}
div.box1 {
background-color: var(--main-bg-color, blue);
}
div.box2 {
--box-color: gold;
background-color: var(--box-color, yellow);
}
div.box2 {
background-color: var(--box-color, yellow);
}
div.box3 {
background-color: var(--box-color, yellow);
}
</style>
</head>
<body>
<div class="box">
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
</div>
</body>
</html>
전역 변수로 지정한 --main-bg-color는 box1에 잘 적용되었고, 지역 변수로 지정한 --box-color는 box2에만 적용되고 box3에는 적용되지 않을 것을 확인할 수 있다.
1-3. 그렇다면, box2에 자식 요소가 있는 경우 자식요소에도 지역 변수가 적용이 될까?
자식, 자손 요소를 추가해 적용해 보았다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 변수 설정</title>
<style>
:root {
--main-bg-color: royalblue;
}
.box div {
width: 200px;
height: 200px;
background-color: tomato;
}
div.box1 {
background-color: var(--main-bg-color, blue);
}
div.box2 {
height: auto;
--box-color: gold;
background-color: var(--box-color, yellow);
}
div.box2-1 {
background-color: var(--box-color, yellow);
}
div.box2-2-1 {
background-color: var(--box-color, yellow);
}
div.box3 {
background-color: var(--box-color, yellow);
}
</style>
</head>
<body>
<div class="box">
<div class="box1">box1</div>
<div class="box2">
<div class="box2-1">
box2-1
</div>
<div class="box2-2">
<div class="box2-2-1">box2-2-1</div>
</div>
</div>
<div class="box3">box3</div>
</div>
</body>
</html>
자식 요소와 자손 요소까지 지역 변수가 적용됨을 확인할 수 있다.
2. 기타 CSS 함수
2-1. calc()
css 속성 값으로 계산식을 지정할 수 있으며 사칙연산이 가능하다. 서로 다른 단위 계산이 가능하다. 요소를 화면에 여백과 함께 배치할 때 사용하기 좋다.
.wrap{
width:1400px;
margin: auto;
max-width:calc(100% - 60px);
}*** 연산자 사이에 좌우 공백을 꼭!!! 넣어줘야 한다.***
- calc(50% -80px) 유효하지 않다.(-뒤에 공백이 없기 때문)
- calc(8px + -50%)는 길이와 음의 백분율 간의 덧셈으로 처리된다.
- *, / 연산자는 좌우 공백을 요구하지 않지만, 일관성을 위해서 넣는 것이 좋다.
2-2. min(), max()
쉼표로 구분된 () 내 목록에서 가장 작은(min) 또는 가장 큰(max) 값을 설정한다.
.wrap{
width:1400px;
margin: auto;
max-width:calc(100% - 60px);
}.wrap{
width: min(1400px, calc(100% - 60px));
margin: auto;
}
2-3.clamp()
설정된 이상적인 값을 기준으로 상한과 하한 사이의 값을 고정한다. 최솟값, 이상적인 값(중간 값), 최댓값 세 가지 값을 입력하며, 반응형 폰트를 설정할 때 사용할 수 있다.
font-size: clamp(1rem, 2.5vw, 2rem);
참고 자료 : https://developer.mozilla.org/ko/docs/Web/CSS/-webkit-line-clamp
'👩🏻💻Frontend > CSS' 카테고리의 다른 글
| 스크린 리더 사용자를 위한 기업의 CSS IR(Image Replacement) 기법 (0) | 2023.07.27 |
|---|---|
| CSS Grid 정리 (0) | 2023.07.22 |
| 웹 브라우저 렌더링 개념 - position transform 속성 차이 (1) | 2023.07.14 |
| CSS Flex 정리 (0) | 2023.07.12 |
| CSS 선택자 적용 우선순위 계산하기 (0) | 2023.07.11 |
