path: root/files/ko/web/css/value_definition_syntax/index.html

---
title: 값 정의 구문
slug: Web/CSS/Value_definition_syntax
tags:
  - CSS
  - Guide
  - Reference
  - Syntax
  - 구문
  - 문법
translation_of: Web/CSS/Value_definition_syntax
---
<div>{{CSSRef}}</div>

<p><span class="seoSummary"><strong>CSS 값 정의 구문</strong>은 <a href="https://ko.wikipedia.org/wiki/%ED%98%95%EC%8B%9D_%EB%AC%B8%EB%B2%95">형식 문법</a>으로서 CSS 속성이나 함수가 받을 수 있는 유효한 값의 집합을 정의합니다.</span> 유효한 값 집합은 정의 구문으로 인한 제한 외에도 반드시 양의 수가 와야 하는 등, 맥락에 따라 추가로 제한될 수 있습니다.</p>

<p>정의 구문은 허용하는 값과 그 값 사이의 상호 작용을 설명합니다. "키워드", 일부 문자 "리터럴", 주어진 CSS 자료형에 속하는 값이거나, 다른 CSS 속성이 구문의 구성 요소가 될 수 있습니다.</p>

<h2 id="구성_요소_값_유형">구성 요소 값 유형</h2>

<h3 id="키워드">키워드</h3>

<h4 id="일반_키워드">일반 키워드</h4>

<p>사전 정의된 의미가 있는 키워드는 따옴표 없이 문자 그대로 나타납니다. 예시로는 <code>auto</code>, <code>smaller</code>, <code>ease-in</code>이 있습니다.</p>

<h4 id="특별_키워드_inherit_initial_unset">특별 키워드: <code>inherit</code>, <code>initial</code>, <code>unset</code></h4>

<p>모든 CSS 속성은 전역으로 정의한 <code>inherit</code>, <code>initial</code>, <code>unset</code> 키워드를 허용합니다. 세 키워드는 값 정의에 나타나지 않으며 암시적으로 정의됩니다.</p>

<h3 id="리터럴">리터럴</h3>

<p>CSS에서 빗금('<code>/</code>')과 쉼표('<code>,</code>')와 같은 일부 문자는 그대로 나타날 수 있고, 속성 정의에서 값 구분을 위해 사용합니다. 쉼표는 종종 열거하는 값이나 수학형 함수의 매개변수를 구분할 때 사용합니다. 빗금은 의미가 다르지만 구문이 같은 값을 분리할 때 종종 사용합니다. 보통 빗금은 단축 속성에서 자료형이 같은 서로 다른 속성의 값을 구분할 때 쓰입니다.</p>

<p>두 기호 모두 값 정의에 문자 그대로 나타납니다.</p>

<h3 id="자료형">자료형</h3>

<h4 id="기본_자료형">기본 자료형</h4>

<p>어떤 종류의 데이터는 CSS의 전반에서 사용하며, 명세의 모든 값에 대해 한 번만 정의합니다. 이런 데이터의 자료형을 "기본 자료형"이라고 부르며, {{CSSxRef("&lt;angle&gt;")}}과 {{CSSxRef("&lt;string&gt;")}}처럼 이름을 '<code>&lt;</code>'와 '<code>&gt;</code>' 기호로 감싸서 표현합니다.</p>

<h4 id="비_말단_자료형">비 말단 자료형</h4>

<p>보다 덜 흔한 자료형인 "비 말단 자료형" 역시 '<code>&lt;</code>'와 '<code>&gt;</code>'로 감쌉니다.</p>

<p>비 말단 자료형에는 두 종류가 존재합니다.</p>

<ul>
 <li><u>어떤 속성과 같은 이름을 공유하는</u> 자료형으로, 이름을 따옴표로 감싸는 경우. 이 자료형의 값은 해당 속성이 허용하는 값과 동일합니다. 많은 경우 단축 속성에서 사용합니다.</li>
 <li><u>다른 속성과 이름을 공유하지 않는</u> 자료형. 기본 자료형과 매우 유사하며, 차이점은 이 자료형의 정의가 어디에 되어있나 정도입니다. 기본 자료형과는 달리, 보통 이 자료형을 사용하는 속성과 가까운 곳에서 정의합니다.</li>
</ul>

<h2 id="구성_요소_값_결합자">구성 요소 값 결합자</h2>

<h3 id="대괄호"><a id="Brackets" name="Brackets">대괄호</a></h3>

<p><u>대괄호</u>는 다수의 개체, 결합자, 곱수를 감싸서 하나의 구성 요소로 변환합니다. 대괄호는 <strong>구성 요소를 묶어서 우선순위 규칙을 우회</strong>할 때 사용합니다.</p>

