CSS - 변수와 함수

---

CSS 변수와 함수 

 

 

* :root 

- 전역 CSS 변수를 선언한다. 

- HTML 문서에서 HTML을 선택한다. 

- 하이픈 2개(--) 다음 속성 이름을 적어주고 콜론(:) 뒤에 속성값을 적는다. 

✏ --속성이름:속성값

- 변수를 이용하면 일괄적으로 관리할 수 있어 유지보수에 용이하다. 

 

 

 * var() 

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

- 첫 번째 인수에는 가져올 사용자 지정 속성 이름을, 두 번째 인수에는 대체값을 작성한다. 

:root {
    --div-main-color: pink;
}


div {
    color: var(--div-main-color);
}

 

 

 

 * calc() 

- CSS 속성 값으로 계산식을 지정할 수 있다. 
- +, -, *, / 사칙연산이 가능하다. 
- 해당 함수를 이용하여 서로 다른 단위끼리 계산할 수 있다. 

width:calc(100% - 80px)

※ 좌우 공백을 꼭 요구한다. 
✏ calc(50% -80px) : 적용되지 않는다. 

 = > (50% - 80px)로 표기해야 한다.
✏ calc(8px + -50%) : 음수도 사용할 수 있다.

✏  *, / 연산자는 좌우 공백이 없어도 되지만 일관성을 위해 넣는 것이 좋다.

 

 

 

 * min(), max() 

- 괄호 내에 쉼표로 구분한 목록을 주고 그중 가장 가까운, 작은(min) 또는 가장 큰(max) 값을 설정한다.

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

/* 더 간결하게 표기 가능 */
.wrap{
	width: min(1400px, calc(100% - 60px));
	margin: auto;
}

※ IE 지원이 안된다.

 

 

 

 * clamp() 

- 설정된 이상적인 값을 기준으로 상한과 하한 사이의 값을 고정한다. 
- 최솟값 | 이상적인 값 | 최댓값 값을 입력한다.
- clamp(클램프) : 범위 제한 / 고정시키다. 
- 반응형 폰트를 설정할 때 사용할 수 있다. 

font-size: clamp(1rem, 2.5vw, 2rem);

※ IE 지원이 안된다.

 

---

 

 

 

 

 

 

 

 

 

 

잘못된 정보에 대한 피드백은 언제든지 환영입니다!