📍 CSS 변수, 함수

• :root
: 전역 CSS 변수를 선언한다. -- 다음 속성 이름을 적어주고 속성값을 적는다.

• var()
: CSS 변수값으로 지정할 수 있다. 첫번째 인수는 가져올 사용자 지정 속성의 이름을 넣고 두번째 인수는 대체값으로 넣는다. 만약 첫번째 인수에 문제가 있거나 값이 없을 경우 대체값으로 속성이 지정된다.

:root{
	--main-color: royalblue;
}
body{
	color: var(--main-color, purple);
}

• calc()
: CSS 속성 값으로 계산식을 지정할 수 있다. 사칙연산이 가능하고 서로 다른 단위끼리 계산할 수 있다.

width: calc(100% - 40px);

응용 1) 요소를 화면에 여백과 같이 배치하기

뷰포트가 100px 이하로 줄어들 경우 20px의 여백이 생기도록 설정
.wrap{
	width:100px;
    margin: auto;
    max-width: calc(100% - 40%);
}

응용 2) 레이아웃 단 구성하기

<!-- HTML -->
<ul>
	<li>1<li>
    <li>2<li>
    <li>3<li>
</ul>

/* CSS */
li{
	float: left;
    width: calc((100% - (24px * 2)) / 3)
    /* width: calc((100% - 48px) / 3) 같은 의미*/
}
li:not(:first-child){
	margin-left:24px;
}

• min(), max()

:root{
     --max-width: 1000px;
     --plane-padding: 30px;
}
.wrap1 {
    height: 100px;
    margin: auto;
    /* max() */
    max-width: calc(100% - var(--plane-padding));
}
.wrap2 {
	/* min() */
	width: min(var(--max-width), calc(100% - var(--plane-padding)));
}

• clamp()
: 설정된 이상적인 값을 기준으로 상한과 하한 사이의 값을 고정한다. 반응형 폰트를 설정할 때 사용할 수 있다.

/* font-size: clamp(최소값, 이상적인 값, 최대값)*/
font-size: clamp(1rem, 2.5vw, 2rem);

---

📍 float, flex, grid 실습

float, flex, grid 실습 github
추가적으로 실습을 더 할 예정

---

📍 figma 사용

figma 사이트
사이트 들어가서 연습해보기