<pre class="syntaxbox notranslate">bold [ thin &amp;&amp; &lt;length&gt; ]</pre>

<p>위의 예제는 다음의 값과 일치합니다.</p>

<ul>
 <li><code>bold thin 2vh</code></li>
 <li><code>bold 0 thin</code></li>
 <li><code>bold thin 3.5em</code></li>
</ul>

<p>하지만 다음과는 일치하지 않습니다.</p>

<ul>
 <li><code>thin bold 3em</code>. <code>bold</code>를 대괄호로 정의한 구성 요소와 병치했기 때문에 반드시 그 앞에 나타나야 합니다.</li>
</ul>

<h3 id="병치"><a id="Juxtaposition" name="Juxtaposition">병치</a></h3>

<p>여러 단어, 리터럴, 자료형을 한 개 이상의 공백으로만 구분해서 나란히 배치하는 것을 <u>병치</u>라고 합니다. 병치한 모든 구성 요소는 <strong>필수이며 정확히 순서 그대로 나타나야 합니다</strong>.</p>

<pre class="syntaxbox notranslate">bold &lt;length&gt; , thin
</pre>

<p>위의 예제는 다음의 값과 일치합니다.</p>

<ul>
 <li><code>bold 1em, thin</code></li>
 <li><code>bold 0, thin</code></li>
 <li><code>bold 2.5cm, thin</code></li>
 <li><code>bold 3vh, thin</code></li>
</ul>

<p>하지만 다음과는 일치하지 않습니다.</p>

<ul>
 <li><code>thin 1em, bold</code>. 모든 개체가 정확한 순서를 따라야 합니다.</li>
 <li><code>bold 1em thin</code>. 모든 개체가 필수이므로, 리터럴로 표기한 쉼표 역시 존재해야 합니다.</li>
 <li><code>bold 0.5ms, thin</code>. <code>ms</code> 값은 {{CSSxRef("&lt;length&gt;")}}가 아닙니다.</li>
</ul>

<h3 id="이중_앰퍼샌드"><a id="Double_ampersand" name="Double_ampersand">이중 앰퍼샌드</a></h3>

<p>두 개 이상의 구성 요소를 <u>이중 앰퍼샌드</u>, <code>&amp;&amp;</code>로 구분하면 모든 개체가 <strong>필수지만 순서는 상관 없음</strong>을 의미합니다.</p>

<pre class="syntaxbox notranslate">bold &amp;&amp; &lt;length&gt;
</pre>

<p>위의 예제는 다음의 값과 일치합니다.</p>

<ul>
 <li><code>bold 1em</code></li>
 <li><code>bold 0</code></li>
 <li><code>2.5cm bold</code></li>
 <li><code>3vh bold</code></li>
</ul>

<p>하지만 다음과는 일치하지 않습니다.</p>

<ul>
 <li><code>bold</code>. 두 구성 요소가 값에 모두 나타나야 합니다.</li>
 <li><code>bold 1em bold</code>, 두 구성 요소는 한 번씩만 나타나야 합니다.</li>
</ul>

<div class="blockIndicator note">
<p><strong>참고:</strong> 병치는 이중 앰퍼샌드보다 우선순위가 높습니다. 즉 <code>bold thin &amp;&amp; &lt;length&gt;</code>는 <code>[ bold thin ] &amp;&amp; &lt;length&gt;</code>와 같습니다. 따라서 <code>bold thin &lt;length&gt;</code>와 <code>&lt;length&gt; bold thin</code>은 일치하지만 <code>bold &lt;length&gt; thin</code>은 일치하지 않습니다.</p>
</div>

<h3 id="이중_바"><a id="Double_bar" name="Double_bar">이중 바</a></h3>

<p>두 개 이상의 구성 요소를 <u>이중 바</u>, <code>||</code>로 구분하면 모든 개체 중 <strong>적어도 하나는 나타나야 하고 순서는 상관하지 않습니다</strong>. 보통 <a href="/ko/docs/Web/CSS/Shorthand_properties">단축 속성</a>의 여러 값을 정의할 때 사용합니다.</p>

<pre class="syntaxbox notranslate">&lt;'border-width'&gt; || &lt;'border-style'&gt; || &lt;'border-color'&gt;
</pre>

<p>위의 예제는 다음의 값과 일치합니다.</p>

<ul>
 <li><code>1em solid blue</code></li>
 <li><code>blue 1em</code></li>
 <li><code>solid 1px yellow</code></li>
</ul>

