[CSS] calc() 함수 사용법

📚calc() 란?

calc()는 괄호 안의 식을 계산한 결과를 속성값으로 사용하게 해주는 함수이다.
반응형 웹이나 모바일 코딩을 하게 되면 사용되는 함수이다.

 

width: calc(50% - 20px);

 

위의 예에서 'with' 속성은 50%에서 20픽셀을 뺀 값으로 설정된다.

calc() 장점

• 유연성
• 간결성
• 동적 레이아웃
• 가독성 등

📌 clac문제

두 개의 박스가 있고, 각각의 박스는 화면 전체의 절반 폭을 가지고 있다. 그리고 각 박스의 좌우에는 `10px`의 여백이 있다. `calc`함수를 사용하여 이 두박스의 폭을 설정하는 CSS 코드를  작성해보시오. (정답은 하단)

 

📌Clac 팁

• calc(50% - 20px)를 작성하면 더하기(+), 빼기(-) 기호는 띄어쓰기(공백)가 필수이며,
  곱하기(*) 나누기(/) 는 공백을 작성할 필요 없다.

---

 

 

 

.box {
  width: calc(50% - 20px);
  margin: 0 10px;
  box-sizing: border-box; /* 여백을 포함한 전체 크기를 유지하도록 box-sizing 속성 설정 */
}

 

`calc(50% -20px)`에서 `-20px` 하는 이유는 여백(`margin`)을 고려하여

실제로 화면에서 차지하는 영역의 크기를 조절하기 위함이다.