diff options
Diffstat (limited to 'files/ko/web/css/attribute_selectors/index.html')
| -rw-r--r-- | files/ko/web/css/attribute_selectors/index.html | 228 |
1 files changed, 228 insertions, 0 deletions
diff --git a/files/ko/web/css/attribute_selectors/index.html b/files/ko/web/css/attribute_selectors/index.html new file mode 100644 index 0000000000..4e9cecff26 --- /dev/null +++ b/files/ko/web/css/attribute_selectors/index.html @@ -0,0 +1,228 @@ +--- +title: 특성 선택자 +slug: Web/CSS/Attribute_selectors +tags: + - CSS + - Reference + - Selectors +translation_of: Web/CSS/Attribute_selectors +--- +<div>{{CSSRef("Selectors")}}</div> + +<p><a href="/ko/docs/Web/CSS">CSS</a> <strong>특성 선택자</strong>는 주어진 특성의 존재 여부나 그 값에 따라 요소를 선택합니다.</p> + +<pre class="brush: css no-line-numbers">/* <a> elements with a title attribute */ +a[title] { + color: purple; +} + +/* <a> elements with an href matching "https://example.org" */ +a[href="https://example.org"] { + color: green; +} + +/* <a> elements with an href containing "example" */ +a[href*="example"] { + font-size: 2em; +} + +/* <a> elements with an href ending ".org" */ +a[href$=".org"] { + font-style: italic; +} + +/* <a> elements whose class attribute contains the word "logo" */ +a[class~="logo"] { + padding: 2px; +}</pre> + +<h2 id="구문">구문</h2> + +<dl> + <dt><code>[<em>attr</em>]</code></dt> + <dd><code>attr</code>이라는 이름의 특성을 가진 요소를 선택합니다.</dd> + <dt><code>[<em>attr</em>=<em>value</em>]</code></dt> + <dd><code>attr</code>이라는 이름의 특성값이 정확히 <code>value</code>인 요소를 선택합니다.</dd> + <dt><code>[<em>attr</em>~=<em>value</em>]</code></dt> + <dd><code>attr</code>이라는 이름의 특성값이 정확히 <code>value</code>인 요소를 선택합니다. <code>attr</code> 특성은 공백으로 구분한 여러 개의 값을 가지고 있을 수 있습니다.</dd> + <dt><code>[<em>attr</em>|=<em>value</em>]</code></dt> + <dd><code>attr</code>이라는 특성값을 가지고 있으며, 그 특성값이 정확히 <code>value</code>이거나 <code>value</code>로 시작하면서 <code>-</code>(U+002D) 문자가 곧바로 뒤에 따라 붙으면 이 요소를 선택합니다. 보통 언어 서브코드(<code>en-US</code>, <code>ko-KR</code> 등)가 일치하는지 확인할 때 사용합니다.</dd> + <dt><code>[<em>attr</em>^=<em>value</em>]</code></dt> + <dd><code>attr</code>이라는 특성값을 가지고 있으며, 접두사로 <code>value</code>가 값에 포함되어 있으면 이 요소를 선택합니다.</dd> + <dt><code>[<em>attr</em>$=<em>value</em>]</code></dt> + <dd><code>attr</code>이라는 특성값을 가지고 있으며, 접미사로 <code>value</code>가 값에 포함되어 있으면 이 요소를 선택합니다.</dd> + <dt><code>[<em>attr</em>*=<em>value</em>]</code></dt> + <dd><code>attr</code>이라는 특성값을 가지고 있으며, 값 안에 <code>value</code>라는 문자열이 적어도 하나 이상 존재한다면 이 요소를 선택합니다.</dd> + <dt id="case-insensitive"><code>[<em>attr</em> <em>operator</em> <em>value</em> i]</code></dt> + <dd>괄호를 닫기 전에 <code>i</code> 혹은 <code>I</code>를 붙여주면 값의 대소문자를 구분하지 않습니다. (ASCII 범위 내에 존재하는 문자에 한해서 적용됩니다)</dd> + <dt><a id="case-sensitive" name="case-sensitive"><code>[attr operator value s]</code></a> {{experimental_inline}}</dt> + <dd>괄호를 닫기 전에 <code>s</code> 혹은 <code>S</code>를 붙여주면 값의 대소문자를 구분합니다. (ASCII 범위 내에 존재하는 문자에 한해서 적용됩니다)</dd> +</dl> + +<h2 id="예제">예제</h2> + +<h3 id="링크">링크</h3> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">a { + color: blue; +} + +/* Internal links, beginning with "#" */ +a[href^="#"] { + background-color: gold; +} + +/* Links with "example" anywhere in the URL */ +a[href*="example"] { + background-color: silver; +} + +/* Links with "insensitive" anywhere in the URL, + regardless of capitalization */ +a[href*="insensitive" i] { + color: cyan; +} + +/* Links with "cAsE" anywhere in the URL, +with matching capitalization */ +a[href*="cAsE" s] { + color: pink; +} + +/* Links that end in ".org" */ +a[href$=".org"] { + color: red; +}</pre> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><ul> + <li><a href="#internal">Internal link</a></li> + <li><a href="http://example.com">Example link</a></li> + <li><a href="#InSensitive">Insensitive internal link</a></li> + <li><a href="http://example.org">Example org link</a></li> +</ul></pre> + +<h4 id="결과">결과</h4> + +<p>{{EmbedLiveSample("링크")}}</p> + +<h3 id="언어">언어</h3> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css">/* All divs with a `lang` attribute are bold. */ +div[lang] { + font-weight: bold; +} + +/* All divs in US English are blue. */ +div[lang~="en-us"] { + color: blue; +} + +/* All divs in Portuguese are green. */ +div[lang="pt"] { + color: green; +} + +/* All divs in Chinese are red, whether + simplified (zh-CN) or traditional (zh-TW). */ +div[lang|="zh"] { + color: red; +} + +/* All divs with a Traditional Chinese + `data-lang` are purple. */ +/* Note: You could also use hyphenated attributes + without double quotes */ +div[data-lang="zh-TW"] { + color: purple; +}</pre> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><div lang="en-us en-gb en-au en-nz">Hello World!</div> +<div lang="pt">Olá Mundo!</div> +<div lang="zh-CN">世界您好！</div> +<div lang="zh-TW">世界您好！</div> +<div data-lang="zh-TW">世界您好！</div></pre> + +<h4 id="결과_2">결과</h4> + +<p>{{EmbedLiveSample("언어")}}</p> + +<h3 id="HTML_정렬_목록">HTML 정렬 목록</h3> + +<p>{{htmlattrxref("type", "input")}} 특성은 주로 {{htmlelement("input")}} 요소에 사용하므로, HTML 명세는 type의 대소문자를 구분하지 않고 선택하도록 요구하고 있습니다. 그러므로 {{htmlelement("ol")}}의 {{htmlattrxref("type", "ol")}}을 특성 선택자로 선택할 땐 {{anch("case-sensitive", "대소문자 구분")}} 수정자를 지정하지 않으면 동작하지 않습니다.</p> + +<h4 id="CSS_3">CSS</h4> + +<pre class="brush: css">/* List types require the case sensitive flag due to a quirk in how HTML treats the type attribute. */ +ol[type="a"] { + list-style-type: lower-alpha; + background: red; +} + +ol[type="a" s] { + list-style-type: lower-alpha; + background: lime; +} + +ol[type="A" s] { + list-style-type: upper-alpha; + background: lime; +}</pre> + +<h4 id="HTML_3">HTML</h4> + +<pre class="brush: html;"><ol type="A"> + <li>Example list</li> +</ol></pre> + +<h4 id="결과_3">결과</h4> + +<p>{{EmbedLiveSample("HTML_정렬_목록")}}</p> + +<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('CSS4 Selectors', '#attribute-selectors', 'attribute selectors')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>특성값 내에 존재하는 ASCII 문자의 대소문자를 구분하지 않는 수식자(modifier)를 추가하였습니다.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#attribute-selectors', 'attribute selectors')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'selector.html#attribute-selectors', 'attribute selectors')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>초기 정의.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("css.selectors.attribute")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>CSS {{cssxref("attr")}} 함수</li> +</ul> |