<p>하지만 다음과는 일치하지 않습니다.</p>

<ul>
 <li><code>blue yellow</code>, 하나의 구성 요소는 한 번만 나타나야 합니다.</li>
 <li><code>bold</code>, 이 키워드는 어느 개체에도 속하지 않는 값입니다.</li>
</ul>

<div class="blockIndicator note">
<p><strong>참고:</strong> 이중 앰퍼샌드는 이중 바보다 우선순위가 높습니다. <code>bold || thin &amp;&amp; &lt;length&gt;</code>는 <code>bold || [ thin &amp;&amp; &lt;length&gt; ]</code>와 같으며, <code>bold</code>, <code>thin &lt;length&gt;</code>, <code>bold thin &lt;length&gt;</code>, 그리고 <code>thin &lt;length&gt; bold</code>와 일치합니다. 하지만 <code>&lt;length&gt; bold thin</code>은 일치하지 않는데, <code>bold</code>를 생략하지 않으면 <code>thin &amp;&amp; &lt;length&gt;</code> 구성 요소 이전 또는 다음에 위치해야 하기 때문입니다.</p>
</div>

<h3 id="단일_바"><a id="Single_bar" name="Single_bar">단일 바</a></h3>

<p>두 개 이상의 개체를 <u>단일 바</u>, <code>|</code>로 구분하면 모든 개체 중에서 <strong>한 개만이 반드시 존재해야 합니다</strong>. 보통 가능한 키워드 값의 목록을 구성할 때 사용합니다.</p>

<pre class="syntaxbox notranslate">&lt;percentage&gt; | &lt;length&gt; | left | center | right | top | bottom</pre>

<p>위의 예제는 다음의 값과 일치합니다.</p>

<ul>
 <li><code>3%</code></li>
 <li><code>0</code></li>
 <li><code>3.5em</code></li>
 <li><code>left</code></li>
 <li><code>center</code></li>
 <li><code>right</code></li>
 <li><code>top</code></li>
 <li><code>bottom</code></li>
</ul>

<p>하지만 다음과는 일치하지 않습니다.</p>

<ul>
 <li><code>center 3%</code>, 오직 하나의 구성 요소만 나타나야 합니다.</li>
 <li><code>3em 4.5em</code>, 구성 요소는 한 번만 나타나야 합니다.</li>
</ul>

<div class="blockIndicator note">
<p><strong>참고:</strong> 이중 바는 단일 바보다 우선순위가 높으며 <code>bold | thin || &lt;length&gt;</code>는 <code>bold | [ thin || &lt;length&gt; ]</code>와 같습니다. <code>bold</code>, <code>thin</code>, <code>&lt;length&gt;</code>, <code>&lt;length&gt; thin</code>, <code>thin &lt;length&gt;</code>는 일치하지만, <code>|</code> 결합자는 좌우 중 단 하나만 선택할 수 있기 때문에 <code>bold &lt;length&gt;</code>는 일치하지 않습니다.</p>
</div>

<h2 id="구성_요소_값_배수">구성 요소 값 배수</h2>

<p>배수는 기호로서, 앞의 개체를 몇 번이나 반복할 수 있는지 표시합니다. 배수가 없는 개체는 반드시 단 한 번만 나타나야 합니다.</p>

<p>배수는 거듭 표시할 수 없고, 모든 결합자보다 우선순위가 높습니다.</p>

<h3 id="Asterisk" name="Asterisk"><a id="Asterisk_(*)" name="Asterisk_(*)">별표 (<code>*</code>)</a></h3>

<p><u>별표 배수</u>는 개체가 <strong>0번, 한 번, 또는 여러 번 나타날 수 있음</strong>을 표시합니다.</p>

<pre class="syntaxbox notranslate">bold smaller*</pre>

<p>위의 예제는 다음의 값과 일치합니다.</p>

<ul>
 <li><code>bold</code></li>
 <li><code>bold smaller</code></li>
 <li><code>bold smaller smaller</code></li>
 <li><code>bold smaller smaller smaller</code> 등등.</li>
</ul>

<p>하지만 다음과는 일치하지 않습니다.</p>

<ul>
 <li><code>smaller</code>, <code>bold</code>는 병치이기 때문에 <code>smaller</code> 키워드 앞에 반드시 나타나야 합니다.</li>
</ul>

<h3 id="Plus" name="Plus"><a id="Plus_()" name="Plus_()">더하기 (<code>+</code>)</a></h3>

<p><u>더하기 배수</u>는 개체가 <strong>한 번 또는 여러 번 나타날 수 있음</strong>을 표시합니다.</p>

