---
title: CSS 값 과 단위
slug: Learn/CSS/Building_blocks/Values_and_units
translation_of: Learn/CSS/Building_blocks/Values_and_units
---
<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks")}}</div>

<p>CSS 에 사용된 모든 속성에는 해당 속성에 허용되는 값 이 있으며, MDN 의 속성 페이지를 보면 특성 속성에 유효한 값을 이해하는 데 도움이 됩니다. 이 레슨에서는 가장 일반적인 값 과 사용 단위를 살펴 보겠습니다.</p>

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">전제조건:</th>
   <td>기본 컴퓨터 활용 능력, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">기본 소프트웨어 설치</a>, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">파일 작업</a> 에 대한 기본 지식,  HTML 기본 사항 (<a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">HTML 소개</a> 학습) 및 , CSS 작동 방식 이해 (<a href="/en-US/docs/Learn/CSS/First_steps">CSS 첫 번째 단계</a> 학습)</td>
  </tr>
  <tr>
   <th scope="row">목적:</th>
   <td>CSS 속성에 사용되는 다양한 유형의 값과 단위에 대해 배우기.</td>
  </tr>
 </tbody>
</table>

<h2 id="CSS_값이란_무엇인가">CSS 값이란 무엇인가?</h2>

<p>CSS 사양과 MDN 의 속성 페이지에서 <code><a href="/en-US/docs/Web/CSS/color_value">&lt;color&gt;</a></code> 또는 <code><a href="/en-US/docs/Web/CSS/length">&lt;length&gt;</a></code>. 와 같이 꺽쇠 괄호로 묶여 있는 값을 찾을 수 있습니다. <code>&lt;color&gt;</code> 값이 특정 속성에 유효한 것으로 표시되면, <code><a href="/en-US/docs/Web/CSS/color_value">&lt;color&gt;</a></code> 참조 페이지에 나열된대로 유효한 속성을 해당 속성의 값으로 사용할 수 있습니다.</p>

<div class="blockIndicator note">
<p><strong>참고</strong>: CSS 값을 <em>데이터 유형 </em>이라고 합니다. 용어는 기본적으로 상호 교환이 가능합니다 — CSS 에서 데이터 유형이라고 하는것을 볼 때, 실제로 가치를 말하는 멋진 방법입니다.</p>
</div>

<div class="blockIndicator note">
<p><strong>참고</strong>: 예, CSS 값은 CSS 속성과 구별하기 위해, 꺽쇠 괄호를 사용하여 표시되는 경향이 있습니다 (예: {{cssxref("color")}} 속성, <a href="/en-US/docs/Web/CSS/color_value">&lt;color&gt;</a> 데이터 형식). CSS 데이터 형식과 HTML 요소도 꺽쇠 괄호를 사용하므로 혼동될 수 있지만, 이는 매우 다른 상황에서 사용됩니다.</p>
</div>

<p>다음 예제에서는 키워드를 사용하여 머리글의 색상을 설정하고, <code>rgb()</code> 함수를 사용하여 배경을 설정했습니다:</p>

<pre class="brush: css"><code>h1 {
  color: black;
  background-color: rgb(197,93,161);
} </code>
</pre>

<p>CSS 값은 허용가능한 하위값 모음을 정의하는 방법입니다. 즉, <code>&lt;color&gt;</code> 가 유효한 것으로 표시되면 — 키워드, 16진수 값, <code>rgb()</code> 함수 등 어떤 색상값을 사용할 수 있는지 궁금할 필요가 없습니다. 사용 가능한 <code>&lt;color&gt;</code> 값은 브라우저에서 지원한다고 가정합니다. 각 값에 대한 MDN 페이지는 브라우저 지원에 대한 정보를 제공합니다. 예를 들어 <code><a href="/en-US/docs/Web/CSS/color_value">&lt;color&gt;</a></code> 페이지를 보면 브라우저 호환성 섹션에 다양한 색상값 유형과 지원이 나열되어 있습니다.</p>

<p>여러가지 가능한 값을 시험해 볼 수 있도록 예를 들어 자주 접할 수 있는 몇 가지 유형의 값과 단위를 살펴보겠습니다.</p>

<h2 id="숫자_길이_및_백분율">숫자, 길이 및 백분율</h2>

<p>CSS 에서 사용할 수 있는 다양한 숫자 데이터 형식이 있습니다. 다음은 모두 숫자로 분류됩니다:</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">데이터 형식</th>
   <th scope="col">설명</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><code><a href="/en-US/docs/Web/CSS/integer">&lt;integer&gt;</a></code></td>
   <td><code>&lt;integer&gt;</code> 은 <code>1024</code> 또는<code>-55</code> 와 같은 정수입니다.</td>
  </tr>
  <tr>
   <td><code><a href="/en-US/docs/Web/CSS/number">&lt;number&gt;</a></code></td>
   <td><code>&lt;number&gt;</code> 는 10진수를 나타냅니다 — 소수점 이하의 소수 자릿수 (예: <code>0.255</code>, <code>128</code> 또는 <code>-1.2</code>) 가 있을 수도 있고 없을 수도 있습니다.</td>
  </tr>
  <tr>
   <td><code>&lt;dimension&gt;</code></td>
   <td><code>&lt;dimension&gt;</code> 은 예를 들어 <code>45deg</code>, <code>5s</code> 또는 <code>10px</code>. 과 같은 단위가 붙어있는 <code>&lt;number&gt;</code> 입니다. <code>&lt;dimension&gt;</code> 은 <code><a href="/en-US/docs/Web/CSS/length">&lt;length&gt;</a></code>, <code><a href="/en-US/docs/Web/CSS/angle">&lt;angle&gt;</a></code>, <code><a href="/en-US/docs/Web/CSS/time">&lt;time&gt;</a></code> 및 <code><a href="/en-US/docs/Web/CSS/resolution">&lt;resolution&gt;</a></code> 의 종류를 포함하는 카테고리입니다<a href="/en-US/docs/Web/CSS/resolution">.</a></td>
  </tr>
  <tr>
   <td><code><a href="/en-US/docs/Web/CSS/percentage">&lt;percentage&gt;</a></code></td>
   <td><code>&lt;percentage&gt;</code> 는 다른 값의 일부, 예를 들어 <code>50%</code> 를 나타냅니다. 백분율 값은 항상 다른 수량을 기준으로 합니다. 예를 들어 요소의 길이는 부모 요소의 길이를 기준으로 합니다.</td>
  </tr>
 </tbody>
</table>

<h3 id="길이">길이</h3>

<p>가장 자주 사용되는 숫자 형식은 <code>&lt;length&gt;</code> 입니다. 예를 들면 <code>10px</code> (픽셀) 또는<code>30em</code>. CSS 에서 사용되는 길이는 — 상대 및 절대의 두 가지 유형이 있습니다. 얼마나 커질지 알기 위해서는 차이를 이해하는 것이 중요합니다.</p>

<h4 id="절대_길이_단위">절대 길이 단위</h4>

<p>다음은 모두 <strong>절대</strong> 길이 단위이며 — 다른 것과 관련이 없으며 일반적으로 항상 동일한 크기로 간주됩니다.</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">단위</th>
   <th scope="col">이름</th>
   <th scope="col">다음과 동일함</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><code>cm</code></td>
   <td>센티미터</td>
   <td>1cm = 96px/2.54</td>
  </tr>
  <tr>
   <td><code>mm</code></td>
   <td>밀리미터</td>
   <td>1mm = 1/10th of 1cm</td>
  </tr>
  <tr>
   <td><code>Q</code></td>
   <td>4분의 1 밀리미터</td>
   <td>1Q = 1/40th of 1cm</td>
  </tr>
  <tr>
   <td><code>in</code></td>
   <td>인치</td>
   <td>1in = 2.54cm = 96px</td>
  </tr>
  <tr>
   <td><code>pc</code></td>
   <td>Picas</td>
   <td>1pc = 1/16th of 1in</td>
  </tr>
  <tr>
   <td><code>pt</code></td>
   <td>포인트</td>
   <td>1pt = 1/72th of 1in</td>
  </tr>
  <tr>
   <td><code>px</code></td>
   <td>픽셀</td>
   <td>1px = 1/96th of 1in</td>
  </tr>
 </tbody>
</table>

<p>이러한 값의 대부분은 화면 출력이 아닌 인쇄에 사용될 때 더 유용합니다. 예를 들어 일반적으로 화면에 <code>cm</code> (센티미터) 를 사용하지 않습니다. 보통 사용하는 유일한 값은 <code>px</code> (픽셀) 입니다.</p>

<h4 id="상대_길이_단위">상대 길이 단위</h4>

<p>상대 길이 단위는 다른 요소 (상위 요소의 글꼴 크기 또는 viewport 크기) 와 관련이 있습니다. 상대 단위를 사용하면 텍스트나 다른 요소의 크기가 페이지의 다른 모든 것에 비례하여 조정되도록 신중하게 계획할 수 있다는 이점이 있습니다. 웹 개발에 가장 유용한 단위가 아래 표에 나열되어 있습니다.</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">단위</th>
   <th scope="col">관련 사항</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><code>em</code></td>
   <td>요소의 글꼴 크기.</td>
  </tr>
  <tr>
   <td><code>ex</code></td>
   <td>요소 글꼴의 x-height.</td>
  </tr>
  <tr>
   <td><code>ch</code></td>
   <td>요소 글꼴의 glyph "0" 의 사전 길이 (너비) 입니다.</td>
  </tr>
  <tr>
   <td><code>rem</code></td>
   <td>루트 요소의 글꼴 크기.</td>
  </tr>
  <tr>
   <td><code>lh</code></td>
   <td>요소의 라인 높이.</td>
  </tr>
  <tr>
   <td><code>vw</code></td>
   <td>viewport 너비의 1%.</td>
  </tr>
  <tr>
   <td><code>vh</code></td>
   <td>viewport 높이의 1%.</td>
  </tr>
  <tr>
   <td><code>vmin</code></td>
   <td>viewport 의 작은 치수의 1%.</td>
  </tr>
  <tr>
   <td><code>vmax</code></td>
   <td>viewport 의 큰 치수의 1%.</td>
  </tr>
 </tbody>
</table>

<h4 id="예제_살펴보기">예제 살펴보기</h4>

<p>아래 예에서 일부 상대 및 절대 길이 단위의 동작을 확인할 수 있습니다. 첫 번째 박스에는 {{cssxref("width")}} 픽셀 단위로 설정되어 있습니다. 절대 단위로서 이 너비는 다른 사항에 관계없이 동일하게 유지됩니다.</p>

<p>두 번째 박스의 너비는 <code>vw</code> (viewport 너비) 단위로 설정됩니다. 이 값은 viewport 너비를 기준으로 하므로, 10vw 는 viewport 너비의 10% 입니다. 브라우저 창의 너비를 변경하면, 박스의 크기가 변경되지만, 이 예제는 <code><a href="/en-US/docs/Web/HTML/Element/iframe">&lt;iframe&gt;</a></code> 을 사용하여 페이지에 포함되므로 작동하지 않습니다. 이 기능을 실제로 보려면 <a href="https://mdn.github.io/css-examples/learn/values-units/length.html">브라우저 탭에서 예제를 연 후 에 시도</a> 해야 합니다.</p>

<p>세 번째 박스는 <code>em</code> 단위를 사용합니다. 글꼴 크기에 상대적입니다. <code>.wrapper</code> class 를 포함하는 {{htmlelement("div")}} 를 포함하여 글꼴 크기를 <code>1em</code> 으로 설정했습니다. 이 값을 <code>1.5em</code> 으로 변경하면 모든 요소의 글꼴 크기가 증가하지만, 너비가 해당 글꼴 크기에 비례하므로 마지막 항목만 넓어집니다.</p>

<p>위의 지침을 따른 후 다른 방법으로 값을 실습하여 얻은 것을 확인하십시오.</p>

<p>{{EmbedGHLiveSample("css-examples/learn/values-units/length.html", '100%', 820)}}</p>

<h4 id="ems_및_rems">ems 및 rems</h4>

<p><code>em</code> 과 <code>rem</code> 은 박스에서 텍스트로 크기를 조정할 때 가장 자주 발생하는 두 개의 상대 길이입니다. <a href="/en-US/docs/Learn/CSS/Styling_text">텍스트 스타일링</a> 또는 <a href="/en-US/docs/Learn/CSS/CSS_layout">CSS 레이아웃</a> 과 같은 보다 복잡한 주제를 시작할 때, 이러한 작동 방식과 차이점을 이해하는 것이 좋습니다. 아래 예제는 데모를 제공합니다.</p>

<p>HTML 은 중첩된 목록의 집합니다 — 총 3개의 목록이 있으며 두 예제 모두 동일한 HTML 을 갖습니다. 유일한 차이점은 첫 번째는 <strong><em>ems</em></strong> class 이고 두 번째는 <strong><em>rems</em></strong> class 입니다.</p>

<p>먼저, <code>&lt;html&gt;</code> 요소에서 글꼴 크기로 16px 를 설정합니다.</p>

<p><strong>다시 말해서, em 단위는 "부모 요소의 글꼴 크기" 를 의미합니다</strong>. <code>ems</code> <code>class</code> 가 있는 {{htmlelement("ul")}} 내부의 {{htmlelement("li")}} 요소는 부모로부터 크기를 가져옵니다. 따라서 각 중첩 부분은 글꼴 크기가 부모 글꼴 크기의 <code>1.3em</code> — 1.3 배로 설정되므로 점점 더 커집니다.</p>

<p><strong>다시 말해서, rem 단위는 "루트 요소의 글꼴 크기" 를 의미합니다</strong>. ("root em" 의 rem 표준입니다.) <code>rems</code> <code>class</code> 가 있는 {{htmlelement("ul")}} 내부의 {{htmlelement("li")}} 요소는 루트 요소는 (<code>&lt;html&gt;</code>) 에서 크기를 가져옵니다. 이것은 각각의 연속적인 중첩 부분이 계속 커지는 것을 의미합니다.</p>

<p>그러나, CSS 에서 <code>&lt;html&gt;</code> <code>font-size</code> 를 변경하면 다른 모든 텍스트가 변경되는 것을 볼 수 있습니다 — <code>rem</code>- 및 <code>em</code>-크기 텍스트.</p>

<p>{{EmbedGHLiveSample("css-examples/learn/values-units/em-rem.html", '100%', 1000)}} </p>

<h3 id="백분율">백분율</h3>

<p>많은 경우 백분율은 길이와 같은 방식으로 처리됩니다. 백분율이 있는 것은 항상 다른 값에 상대적으로 설정된다는 것입니다. 예를 들어, 요소의 <code>font-size</code> 를 백분율로 설정하면요소 무보의 글꼴 크기에 대한 백분율이 됩니다. <code>width</code> 값에 백분율을 사용하면, 부모 너비의 백분율이 됩니다.</p>

<p>아래 예제에서 두 개의 백분율 크기 박스와 두 개의 픽셀 크기 박스는 동일한 class 이름을 갖습니다. 두 세트의 너비는 각각 200px 및 40% 입니다.</p>

<p>차이점은 두 박스의 두 번째 세트가 너비가 400 픽셀 안에 있다는 것입니다. 두 번째 200px 너비의 박스는 첫 번째 너비와 동일한 너비이지만, 두 번째 40% 박스는 이제 400px 의 40% 이므로 — 첫 번째 박스보다 훨씬 좁습니다!</p>

<p><strong>너비 또는 백분율 값을 변경하여 작동 방식을 확인합니다.</strong></p>

<p>{{EmbedGHLiveSample("css-examples/learn/values-units/percentage.html", '100%', 850)}} </p>

<p>다음 예제에서는 글꼴 크기가 백분율로 설정되어 있습니다. 각 <code>&lt;li&gt;</code> 의 <code>font-size</code> 는 80% 이므로, 중첩된 목록 항목은 부모로부터 크기를 상속함에 따라 점차 작아집니다.</p>

<p>{{EmbedGHLiveSample("css-examples/learn/values-units/percentage-fonts.html", '100%', 650)}} </p>

<p>많은 값이 길이 또는 백분율을 허용하지만, 길이만 허용하는 값도 있습니다. MDN 속성 참조 페이지에서 어떤 값이 허용되는지 확인할 수 있습니다. 허용된 값에 <code><a href="/en-US/docs/Web/CSS/length-percentage">&lt;length-percentage&gt;</a></code> 가 포함된 경우 길이 또는 백분율을 사용할 수 있습니다. 허용된 값에 <code>&lt;length&gt;</code> 만 포함된 경우, 백분율을 사용할 수 없습니다.</p>

<h3 id="숫자">숫자</h3>

<p>일부 값은 단위를 추가하지 않고 숫자를 허용합니다. 단위가 없는 숫자를 허용하는 속성의 예는 요소의 불투명도 (투명한 정도) 를 제어하는 <code>opacity</code> 속성입니다. 이 속성은 <code>0</code> (완전 투명) 과 <code>1</code> (완전 불투명) 사이의 숫자를 허용합니다.</p>

<p><strong>아래 예제에서, <code>opacity</code> 값을 <code>0</code> 과 <code>1</code> 사이의 다양한 10진수 값으로 변경하고 박스와 그 내용이 어떻게 붙투명하게 되는지 확인하십시오.</strong></p>

<p>{{EmbedGHLiveSample("css-examples/learn/values-units/opacity.html", '100%', 500)}} </p>

<div class="blockIndicator note">
<p><strong>참고</strong>: CSS 에서 숫자를 값으로 사용하는 경우 따옴표로 묶지 않아야합니다.</p>
</div>

<h2 id="색상">색상</h2>

<p>CSS 에서 색상을 지정하는 방법은 여러가지가 있으며, 그 중 일부는 다른것 보다 최근에 구현되었습니다. 텍스트 색상, 배경 색상 등을 지정하든 상관없이 CSS 의 모든 위치에서 동일한 색상 값을 사용할 수 있습니다.</p>

<p>최신 컴퓨터에서 사용할 수 있는 표준 색상 시스템은 24bit 이며, 채널당 256개의 서로 다른 값 (256 x 256 x 256 = 16,777,216.) 을 갖는 서로 다른 빨강, 녹색 및 파랑 채널의 조합을 통해 약 1670만개의  고유한 색상을 표시할 수 있습니다. CSS 에서 색상을 지정할 수 있는 몇 가지 방법을 살펴보겠습니다.</p>

<div class="blockIndicator note">
<p><strong>참고</strong>: 이 자습서에서는 브라우저 지원 기능이 우수한 색상을 지정하는 일반적인 방법을 살펴봅니다. 다른 것도 있지만, 지원 기능이 뛰어나지 않고 덜 일반적입니다.</p>
</div>

<h3 id="색상_키워드">색상 키워드</h3>

<p>여기의 학습 섹션이나 MDN 의 다른 예에서 색상 키워드를 지정하는 간단하고 이해하기 쉬운 방법인 색상 키워드를 볼 수 있습니다. 이 키워드에는 여러가지가 있으며 그중 일부는 상당히 재미있는 이름을 가지고 있습니다! <code><a href="/en-US/docs/Web/CSS/color_value">&lt;color&gt;</a></code> 값에 대한 전체 목록을 페이지에서 볼 수 있습니다.</p>

<p><strong>아래의 라이브 예제에서 다른 색상 값을 사용하여 작동하는 방법에 대한 아이디어를 얻으십시오.</strong></p>

<h3 id="16진수_RGB_값">16진수 RGB 값</h3>

<p>다음 형식의 색상 값은 16진수 코드입니다. 각 16진수 값은 hash/pound 기호 (#) 와 6개의 16진수로 구성되며, 각 16진수는 0 과 f (15를 나타냄) 사이의 16개 값 중 하나를 사용할 수 있으므로 — <code>0123456789abcdef</code> 입니다. 각 값 쌍은 채널 중 하나 — 빨강, 녹색 및 파랑 — 을 나타내며 각각에 대해 256개의 사용 가능한 값 (16 x 16 = 256) 을 지정할 수 있습니다.</p>

<p>이 값은 좀 더 복잡하고 이해하기 쉽지 않지만 기워드보다 훨씬 더 다양합니다 — 16진수 값을 사용하여 색상표에 사용하려는 색상을 나타낼 수 있습니다.</p>

<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-hex.html", '100%', 700)}} </p>

<p><strong>다시 한 번, 값을 변경하여 색상이 어떻게 다른지 확인하십시오. </strong></p>

<h3 id="RGB_및_RGBA_값">RGB 및 RGBA 값</h3>

<p>여기서 이야기 할 세 번째 방식은 RGB 입니다. RGB 값은 — <code>rgb()</code> 함수입니다 — 이 값은 16진수 값과 거의 같은 방식으로 색상의 빨강, 녹색 및 파랑 채널 값을 나타내는 세 개의 매개 변수가 제공됩니다. RGB 와의 차이점은 각 채널이 2개의 16진수가 아니라 0 과 255 사이의 10진수로 표현되어 — 다소 이해하기 쉽다는 것입니다.</p>

<p>Let's rewrite our last example to use RGB colors:</p>

<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-rgb.html", '100%', 700)}} </p>

<p>RGBA 색상을 사용할 수도 있습니다 — 이 색상은 RGB 색상과 정확히 같은 방식으로 작동하므로 RGB 값을 사용할 수 있지만, 색상의 알파 채널을 나타내는 네 번째 값이 있어 불투명도 (opacity) 를 제어합니다. 이 값을 <code>0</code> 으로 설정하면 색상이 완전히 투명해지는 반면, <code>1</code> 이면 완전히 불투명하게 됩니다. 그 사이의 값은 다른 수준의 투명성을 제공합니다.</p>

<div class="blockIndicator note">
<p><strong>참고</strong>: 색상에 알파 채널을 설정하면 앞에서 살펴본 {{cssxref("opacity")}} 속성을 사용하는 것과 한 가지 중요한 차이점이 있습니다. 불투명도를 사용하면 요소와 그 안에 있는 모든 것을 불투명하게 만드는 반면, RGBA 색상을 사용하면 불투명하게 지정한 색상만 만들어집니다.</p>
</div>

<p>아래 예제에서 나는 색상 박스가 포함된 블록에 배경 이미지를 추가했습니다. 그런 다음 박스에 다른 불투명도 값을 갖도록 설정했습니다 — 알파 채널 값이 작을 때 배경이 더 잘 나타나는지 확인하십시오.</p>

<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-rgba.html", '100%', 770)}}</p>

<p><strong>이 예에서는, 알파 채널 값을 변경하여 색상 출력에 어떤 영향을 미치는지 확인하십시오. </strong></p>

<div class="blockIndicator note">
<p><strong>참고</strong>: 어떤 시점에서 최신 브라우저는 <code>rgba()</code> 와 <code>rgb()</code> 및 <code>hsl()</code> 과 <code>hsla()</code> (아래 참조) 가 서로의 순수 별칭이 되어 정확히 동일한 동작을 시작하도록 업데이트 되었습니다. 예를 들어<code>rgba()</code> 및 <code>rgb()</code> 는 모두 알파 채널 값이 있거나 없는 색상을 허용합니다. 위 예제의 <code>rgba()</code> 함수를 <code>rgb()</code> 로 변경하고 색상이 여전히 작동하는지 확인하십시오! 어떤 스타일을 사용하느냐에 따라 다르지만, 다른 기능을 사용하기 위해 불투명과 투명한 색상 정의를 분리하면 브라우저 지원이 약간 향상되고 코드에서 투명 색상이 정의되는 위치를 시각적으로 표시할 수 있습니다.</p>
</div>

<h3 id="HSL_및_HSLA_값">HSL 및 HSLA 값</h3>

<p>RGB 보다 약간 덜 지원되는 HSL 색상은 (이전 버전의 IE 에서는 지원되지 않음) 디자이너의 관심을 끈 후에 구현되었습니다. <code>hsl()</code> 함수는 빨강, 녹색 및 파랑 값 대신 색조 (hue), 채도 (saturation) 및 명도(lightness) 값을 받아들입니다. 이 값은 1670만 가지 색상을 구별하는 데 사용되지만 다른 방식으로 사용됩니다.</p>

<ul>
 <li><strong>색조 (Hue)</strong>: 색상의 기본 음영입니다. 0 에서 360 사이의 값을 사용합니다.</li>
 <li><strong>채도 (Saturation)</strong>: 색상이 얼마나 포함되어 있습니까? 0–100% 사이의 값을 취합니다. 여기서 0은 색상이 없고 (회색 음영으로 표시됨), 100% 는 전체 색상 채도입니다.</li>
 <li><strong>명도 (Lightness)</strong>: 색상이 얼마나 밝습니까? 0–100% 의 값을 받습니다. 여기서 0은 빛이 없고 (완전히 검은색으로 표시됨), 100% 는 완전한 빛 (완전히 흰색으로 표시됨) 입니다.</li>
</ul>

<p>다음과 같이 HSL 색상을 사용하도록 RGB 예제를 업데이트 할 수 있습니다:</p>

<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-hsl.html", '100%', 700)}} </p>

<p>RGB 에 RGBA 가 있는 것처럼, HSL 에는 HSLA 에 상응하는 것이 있으므로, 알파 채널을 지정할 수 있는 동일한 기능을 제공합니다. HSLA 색상을 사용하도록 RGBA 예제를 변경하여 아래에서 이것을 시연했습니다.</p>

<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-hsla.html", '100%', 770)}} </p>

<p>여러분의 프로젝트에서 이러한 색상 값을 사용할 수 있습니다. 대부분의 프로젝트에서 색상 팔레트를 결정한 다음 전체 프로젝트에서 해당 색상 — 선택한 색상 지정 방법 — 을 사용합니다. 색상 모델을 혼합하고 일치시킬 수 있지만, 일관성을 유지하려면 전체 프로젝트에서 동일한 모델을 사용하는 것이 가장 좋습니다!</p>

<h2 id="이미지">이미지</h2>

<p><code><a href="/en-US/docs/Web/CSS/image">&lt;image&gt;</a></code> 데이터 형식은 이미지가 유효한 값인 경우 사용됩니다. 이것은 <code>url()</code> 함수 또는 gradient 를 통해 가리키는 실제 이미지 파일일 수 있습니다.</p>

<p>아래 예제에서 CSS <code>background-image</code> 속성의 값으로 사용되는 이미지와 gradient 를 보여주었습니다.</p>

<p>{{EmbedGHLiveSample("css-examples/learn/values-units/image.html", '100%', 740)}} </p>

<div class="blockIndicator note">
<p><strong>참고</strong>: <code>&lt;image&gt;</code> 에 대해 가능한 다른 값이 있지만 이 값은 최신이며 최신 브라우저 지원이 좋지 않습니다. &lt;image&gt; 데이터 형식을 읽으려면 MDN 페이지에서 <code><a href="/en-US/docs/Web/CSS/image">&lt;image&gt;</a></code> 데이터 형식을 확인하십시오.</p>
</div>

<h2 id="위치_Position">위치 (Position)</h2>

<p><code><a href="/en-US/docs/Web/CSS/position_value">&lt;position&gt;</a></code> 데이터 형식은 배경 이미지 (<code><a href="/en-US/docs/Web/CSS/background-position">background-position</a></code> 를 통해) 와 같은 항목을 배치하는 데 사용되는 2D 좌표를 나타냅니다. <code>top</code>, <code>left</code>, <code>bottom</code>, <code>right</code> 및 <code>center</code> 와 같은 키워드를 사용하여 항목을 2D 박스의 특정 범위에 맞춰 길이와 함께 박스의 위쪽 및 왼쪽 가장자리에서 offset 을 나타냅니다.</p>

<p>일반적인 position 값은 두 가지 값으로 구성됩니다 — 첫 번째는 위치를 가로로 설정하고, 두 번째는 세로로 설정합니다. 한 축의 값만 지정하면 다른 축은 <code>center</code> 으로 설정됩니다.</p>

<p>다음 예제에서는 키워드를 사용하여 container 의 위쪽과 오른쪽에서 40px 의 배경 이미지를 배치했습니다.</p>

<p>{{EmbedGHLiveSample("css-examples/learn/values-units/position.html", '100%', 720)}} </p>

<p><strong>이 값을 가지고 놀면서 이미지를 어떻게 밀어낼 수 있는지 확인하십시오.</strong></p>

<h2 id="문자열_및_식별자_identifiers">문자열 및 식별자 (identifiers)</h2>

<p>위의 예에서, 키워드가 값으로 (예: <code>red</code>, <code>black</code>, <code>rebeccapurple</code> 및 <code>goldenrod</code>, 와 같은 <code>&lt;color&gt;</code> 키워드) 사용되는 위치를 확인했습니다. 이러한 키워드는 CSS 가 이해하는 특수한 값인 <strong><em>식별자 (identifiers) </em></strong>로, 보다 정확하게 설명됩니다. 따라서 인용되지 않으며 — 문자열로 취급되지 않습니다.</p>

<p>CSS 에서 문자열을 사용하는 장소가 있습니다. 예를 들면, <a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements#Generating_content_with_before_and_after">생성된 콘텐츠를 지정할 때</a>. 이 경우 값은 문자열임을 보여주기 위해 인용됩니다. 아래 예제에서는 인용되지 않은 색상 키워드와 인용된 생성된 콘텐츠 문자열을 사용합니다.</p>

<p>{{EmbedGHLiveSample("css-examples/learn/values-units/strings-idents.html", '100%', 550)}} </p>

<h2 id="함수_Functions">함수 (Functions)</h2>

<p>우리가 살펴볼 마지막 값의 형식은 함수로 알려진 값의 그룹입니다. 프로그래밍에서 함수는 개발자와 컴퓨터 모두에서 최소한의 노력으로 반복적인 작업을 완료하기 위해 여러번 실행할 수 있는 재사용 가능한 코드 섹션입니다. 함수는 일반적으로 JavaScript, Python 또는 C++ 과 같은 언어와 관련이 있지만, 속성 값으로 CSS 에도 존재합니다 — <code>rgb()</code>, <code>hsl()</code> 등의 색상 섹션에서 작동하는 함수를 이미 보았습니다. 파일에서 이미지를 반환하는 데 사용되는 값인 — <code>url()</code> — 도 함수입니다.</p>

<p>전통적인 프로그래밍 언어에서 찾아볼 수 있는 것과 비슷한 값은 <code>calc()</code> CSS 함수입니다. 이 함수를 사요하면 CSS 내에서 간단한 계산을 수행할 수 있습니다. 프로젝트의 CSS 를 작성할 때 정의할 수 없는 값을 계산하고 런타임에 브라우저가 작동해야하는 경우 특히 유용합니다.</p>

<p>예를 들어, 아래에서는 <code>calc()</code> 를 사용하여 박스를 <code>20% + 100px</code> 너비로 만듭니다. 20% 는 부모 container <code>.wrapper</code> 의 너비에서 계산되므로 너비가 변경되면 변경됩니다. 우리는 부모 요소의 20% 가 무엇인지 알지 못하기 때문에, 이 계산을 미리 수행할 수 없으므로 <code>calc()</code> 를 사용하여 브라우저에 지시합니다.</p>

<p>{{EmbedGHLiveSample("css-examples/learn/values-units/calc.html", '100%', 450)}}</p>

<h2 id="요약">요약</h2>

<p>이것은 가장 일반적인 형식의 값과 단위를 빠르게 살펴 보았습니다. <a href="/en-US/docs/Web/CSS/CSS_Values_and_Units">CSS 값 및 단위</a> 참조 페이지에서 다양한 유형을 모두 볼 수 있습니다. 이 수업을 진행하면서 사용중인 많은 것들을 보게 될 것입니다.</p>

<p>기억해야 할 중요한 점은 각 속성에 정의된 값 목록이 있고 각 값에는 하위 값이 무엇인지 설명하는 정의가 있다는 것입니다. 그런 다음 MDN 에서 세부 사항을 찾을 수 있습니다.</p>

<p>예를 들어, <code><a href="/en-US/docs/Web/CSS/image">&lt;image&gt;</a></code> 를 사용하면 색상 gradient 를 만들 수 있다는 점을 이해하면 유용하지만 명백하지 않은 지식이 있을 수 있습니다!</p>

<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks")}}</p>

<h2 id="이번_강의에서는">이번 강의에서는</h2>

<ol>
 <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">계단식 및 상속</a></li>
 <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS 선택자</a>
  <ul>
   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class 및 ID 선택자</a></li>
   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">속성 선택자</a></li>
   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes 및 pseudo-elements</a></li>
   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">결합자</a></li>
  </ul>
 </li>
 <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">박스 모델</a></li>
 <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">배경 및 테두리</a></li>
 <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">다른 텍스트 방향 처리</a></li>
 <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">콘텐츠 overflow</a></li>
 <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">값 과 단위</a></li>
 <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS 에서 항목 크기 조정</a></li>
 <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">이미지, 미디어 및 양식 요소</a></li>
 <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">표 스타일링</a></li>
 <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS 디버깅</a></li>
 <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">CSS 정리</a></li>
</ol>