diff options
Diffstat (limited to 'files/ko/web/css/calc()/index.html')
| -rw-r--r-- | files/ko/web/css/calc()/index.html | 160 |
1 files changed, 160 insertions, 0 deletions
diff --git a/files/ko/web/css/calc()/index.html b/files/ko/web/css/calc()/index.html new file mode 100644 index 0000000000..7a155befb3 --- /dev/null +++ b/files/ko/web/css/calc()/index.html @@ -0,0 +1,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> |