🐨CoalaCoding
DocsExamplesTry itBoardB반
🐨CoalaCoding

개발자를 위한 한국어 웹 기술 문서

문서

  • JavaScript
  • Web Publishing
  • React
  • Python

커뮤니티

  • 게시판
  • 예제 모음
  • Try it 에디터

기타

  • GitHub
  • 관리자
© 2026 CoalaCoding. All rights reserved.
  • 01_변수
  • 02_mask
  • 03_기본문법과-선택자
  • 04_네스팅
  • 05_svg
  • 06_가로스크롤
  • 07_문자
  • 08_반응형-폰트크기
  • 09_문단
  • 10_리퀴드글래스
  • 11_배경
  • 12_세로정렬
  • 13_박스모델
  • 14_레이아웃
  • 15_트랜지션과-애니메이션
  • 10_svg
  • 11_폼디자인
  • 12_clamp(),min(),max()
  • 14_calc
  • 15_animation
  • 16_transition
  • 1_선택자
  • 2_hover효과
  • 3_var
  • 4_클립패스
  • 5_마스크
  • 6_containerQuery
  • 7_retina
  • 8_반응형 햄버거메뉴
  • 9_transform
  • 05_ 반응형 디자인과 접근성
  1. 홈
  2. 문서
  3. HTML & CSS
  4. CSS
  5. 14_calc

14_calc

코드 블록의 Try it Yourself 버튼으로 직접 실행할 수 있다.

구문

1. 개요

MDN

CSS 속성의 값으로 계산식을 지정할 수 있다.

2. 기본문법

property: calc(expression);

예시: width: calc(100% - 80px);

3. 예제

3.1. 가변너비 요소 지정

[미리보기]

요소의 가변 너비를 쉽게 지정하기

<div class="banner">이건 현수막입니다!</div>

목차

  • 구문