CSS / calc() - 속성값을 사칙연산으로 정할 수 있게 하는 함수

개요

calc()는 괄호 안의 식을 계산한 결과를 속성값으로 사용하게 해주는 함수이다. 예를 들어

font-size: calc( 10px + 10px );

는 글자 크기를 20px로 설정한다.

문법

연산자

  • +는 덧셈, -는 뺄셈, *는 곱셈, /는 나눗셈이다.
  • 곱셈과 나눗셈의 좌우에는 공백이 없어도 된다. 하지만, 덧셈과 뺄셈의 좌우에는 공백이 있어야 한다.

계산 순서

  • 왼쪽에서 오른쪽으로 계산한다.
  • 곱셈과 나눗셈을 먼저 하고, 덧셈과 뺄셈은 나중에 한다.
  • 괄호가 있으면 괄호 안 부터 계산한다.

예제

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      div { margin: 10px 0px; border: 1px solid #dadada; }
      .a { width: 80%; }
      .b { width: calc( 80% - 20px ); }
      .c { width: calc( ( 40% * 2 ) - 40px / 2 ); }
      .d { font-size: calc( 4em / 2 + 5px ); }
    </style>
  </head>
  <body>
    <div class="a"><code>width: 80%;</code></div>
    <div class="b"><code>width: calc( 80% - 20px );</code></div>
    <div class="c"><code>width: calc( ( 40% * 2 ) - 40px / 2 );</code></div>
    <div class="d"><code>font-size: calc( 4em / 2 + 5px );</code></div>
  </body>
</html>

같은 카테고리의 다른 글
CSS / 이미지 버튼 만들기

CSS / 이미지 버튼 만들기

버튼을 꾸미는 방법 중의 하나는 이미지를 이용하는 것입니다. 적당한 크기의 버튼을 만듭니다. 그 크기에 맞는 이미지를 배경으로 정합니다. 다음은 32x32 크기의 돋보기 이미지를 이용해서 버튼을 꾸미는 예제입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> input { ...

CSS / border-style / 테두리 모양 정하는 속성

CSS / border-style / 테두리 모양 정하는 속성

개요 border-style은 테두리(border)의 모양을 정하는 속성으로, 다음 속성의 단축 속성이다. border-top-style border-right-style border-bottom-style border-left-style 문법 border-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit initial : 기본값으로 설정한다. 기본값은 none이다. inherit : 부모 요소의 속성값을 상속받는다. 속성값은 한 개에서 네 개까지 정할 수 있다. 다음은 모든 ...

CSS / 마우스 오버 시 텍스트 나오게 하는 방법

CSS / 마우스 오버 시 텍스트 나오게 하는 방법

CSS로 특정 요소에 마우스를 올렸을 때 보이지 않던 특정 요소가 보이게 할 수 있다. 아래는 문단에 마우스를 올렸을 때 div 요소가 나오게 하는 예제이다. div 요소 안에 텍스트가 있지만, 텍스트가 아닌 이미지 등 다른 것도 가능하다. 마우스 올렸을 때 모양 만들기 마우스를 올렸을 때 보이길 원하는 모양을 먼저 만든다. .jb-title에 마우스를 올리면 .jb-text가 ...

CSS / font-family / 글꼴 정하는 속성

CSS / font-family / 글꼴 정하는 속성

개요 font-family는 글꼴을 설정하는 속성이다. 기본값 : 웹브라우저의 기본 글꼴 상속 : Yes 애니메이션 : No 버전 : CSS Level 1 문법 font-family: font | initial | inherit font : family-name 또는 generic-family initial : 기본값으로 설정 inherit : 부모 요소의 속성값을 상속받음 font family-name은 글꼴 이름이다. 글꼴 이름에 띄어쓰기가 있으면 작은 따옴표 또는 큰 따옴표로 감싼다. generic-family는 글꼴 유형이다. 글꼴 유형은 다음과 ...

CSS / 세로 가운데 정렬하는 방법

CSS / 세로 가운데 정렬하는 방법

CSS에서 텍스트의 가로 가운데 정렬은 text-align 속성을 이용합니다. text-align: center; 요소의 가로 가운데 정렬은 margin 속성을 이용합니다. margin-left: auto; margin-right: auto; 그렇다면 다음처럼 세로 정렬을 가운데로 하려면 어떻게 해야 할까요? 방법 1 - padding 속성 이용하기 바깥쪽 요소에 padding 속성을 추가해서 세로 정렬을 가운데로 할 수 있습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...

CSS / 선택자(Selector)

CSS / 선택자(Selector)

전체 선택자(Universal Selector) 전체 선택자(Universal Selector)는 모든 HTML 요소를 선택합니다. 별표(*)로 나타냅니다. 예를 들어 다음은 모든 요소의 색을 파란색으로 만듭니다. * { color: blue; } 다른 선택자와 같이 사용할 때는 생략할 수 있습니다. 즉, 다음 두 줄은 같은 결과를 만듭니다. *.abc { color: blue; } .abc { color: blue; } 타입 선택자(Type Selector) 타입 선택자(Type Selector)는 h1, p, ...

CSS / IE에서 표의 셀 안의 이미지 크기 설정하는 방법

CSS / IE에서 표의 셀 안의 이미지 크기 설정하는 방법

표의 셀 안에 200x200 크기의 이미지를 넣고, 셀의 가로 크기를 100px로 정해도, 이미지는 200x200 크기로 나옵니다. 셀의 크기에 맞게 이미지가 줄어들게 하는 방법은 두가지가 있습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> table { ...

CSS / 도형 만들기 / 마름모

CSS / 도형 만들기 / 마름모

마름모는 삼각형을 두 개 붙여서 만든다. HTML 문서에 다음과 같이 내용이 없는 요소를 하나 넣는다. <div class="rhombus"></div> 크기를 0으로 한 후, border 속성을 이용하여 삼각형을 만든다. position: relative;는 나머지 반쪽의 위치를 잡기 위해 넣은 것이다. .rhombus { width: 0px; height: 0px; border-right: 200px solid #666666; border-top: 100px solid transparent; border-bottom: ...

CSS / color / 글자 색 정하는 속성

CSS / color / 글자 색 정하는 속성

개요 color로 텍스트의 색을 정합니다. 상속 : Yes 애니메이션 : Yes 버전 : CSS Level 1 문법 color: color | initial | inherit color : 색을 정합니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> ...

CSS / font-size / 글자 크기 정하는 속성

CSS / font-size / 글자 크기 정하는 속성

개요 font-size는 글자 크기를 정하는 속성입니다. 기본값 : medium 상속 : Yes 애니메이션 : Yes 버전 : CSS Level 1 문법 font-size: medium | xx-small | x-small | small | large | x-large | xx-large | smaller | larger | length | initial | inherit medium : 웹브라우저에서 정한 기본 글자크기입니다. xx-small, x-small, small, large, x-large, xx-large : medium에 ...