1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
|
---
title: calc()
slug: Web/CSS/calc()
tags:
- CSS
- CSS Function
- Layout
- Reference
- Web
translation_of: Web/CSS/calc()
---
<div>{{CSSRef}}</div>
<p><span class="seoSummary"><strong><code>calc()</code></strong> <a href="/ko/docs/Web/API/CSS">CSS</a> 함수를 사용하면 CSS 속성의 값으로 계산식을 지정할 수 있습니다.</span> {{cssxref("<length>")}}, {{cssxref("<frequency>")}}, {{cssxref("<angle>")}}, {{cssxref("<time>")}}, {{cssxref("<percentage>")}}, {{cssxref("<number>")}}, 또는 {{cssxref("<integer>")}}를 받는 속성의 값으로 사용할 수 있습니다.</p>
<h2 id="구문">구문</h2>
<pre class="brush: css notranslate">/* property: calc(expression) */
width: calc(100% - 80px);
</pre>
<p><code>calc()</code> 함수는 매개변수로 표현식 하나를 받고, 표현식의 결과가 최종 값이 됩니다. 표현식은 단순 계산식은 무엇이든 가능하며, 표준 연산자 우선순위를 따릅니다.</p>
<dl>
<dt><code>+</code></dt>
<dd>덧셈.</dd>
<dt><code>-</code></dt>
<dd>뺄셈.</dd>
<dt><code>*</code></dt>
<dd>곱셈. 하나 이상의 피연산자가 {{cssxref("<number>")}}여야 합니다.</dd>
<dt><code>/</code></dt>
<dd>나눗셈. 오른쪽 피연산자는 {{cssxref("<number>")}}여야 합니다.</dd>
</dl>
<p>피연산자로는 {{cssxref("<length>")}} 구문의 아무 값이나 사용할 수 있고, 원한다면 서로 다른 단위끼리도 계산할 수 있습니다. 괄호를 사용해서 연산 순서를 바꿀 수도 있습니다.</p>
<h3 id="참고">참고</h3>
<ul>
<li>0으로 나누면 HTML 구문분석기에서 오류가 발생합니다.</li>
<li><code>+</code>와 <code>-</code> 연산자는 좌우에 공백이 있어야 합니다. <code>calc(50% -8px)</code>은 백분율 값과 음수 길로 해석하여 유효하지 않지만, <code>calc(50% - 8px)</code>은 백분율과 길이의 뺄셈으로 해석합니다. 마찬가지로, <code>calc(8px + -50%)</code>는 길이와 음의 백분율간의 덧셈으로 처리합니다.</li>
<li><code>*</code>와 <code>/</code> 연산자는 좌우 공백을 요구하지 않지만, 그래도 추가하는 편이 일관성을 유지하기에 좋습니다.</li>
<li>표의 행, 열, 행/열 그룹, 자동이나 고정 레이아웃 칸에서 백분율을 포함한 수학식을 너비나 높이로 사용하면 <code>auto</code> 키워드를 사용한 것과 동일하게 처리합니다.</li>
<li><code>calc()</code> 함수를 중첩해서 사용하면 내부의 <code>calc()</code>는 단순한 괄호로 간주합니다.</li>
</ul>
<h3 id="형식_구문">형식 구문</h3>
<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
<h2 id="예제">예제</h2>
<h3 id="요소를_화면에_여백과_함께_배치하기">요소를 화면에 여백과 함께 배치하기</h3>
<p><code>calc()</code>를 이용하면 고정된 너비의 여백을 가진 요소를 쉽게 배치할 수 있습니다. 다음 예제에서는 화면을 가로지르면서 창의 좌우 모서리와 간격이 40픽셀인 배너를 생성합니다.</p>
<pre class="brush: css notranslate">.banner {
position: absolute;
left: 40px;
width: calc(100% - 80px);
border: solid black 1px;
box-shadow: 1px 2px;
background-color: yellow;
padding: 6px;
text-align: center;
box-sizing: border-box;
}</pre>
<pre class="brush: html notranslate"><div class="banner">이건 현수막입니다!</div></pre>
<p>{{EmbedLiveSample('요소를_화면에_여백과_함께_배치하기', 'auto', '60')}}</p>
<h3 id="입력_양식_요소를_컨테이너_크기에_자동으로_맞추기">입력 양식 요소를 컨테이너 크기에 자동으로 맞추기</h3>
<p><code>calc()</code>의 다른 용도는 입력 양식의 필드가 적절한 여백을 갖추면서도 컨테이너 모서리 바깥으로 빠져나가지 않도록 설정하는 것입니다.</p>
<p>다음 CSS 코드를 살펴보세요.</p>
<pre class="brush: css notranslate">input {
padding: 2px;
display: block;
width: calc(100% - 1em);
}
#formbox {
width: calc(100% / 6);
border: 1px solid black;
padding: 4px;
}</pre>
<p>위 코드에서, 폼 스스로는 창에서 사용 가능한 공간의 1/6을 차지합니다. 그 후, 입력 필드가 적절한 크기를 가질 수 컨테이너 너비에서 1em 뺀 만큼을 calc()로 지정했습니다. 이제 HTML에 CSS를 적용해보겠습니다.</p>
<pre class="brush: html notranslate"><form>
<div id="formBox">
<label>뭔가 입력해 보세요.</label>
<input type="text">
</div>
</form>
</pre>
<p>{{EmbedLiveSample('입력_양식_요소를_컨테이너_크기에_자동으로_맞추기', '100%', '80')}}</p>
<h3 id="CSS_변수와_중첩_calc">CSS 변수와 중첩 <code>calc()</code></h3>
<p><a href="/ko/docs/Web/CSS/CSS_Variables" style="">CSS 변수</a><span style="">도 <code>calc()</code>와 같이 사용할 수 있습니다. 다음 코드를 살펴보세요.</span></p>
<pre class="brush: css notranslate"><code>.foo {
--widthA: 100px;
--widthB: calc(var(--widthA) / 2);
--widthC: calc(var(--widthB) / 2);
width: var(--widthC);
}</code></pre>
<p>모든 변수를 펼치면 <code>widthC</code>의 값은 <code>calc( calc( 100px / 2) / 2)</code>가 됩니다. 그 후 <code>.foo</code>의 너비 속성으로 지정될 때, 모든 중첩 <code>calc()</code>는 깊이에 관계 없이 단순한 괄호로 바뀌므로 <code>width</code> 속성의 값은 <code>calc( ( 100px / 2) / 2)</code>, 즉 <code>25px</code>이 됩니다. 요약하자면 <code>calc()</code> 안의 <code>calc()</code>는 그냥 괄호와 같습니다.</p>
<h2 id="접근성_고려사항">접근성 고려사항</h2>
<p><code>calc()</code>를 사용해 글씨 크기를 조절할땐 아래 코드처럼 피연산자 중 하나로 꼭 <a href="/ko/docs/Web/CSS/length#상대길이_단위">상대길이 단위</a>를 사용해주세요.</p>
<pre class="brush: css notranslate">h1 {
font-size: calc(1.5rem + 3vw);
}</pre>
<p>이제 페이지를 확대해도 글씨 크기의 비율이 적절히 유지됩니다.</p>
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li>
<li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html">Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0</a></li>
</ul>
<h2 id="명세">명세</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">명세</th>
<th scope="col">상태</th>
<th scope="col">비고</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS3 Values', '#calc-notation', 'calc()')}}</td>
<td>{{Spec2('CSS3 Values')}}</td>
<td>최초로 정의됨.</td>
</tr>
</tbody>
</table>
<h2 id="브라우저_호환성">브라우저 호환성</h2>
<p>{{Compat("css.types.calc")}}</p>
<h2 id="같이_보기">같이 보기</h2>
<ul>
<li><a href="https://hacks.mozilla.org/2010/06/css3-calc/">Firefox 4: CSS3 calc() ✩ Mozilla Hacks – the Web developer blog</a></li>
</ul>
|
