calc() 함수는 더하기(+), 빼기(-), 곱하기(*) 및 나누기(/)의 네 가지 산술 연산을 지원합니다.

이 함수는 주로 컨테이너의 동적 너비와 높이를 계산하여 적응형 레이아웃 환경을 만드는 데 사용됩니다.

 

HTML 코드 : 

<div class="calc">100% – 200px</div>

<div class="no-calc">기본 컨테이너 너비</div>

 

CSS 코드 : 

.calc {
  background: #FFF2EA;
  padding: 15px 25px;
  width: calc(100% - 200px);
}
.no-calc {
  background: #c8e6f5;
  padding: 15px 25px;
  margin-top: 20px;
}

 

그누보드강좌/영카트강좌 - 기초부터 적용까지 체계적인 영상강좌

프로그래밍 실력 확인하기
PHP한글설명서

By 웹학교