TIL - CSS calc() 활용법

💡 참고자료
CSS calc() 활용법 정리

calc() 함수는 CSS에서 사용되며, 내부 매개변수로 하나의 표현식을 받는다.

표현식으로 다양한 형태의 값들이 들어올 수 있는데, 그 값을 계산하여 결과값으로 바꿔주는 함수이다.

가변적, 고정적 길이 계산

---

고정적인 길이(.img_area)를 갖고 있는 이미지와, 가변적인 길이(.text_area)를 갖고 있는 영역 간의 계산값이 필요할 때 calc() 함수를 활용한다.

.img_area {
	width: 400px;
}

.text_area {
	width: calc(100% - 400px)
	/* 덧셈과 뺄셈 연산자를 사용할 때는 앞뒤에 공백이 있어야 적용되므로 유의할 것. */
}

• 전체(100%)에서 400px 만큼 뺀 값을 .text_area width 로 설정한다는 뜻

n등분

---

전체 영역의 n등분을 할 때에도 활용 가능하다.

.area1 {
  width: calc(100% / 3);
}

.area2 {
  width: calc(100% / 3);
}

.area3 {
  width: calc(100% / 3);
}

• 정확히 3등분씩 영역을 나눠 가지게 됨