TIL

CSS 변수, 함수

:root

전역 CSS 변수 선언하기

:root {
	--main-color:royalblue;
	--pane-padding: 5px 40px;
}

해당 하이픈 2개 (--) 다음 속성이름을 적고, 속성값을 정해준다.

var()

CSS 변수값으로 지정할 수 있다.

• 첫 번째 인수 : 가져올 사용자 지정 속성 이름
• 두 번째 인수 : 대체값

strong {
	color:var(--main-color, blue);
}

calc()

CSS 속성 값으로 계산식을 지정할 수 있다

+, -, *, /와 같은 사칙연산이 가능하다.

해당 함수를 이용하여 서로 다른 단위끼리 계산할 수 있다.

width: calc(100% - 80px);

좌우 공백을 꼭! 요구한다!

calc(50% -80px) 유효하지 않으며, calc(50% -80px)와 같이 사용해야 한다.

• 기본 너비 1400px

• 수평 가운데 위치

• 뷰포트가 1400px 이하로 줄어들 경우, 좌우 30px의 여백이 생기도록

.wrap{
	width:1400px;
	margin: auto;
	max-width:calc(100% - 60px);
}

• 레이아웃 단 구성하기

<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
</ul>

li {
    float:left;
	width:calc((100% - (24px * 2)) / 3);
}

li:not(:first-child) {
	margin-left:24px;
}

min(), max()

쉼표로 구분된 () 내 목록에서 가장 작은(min) 또는 가장 큰(max) 값을 설정한다.

.wrap{
	width:1400px;
	margin: auto;
	max-width:calc(100% - 60px);
}

.wrap{
	width: min(1400px, calc(100% - 60px));
	margin: auto;
}

clamp()

설정된 이상적인 값을 기준으로 상한과 하한 사이의 값을 고정한다.

최소값, 이상적인 값, 최대값 등 3가지 값을 입력한다.

반응형 폰트를 설정할 때, 사용할 수 있다.