CSS / calc() - 속성값을 사칙연산으로 정할 수 있게 하는 함수
개요
calc()는 괄호 안의 식을 계산한 결과를 속성값으로 사용하게 해주는 함수입니다.
예를 들어
font-size: calc( 10px + 10px );
는 글자 크기를 20px로 만듭니다.
- 버전 : CSS Level 3
문법
연산자
- +는 덧셈, -는 뺄셈, *는 곱셈, /는 나눗셈입니다.
- 곱셈과 나눗셈의 좌우에는 공백이 없어도 됩니다. 하지만, 덧셈과 뺄셈의 좌우에는 공백이 있어야 합니다.
계산 순서
- 왼쪽에서 오른쪽으로 계산합니다.
- 곱셈과 나눗셈을 먼저 하고, 덧셈과 뺄셈은 나중에 합니다.
- 괄호가 있으면 괄호 안 부터 계산합니다.
예제
<!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>
브라우저 지원
- Chrome : 26.0+
- Firefox : 16.0+
- Internet Explorer : 9.0+
- Opera : 15.0+
- Safari : 7.0+
Related Posts
CSS / Grid / IE에 적용시키는 방법 / Autoprefixer CSS online
CSS의 Grid는 인터넷 익스플로러에서 작동하지 않습니다. 최신 버전인 IE 11에서도 마찬가지입니다. 예를 들어 아래의 HTML 문서는 크롬이나 엣지 등 웹브라우저에서 의도한 대로 잘 나옵니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { ...
CSS / white-space / 공백 처리 방법 정하는 속성
개요 white-space는 스페이스와 탭, 줄바꿈, 자동줄바꿈을 어떻게 처리할지 정하는 속성입니다. 기본값 : normal 상속 : Yes 애니메이션 : No 버전 : CSS Level 1 문법 white-space: normal | nowrap | pre | pre-wrap | pre-line | initial | inherit normal, nowrap, pre, pre-wrap, pre-line : 아래 표 참고 initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 스페이스와 탭1 줄바꿈2 자동 줄바꿈3 normal 병합 병합 O nowrap 병합 병합 X pre 보존 보존 X pre-wrap 보존 보존 O pre-line 병합 보존 O 연속된 스페이스와 탭의 처리 방법입니다. 병합은 1개의 ...
표와 셀의 기본 크기 표와 셀의 크기는 정해져있지 않습니다. 내용이 짧으면 작게, 내용이 길면 크게 표와 셀이 만들어집니다. 의도하지 않은 결과가 나오지 않게 하려면 크기를 정하는 게 좋습니다. 크기를 직접 정할 때 사용하는 속성은 width 속성과 height 속성입니다. 다음은 크기를 파악하기 위해 테두리만 추가한 간단한 표입니다. 여기에 스타일을 추가해서 크기를 변경해보도록 하겠습니다. <!doctype html> <html lang="ko"> ...
CSS / border-collapse / 표의 테두리와 셀의 테두리 사이의 간격 처리 방식 정하는 속성
개요 border-collapse는 표(table)의 테두리와 셀(td)의 테두리 사이의 간격을 어떻게 처리할 지 정합니다. 기본값 : separate 상속 : Yes 애니메이션 : No 버전 : CSS Level 2 문법 border-collapse: separate | collapse | initial | inherit separate : 표(table)의 테두리와 셀(td)의 테두리 사이에 간격을 둡니다. collapse : 표(table)의 테두리와 셀(td)의 테두리 사이의 간격을 없앱니다. 겹치는 부분은 한 줄로 나타냅니다. initial : 기본값으로 설정합니다. inherit ...
CSS / Grid / grid-template-columns, grid-template-rows
grid-template-columns grid-template-columns 속성으로 열의 개수와 폭을 정합니다. 기본값은 none으로, 열을 만들이 않습니다. 속성값의 개수가 열의 개수이고, 각 속성값이 열 너비입니다. 예를 들어 속성값이 100px 50% auto라면 3열이 만들어지고, 1열의 너비는 100px, 2열의 너비는 50%, 3열의 너비는 남은 공간 전부가 됩니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> ...
CSS / list-style-image / 목록의 마커로 이미지 사용하기
개요 list-style-image로 이미지를 ul, ol 등의 목록의 마커(marker)로 사용할 수 있습니다. 기본값 : none 상속 : Yes 애니메이션 : No 버전 : CSS Level 1 문법 list-style-image: none | url | initial | inherit none : 이미지가 없습니다. url : 사용할 이미지의 URL을 입력합니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 예제 이미지는 원본 크기 그대로 나옵니다. 따라서 글자 크기에 ...
레이아웃을 만드는 방법 웹사이트의 레이아웃을 만드는 방법은 크게 두가지가 있습니다. 첫번째는 표(<table>)을 이용하는 것이고, 두번째는 CSS를 이용하는 것입니다. 2000년대 초까지만해도 CSS 보다는 <table>을 주로 사용했습니다. 하지만 <table>을 이용하는 것은 컨텐츠와 디자인의 분리 원칙에도 맞지 않고, 사이드바의 위치를 바꾸는 등 수정을 해야 할 때 편집해야할 코드가 많다는 단점이 있어 요즘에는 거의 사용하지 않습니다. 레이아웃을 ...
CSS / backface-visibility / 요소의 뒷쪽에서 앞면이 보이게 할지 정하는 속성
backface-visibility backface-visibility는 요소의 뒷쪽에서 앞면이 보이게 할지 정하는 속성입니다. 기본값 : visible 상속 : No 애니메이션 : No 버전 : CSS Level 3 문법 backface-visibility: visible | hidden | initial | inherit visible : 보이게 합니다. 기본값입니다. hidden : 보이지 않게 합니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 예제 체크박스에 체크하면 박스가 180도 회전합니다. 첫 번째 박스는 앞면이 보이고, 두 번째 박스는 ...
CSS / 애니메이션 / transform / 회전, 확대, 축소, 비틀기 등 형태 변형하는 속성
CSS3의 transform 속성으로 요소를 회전하거나 확대/축소하거나 비트는 등 형태를 변형할 수 있습니다. IE는 버전 10 이상부터 지원한다는 것에 주의합니다. transform / rotate transform의 rotate로 요소를 회전시킬 수 있습니다. 문법 transform: rotate( angle ) transform: rotateX( angle ) transform: rotateY( angle ) angle에는 각의 크기를 입력합니다. 단위는 deg, rad, grad, turn 등을 사용합니다. turn은 1회전, 즉 360deg를 의미합니다. 예제 마우스를 올렸을 때 회전합니다. 회전하는 ...
전체 선택자(Universal Selector) 전체 선택자(Universal Selector)는 모든 HTML 요소를 선택합니다. 별표(*)로 나타냅니다. 예를 들어 다음은 모든 요소의 색을 파란색으로 만듭니다. * { color: blue; } 다른 선택자와 같이 사용할 때는 생략할 수 있습니다. 즉, 다음 두 줄은 같은 결과를 만듭니다. *.abc { color: blue; } .abc { color: blue; } 타입 선택자(Type Selector) 타입 선택자(Type Selector)는 h1, p, ...