<aside> <img src="/icons/cursor-click_yellow.svg" alt="/icons/cursor-click_yellow.svg" width="40px" /> 빠른 이동을 원하시면, 아래 키워드를 클릭하세요!

</aside>

🌿 CSS에서 함수를 사용할 수 있을까?

결론부터 알려드리자면, 가능하다! 입니다. 함수란 무엇이며, 구체적으로 어떤 함수를 CSS에서 사용할 수 있는지 알아보도록 하겠습니다.

함수란?

함수란, 특정한 기능을 가지고 있는 상자 같은 것 입니다. x+10이라는 기능을 가지고 있는 상자에 1이라는 숫자를 넣으면 11이라는 숫자가 나오게 됩니다.

이렇게 지정된 기능을 수행하는 요소를 우리는 함수라고 합니다.

calc() 이라는 함수를 이용하면, 괄호 안의 사칙연산을 수행한 결과를 속성값으로 사용할 수 있습니다. 아래에서 예제를 통해 자세히 알아보도록 하겠습니다.

.item1{
	background: red;
	width: calc(50px + 50px);
	height: 50px;
}
.item2{
	background: blue;
	width: calc(100% - 120px);
	height: 50px;
}

❗️ calc() 함수 사용시 덧셈, 뺄셈 기호 앞 뒤에 반드시 공백을 주셔야 합니다.

.item3{
	background: green;
	width: calc(2*100px);
	height: 50px;
}
.item4{
	background: orange;
	width: calc(100%/4);
	height: 50px;
}