문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.
======CSS Attribute Selectors======
<WRAP left notice 80%>
  * description : CSS Attribute Selectors
  * author      : 오션
  * email       : shlim@repia.com
  * lastupdate  : 2021-03-31
</WRAP>
<WRAP clear></WRAP>
\\
=====Style HTML Elements With Specific Attributes=====
특정 속성 또는 속성 값이 있는 %%HTML%% 요소의 스타일을 지정할 수 있습니다.\\
\\
=====CSS [attribute] Selector=====
''%%[attribute]%%'' 셀렉터는 지정된 속성을 가진 요소를 선택하는 데 사용됩니다.\\
\\
하기 예제는 대상 속성이 있는 모든 %%<a>%% 요소를 선택합니다.\\
====예제====
<HTML>
<!DOCTYPE html>
<html>
<head>
    <style>
        a[target] {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <h2>CSS [attribute] Selector</h2>
    <p>The links with a target attribute gets a yellow backround:</p>
    <a href="https://www.w3school.com">w3schools.com</a>
    <a href="http://www.disney.com" target="_blank">disney.com</a>
    <a href="http://www.wikipedia.org" target="_top">wikipedia.org</a>
</body>
</html>
</HTML>
===Result===
{{:wiki:css:css_note:attrselector.png?400|}}\\
=====CSS [attribute="value"] Selector=====
''%%[attribute = "value"]%%'' 셀렉터는 지정된 속성 및 값이 있는 요소를 선택하는 데 사용됩니다.\\
\\
하기 예제는 %%target="_ blank"%% 속성이 있는 모든 <a> 요소를 선택합니다.\\
====예제====
<HTML>
<!DOCTYPE html>
<html>
<head>
    <style>
        a[target=_blank] {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <h2>CSS [attribute] Selector</h2>
    <p>The links with target="_blank" gets a yellow backround:</p>
    <a href="https://www.w3school.com">w3schools.com</a>
    <a href="http://www.disney.com" target="_blank">disney.com</a>
    <a href="http://www.wikipedia.org" target="_top">wikipedia.org</a>
</body>
</html>
</HTML>
===Result===
{{:wiki:css:css_note:attrvalueselector.png?400|}}\\
=====CSS [attribute~="value"] Selector=====
''%%[attribute ~ = "value"]%%'' 셀렉터는 지정된 단어를 포함하는 속성 값이 있는 요소를 선택하는 데 사용됩니다.\\
\\
하기 예제는 공백으로 구분된 단어 목록을 포함하는 title 속성을 가진 모든 요소를 선택하며, 여기에서는 "flower"입니다.\\
====예제====
<HTML>
<!DOCTYPE html>
<html>
<head>
    <style>
        [title~=flower] {
            border: 5px solid yellow;
        }
    </style>
</head>
<body>
    <h2>CSS [attribute~="value"] Selector</h2>
    <p>All images with the title attribute containing the word "flower" get a yellow border.</p>
    <img src="klematis.jpg" title="klematis flower" width="150" height="113">
    <img src="img_flwr.gif" title="flower" width="224" height="162">
    <img src="img_tree.gif" title="tree" width="200" height="358">
</body>
</html
</HTML>
\\
위의 예제는 title = "flower", title = "summer flower" 및 title = "flower new"를 가진 요소들과 일치하지만, title = "my-flower" 또는 title = "flowers"를 가진 요소들과는 일치하지 않습니다.\\
===Result===
{{:wiki:css:css_note:attrvalueslctr0.png?400|}}\\
=====CSS [attribute|="value"] Selector=====
''%%[attribute | = "value"]%%'' 셀렉터는 지정된 값으로 시작하는 지정된 속성을 가진 요소를 선택하는 데 사용됩니다.\\
\\
다음 예제는 "top"으로 시작하는 클래스 속성 값을 가진 모든 요소를 선택합니다.\\
\\
**Note:** 값(value)은 class = "top"과 같이 단독으로 또는 class = "top-text"처럼 뒤에 하이픈 (-)으로 연결되는 완전한 단어이어야 합니다.\\
====예제====
<HTML>
<!DOCTYPE html>
<html>
<head>
    <style>
        [class|="top"] {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <h2>CSS [attribute|="value"] Selector</h2>
    <h1 class="top-header">Welcome</h1>
    <p class="top-text">Hello World!</p>
    <p class="topcontent">Are you learning CSS?</p>
</body>
</html>
</HTML>
===Result===
{{:wiki:css:css_note:attrvalueslctr.png?400|}}\\
=====CSS [attribute*="value"] Selector=====
''%%[attribute * = "value"]%%'' 셀렉터는 속성 값이 지정된 값을 포함하는 요소를 선택하는 데 사용됩니다.\\
\\
하기 예제는 "te"를 포함하는 클래스 속성 값을 가진 모든 요소를 선택합니다.\\
\\
**Note:** 값(value)은 전체 단어일 필요는 없습니다!\\
====예제====
<HTML>
<!DOCTYPE html>
<html>
<head>
    <style>
        [class*="te"] {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <h2>CSS [attribute*="value"] Selector</h2>
    <div class="first_test">The first div element</div>
    <div class="second">The second div element</div>
    <div class="my_test">The third div element</div>
    <p class="mytest">This is a some text in a paragraph.</p>
</body>
</html>
</HTML>
===Result===
{{:wiki:css:css_note:attrvalueslctr03.png?400|}}\\
=====Styling Forms=====
속성 선택자(attribute selector)는 클래스(class) 또는 아이디(ID) 없이 양식에 스타일을 설정하는 것에 유용할 수 있습니다.\\
====예제====
<HTML>
<!DOCTYPE html>
<html>
<head>
    <style>
        input[type=text] {
            width: 150px;
            display: block;
            margin-bottom: 10px;
            background-color: yellow;
        }
        input[type=button] {
            width: 120px;
            margin-left: 35px;
            display: block;
        }
    </style>
</head>
<body>
    <h2>Styling Forms</h2>
    <form name="input" action="" method="get">
        Firstname: <input type="text" name="Name" value="Peter" size="20">
        lastname: <input type="text" name="Name" value="Griffin" size="20">
        <input type="button" value="Example Button">
    </form>
</body>
</html>
</HTML>
===Result===
{{:wiki:css:css_note:stylingform.png?400|}}\\
=====All CSS Attribute Selectors=====
|       Selector      |        Example        |                          Example description                                  |
^ %%[attribute]%%         ^ %%[target]%%              ^ %%target%% 속성을 가진 모든 요소를 선택합니다.                                      ^
| %%[attribute=value]%%   | %%[target=_blank]%%       | %%target="_blank"%% 속성을 가진 모든 요소를 선택합니다.                              |
^ %%[attribute~=value]%%  ^ %%[title~=flower]%%       ^ 단어 "flower"를 포함하는 %%title%% 속성을 가진 모든 요소를 선택합니다.                ^
| %%[attribute|=value]%%  | %%[lang|=en]%%            | %%"en"%%으로 시작하는 %%lang%% 속성 값을 가진 모든 요소를 선택합니다.                     |
^ %%[attribute^=value]%%  ^ %%a[href^="https"]%%      ^ %%"https"%%로 시작하는 %%href%% 속성값을 가진 모든 %%<a>%% 요소를 선택합니다.                 ^
| %%[attribute$=value]%%  | %%a[href$=".pdf"]%%       | %%".pdf"%%로 끝나는 %%href%% 속성값을 가진 모든 %%<a>%% 요소를 선택합니다.                    |
^ %%[attribute*=value]%%  ^ %%a[href*="w3schools"]%%  ^ 하위문자열 %%"w3schools"%%를 포함하는 %%href%% 속성 값을 가진 모든 %%<a>%% 요소를 선택합니다.  ^
\\
\\




{{tag>오션 CSS Attribute Selectors}}
문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

문서 도구