<pre class="syntaxbox notranslate">bold smaller+</pre>

<p>위의 예제는 다음의 값과 일치합니다.</p>

<ul>
 <li><code>bold smaller</code></li>
 <li><code>bold smaller smaller</code></li>
 <li><code>bold smaller smaller smaller</code> 등등.</li>
</ul>

<p>하지만 다음과는 일치하지 않습니다.</p>

<ul>
 <li><code>bold</code>, <code>smaller</code>는 적어도 한 번 나타나야 합니다.</li>
 <li><code>smaller</code>, <code>bold</code>는 병치이기 때문에 <code>smaller</code> 키워드 앞에 반드시 나타나야 합니다.</li>
</ul>

<h3 id="Question_mark" name="Question_mark"><a id="Question_mark_()" name="Question_mark_()">물음표 (<code>?</code>)</a></h3>

<p><u>물음표 배수</u>는 개체가 선택 사항이며, <strong>반드시 0번 또는 한 번만 나타나야 함</strong>을 표시합니다.</p>

<pre class="syntaxbox notranslate">bold smaller?</pre>

<p>위의 예제는 다음의 값과 일치합니다.</p>

<ul>
 <li><code>bold</code></li>
 <li><code>bold smaller</code></li>
</ul>

<p>하지만 다음과는 일치하지 않습니다.</p>

<ul>
 <li><code>bold smaller smaller</code>, <code>smaller</code>는 최대 한 번만 나타나야 합니다.</li>
 <li><code>smaller</code>, <code>bold</code>는 병치이기 때문에 <code>smaller</code> 키워드 앞에 반드시 나타나야 합니다.</li>
</ul>

<h3 id="Curly_braces" name="Curly_braces"><a id="Curly_braces_(_)" name="Curly_braces_(_)">중괄호 (<code>{ }</code>)</a></h3>

<p><u>중괄호 배수</u>는 쉼표로 구분한 두 개의 정수, A와 B를 포함하며 개체가 <strong>최소 A번, 최대 B번 나타나야 함</strong>을 표시합니다.</p>

<pre class="syntaxbox notranslate">bold smaller{1,3}</pre>

<p>위의 예제는 다음의 값과 일치합니다.</p>

<ul>
 <li><code>bold smaller</code></li>
 <li><code>bold smaller smaller</code></li>
 <li><code>bold smaller smaller smaller</code></li>
</ul>

<p>하지만 다음과는 일치하지 않습니다.</p>

<ul>
 <li><code>bold</code>, <code>smaller</code>는 적어도 한 번 나타나야 합니다.</li>
 <li><code>bold smaller smaller smaller smaller</code>, <code>smaller</code>는 최대 3회까지만 나타나야 합니다.</li>
 <li><code>smaller</code>, <code>bold</code>는 병치이기 때문에 <code>smaller</code> 키워드 앞에 반드시 나타나야 합니다.</li>
</ul>

