aboutsummaryrefslogtreecommitdiff
path: root/files/ko/web/css/calc()/index.html
diff options
context:
space:
mode:
authorMDN <actions@users.noreply.github.com>2022-03-19 00:13:08 +0000
committerMDN <actions@users.noreply.github.com>2022-03-19 00:13:08 +0000
commit9bf6693b2edd5281c1577856895c55653a41dc01 (patch)
tree0143e1d1d5c95776e42d8d9afdddedb13a0827c1 /files/ko/web/css/calc()/index.html
parent376471eb81e0a3dc263128f834e3c8c22bb9b4d6 (diff)
downloadtranslated-content-9bf6693b2edd5281c1577856895c55653a41dc01.tar.gz
translated-content-9bf6693b2edd5281c1577856895c55653a41dc01.tar.bz2
translated-content-9bf6693b2edd5281c1577856895c55653a41dc01.zip
[CRON] sync translated content
Diffstat (limited to 'files/ko/web/css/calc()/index.html')
-rw-r--r--files/ko/web/css/calc()/index.html160
1 files changed, 0 insertions, 160 deletions
diff --git a/files/ko/web/css/calc()/index.html b/files/ko/web/css/calc()/index.html
deleted file mode 100644
index 91da816390..0000000000
--- a/files/ko/web/css/calc()/index.html
+++ /dev/null
@@ -1,160 +0,0 @@
----
-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("&lt;length&gt;")}}, {{cssxref("&lt;frequency&gt;")}}, {{cssxref("&lt;angle&gt;")}}, {{cssxref("&lt;time&gt;")}}, {{cssxref("&lt;percentage&gt;")}}, {{cssxref("&lt;number&gt;")}}, 또는 {{cssxref("&lt;integer&gt;")}}를 받는 속성의 값으로 사용할 수 있습니다.</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("&lt;number&gt;")}}여야 합니다.</dd>
- <dt><code>/</code></dt>
- <dd>나눗셈. 오른쪽 피연산자는 {{cssxref("&lt;number&gt;")}}여야 합니다.</dd>
-</dl>
-
-<p>피연산자로는 {{cssxref("&lt;length&gt;")}} 구문의 아무 값이나 사용할 수 있고, 원한다면 서로 다른 단위끼리도 계산할 수 있습니다. 괄호를 사용해서 연산 순서를 바꿀 수도 있습니다.</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>
-
-{{csssyntax}}
-
-<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">&lt;div class="banner"&gt;이건 현수막입니다!&lt;/div&gt;</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">&lt;form&gt;
- &lt;div id="formBox"&gt;
- &lt;label&gt;뭔가 입력해 보세요.&lt;/label&gt;
- &lt;input type="text"&gt;
- &lt;/div&gt;
-&lt;/form&gt;
-</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>