From da78a9e329e272dedb2400b79a3bdeebff387d47 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:17 -0500 Subject: initial commit --- files/ko/web/css/calc()/index.html | 160 +++++++++++++++++++++++++++++++++++++ 1 file changed, 160 insertions(+) create mode 100644 files/ko/web/css/calc()/index.html (limited to 'files/ko/web/css/calc()') 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() +--- +
{{CSSRef}}
+ +

calc() CSS 함수를 사용하면 CSS 속성의 값으로 계산식을 지정할 수 있습니다. {{cssxref("<length>")}}, {{cssxref("<frequency>")}}, {{cssxref("<angle>")}}, {{cssxref("<time>")}}, {{cssxref("<percentage>")}}, {{cssxref("<number>")}}, 또는 {{cssxref("<integer>")}}를 받는 속성의 값으로 사용할 수 있습니다.

+ +

구문

+ +
/* property: calc(expression) */
+width: calc(100% - 80px);
+
+ +

calc() 함수는 매개변수로 표현식 하나를 받고, 표현식의 결과가 최종 값이 됩니다. 표현식은 단순 계산식은 무엇이든 가능하며, 표준 연산자 우선순위를 따릅니다.

+ +
+
+
+
덧셈.
+
-
+
뺄셈.
+
*
+
곱셈. 하나 이상의 피연산자가 {{cssxref("<number>")}}여야 합니다.
+
/
+
나눗셈. 오른쪽 피연산자는 {{cssxref("<number>")}}여야 합니다.
+
+ +

피연산자로는 {{cssxref("<length>")}} 구문의 아무 값이나 사용할 수 있고, 원한다면 서로 다른 단위끼리도 계산할 수 있습니다. 괄호를 사용해서 연산 순서를 바꿀 수도 있습니다.

+ +

참고

+ + + +

형식 구문

+ +
{{csssyntax}}
+ +

예제

+ +

요소를 화면에 여백과 함께 배치하기

+ +

calc()를 이용하면 고정된 너비의 여백을 가진 요소를 쉽게 배치할 수 있습니다. 다음 예제에서는 화면을 가로지르면서 창의 좌우 모서리와 간격이 40픽셀인 배너를 생성합니다.

+ +
.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;
+}
+ +
<div class="banner">이건 현수막입니다!</div>
+ +

{{EmbedLiveSample('요소를_화면에_여백과_함께_배치하기', 'auto', '60')}}

+ +

입력 양식 요소를 컨테이너 크기에 자동으로 맞추기

+ +

calc()의 다른 용도는 입력 양식의 필드가 적절한 여백을 갖추면서도 컨테이너 모서리 바깥으로 빠져나가지 않도록 설정하는 것입니다.

+ +

다음 CSS 코드를 살펴보세요.

+ +
input {
+  padding: 2px;
+  display: block;
+  width: calc(100% - 1em);
+}
+
+#formbox {
+  width: calc(100% / 6);
+  border: 1px solid black;
+  padding: 4px;
+}
+ +

위 코드에서, 폼 스스로는 창에서 사용 가능한 공간의 1/6을 차지합니다. 그 후, 입력 필드가 적절한 크기를 가질 수 컨테이너 너비에서 1em 뺀 만큼을 calc()로 지정했습니다. 이제 HTML에 CSS를 적용해보겠습니다.

+ +
<form>
+  <div id="formBox">
+    <label>뭔가 입력해 보세요.</label>
+    <input type="text">
+  </div>
+</form>
+
+ +

{{EmbedLiveSample('입력_양식_요소를_컨테이너_크기에_자동으로_맞추기', '100%', '80')}}

+ +

CSS 변수와 중첩 calc()

+ +

CSS 변수도 calc()와 같이 사용할 수 있습니다. 다음 코드를 살펴보세요.

+ +
.foo {
+  --widthA: 100px;
+  --widthB: calc(var(--widthA) / 2);
+  --widthC: calc(var(--widthB) / 2);
+  width: var(--widthC);
+}
+ +

모든 변수를 펼치면 widthC의 값은 calc( calc( 100px / 2) / 2)가 됩니다. 그 후 .foo의 너비 속성으로 지정될 때, 모든 중첩 calc()는 깊이에 관계 없이 단순한 괄호로 바뀌므로 width 속성의 값은 calc( ( 100px / 2) / 2), 즉 25px이 됩니다. 요약하자면 calc() 안의 calc()는 그냥 괄호와 같습니다.

+ +

접근성 고려사항

+ +

calc()를 사용해 글씨 크기를 조절할땐 아래 코드처럼 피연산자 중 하나로 꼭 상대길이 단위를 사용해주세요.

+ +
h1 {
+  font-size: calc(1.5rem + 3vw);
+}
+ +

이제 페이지를 확대해도 글씨 크기의 비율이 적절히 유지됩니다.

+ + + +

명세

+ + + + + + + + + + + + + + + + +
명세상태비고
{{SpecName('CSS3 Values', '#calc-notation', 'calc()')}}{{Spec2('CSS3 Values')}}최초로 정의됨.
+ +

브라우저 호환성

+ + + +

{{Compat("css.types.calc")}}

+ +

같이 보기

+ + -- cgit v1.2.3-54-g00ecf