<h3 id="Hash_mark" name="Hash_mark"><a id="Hash_mark_()" name="Hash_mark_()">해시 (<code>#</code>)</a></h3>

<p><u>해시 배수</u>는 (더하기 배수처럼) 개체가 한 번 또는 여러 번 나타날 수 있지만, 서로 쉼표로 구분해야 함을 표시합니다.</p>

<pre class="syntaxbox notranslate">bold smaller#</pre>

<p>위의 예제는 다음의 값과 일치합니다.</p>

<ul>
 <li><code>bold smaller</code></li>
 <li><code>bold smaller, smaller</code></li>
 <li><code>bold smaller, smaller, smaller</code>, 등등.</li>
</ul>

<p>하지만 다음과는 일치하지 않습니다.</p>

<ul>
 <li><code>bold</code>, <code>smaller</code>는 적어도 한 번 나타나야 합니다.</li>
 <li><code>bold smaller smaller smaller</code>, 각각의 <code>smaller</code>를 쉼표로 구분해야 합니다.</li>
 <li><code>smaller</code>, <code>bold</code>는 병치이기 때문에 <code>smaller</code> 키워드 앞에 반드시 나타나야 합니다.</li>
</ul>

<h3 id="Exclamation_point" name="Exclamation_point"><a id="Exclamation_point_(!)" name="Exclamation_point_(!)">느낌표 (<code>!</code>)</a></h3>

<p>그룹 뒤에 표시하는 <u>느낌표 배수</u>는 그룹이 반드시 존재해야 하며, 그룹 내 항목의 문법으로 인해 전체 콘텐츠가 생략 가능한 형태더라도 최소한 하나의 값은 생성해내야 함을 나타냅니다.</p>

<pre class="syntaxbox notranslate">[ bold? smaller? ]!
</pre>

<p>위의 예제는 다음의 값과 일치합니다.</p>

<ul>
 <li><code>bold</code></li>
 <li><code>smaller</code></li>
 <li><code>bold smaller</code></li>
</ul>

<p>하지만 다음과는 일치하지 않습니다.</p>

<ul>
 <li><code>bold</code>도 없고 <code>smaller</code>도 없는 경우, 적어도 하나의 값은 나타나야 합니다.</li>
 <li><code>smaller</code>, <code>bold</code>는 병치이기 때문에 <code>smaller</code> 키워드 앞에 반드시 나타나야 합니다.</li>
 <li><code>bold smaller bold</code>, <code>bold</code>와 <code>smaller</code>는 단 한 번만 나타나야 합니다.</li>
</ul>

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

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">기호</th>
   <th scope="col">이름</th>
   <th scope="col">설명</th>
   <th scope="col">예제</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th colspan="4">결합자</th>
  </tr>
  <tr>
   <td></td>
   <td>병치</td>
   <td>구성 요소가 필수이고 순서에 따라 나타나야 함</td>
   <td><code>solid &lt;length&gt;</code></td>
  </tr>
  <tr>
   <td><code>&amp;&amp;</code></td>
   <td>이중 앰퍼샌드</td>
   <td>구성 요소가 필수이지만 순서에 무관함</td>
   <td><code>&lt;length&gt; &amp;&amp; &lt;string&gt;</code></td>
  </tr>
  <tr>
   <td><code>||</code></td>
   <td>이중 바</td>
   <td>구성 요소가 하나 이상 나타나야 하고 순서에 무관함</td>
   <td><code>&lt;'border-image-outset'&gt; || &lt;'border-image-slice'&gt;</code></td>
  </tr>
  <tr>
   <td><code>|</code></td>
   <td>단일 바</td>
   <td>구성 요소가 정확히 하나만 나타나야 함</td>
   <td><code>smaller | small | normal | big | bigger</code></td>
  </tr>
  <tr>
   <td><code>[ ]</code></td>
   <td>대괄호</td>
   <td>우선순위를 우회하기 위해 구성 요소를 묶음</td>
   <td><code>bold [ thin &amp;&amp; &lt;length&gt; ]</code></td>
  </tr>
  <tr>
   <th colspan="4">배수</th>
  </tr>
  <tr>
   <td></td>
   <td>배수 없음</td>
   <td>정확히 한 번</td>
   <td><code>solid</code></td>
  </tr>
  <tr>
   <td><code>*</code></td>
   <td>별표</td>
   <td>0회 이상</td>
   <td><code>bold smaller*</code></td>
  </tr>
  <tr>
   <td><code>+</code></td>
   <td>더하기</td>
   <td>1회 이상</td>
   <td><code>bold smaller+</code></td>
  </tr>
  <tr>
   <td><code>?</code></td>
   <td>물음표</td>
   <td>0회 또는 1회 (선택 사항)</td>
   <td><code>bold smaller?</code></td>
  </tr>
  <tr>
   <td><code>{A,B}</code></td>
   <td>중괄호</td>
   <td>최소 <code>A</code>회, 최대 <code>B</code>회</td>
   <td><code>bold smaller{1,3}</code></td>
  </tr>
  <tr>
   <td><code>#</code></td>
   <td>해시</td>
   <td>1회 이상, 단 쉼표로 구분</td>
   <td><code>bold smaller#</code></td>
  </tr>
  <tr>
   <td><code>!</code></td>
   <td>느낌표</td>
   <td>그룹이 적어도 하나의 값을 생성해야 함</td>
   <td><code>[ bold? smaller? ]!</code></td>
  </tr>
 </tbody>
</table>

<h2 id="명세">명세</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
  <tr>
   <td>{{SpecName("CSS3 Values", "#value-defs", "Value definition syntax")}}</td>
   <td>{{Spec2("CSS3 Values")}}</td>
   <td>Adds the hash mark multiplier.</td>
  </tr>
  <tr>
   <td>{{SpecName("CSS2.1", "about.html#value-defs", "Value definition syntax")}}</td>
   <td>{{Spec2("CSS2.1")}}</td>
   <td>Adds the double ampersand combinator.</td>
  </tr>
  <tr>
   <td>{{SpecName("CSS1", "#notation-for-property-values", "Value definition syntax")}}</td>
   <td>{{Spec2("CSS1")}}</td>
   <td>Initial definition</td>
  </tr>
 </tbody>
</table>