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

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.

====== CSS [attribute*=value] Selector ======
<WRAP left notice 80%>
  * description : %%CSS%% [attribute*=value] Selector
  * author      : 오션
  * email       : shlim@repia.com
  * lastupdate  : 2021-07-06 Tue
</WRAP>
<WRAP clear></WRAP>
\\
=====The source of this article====
[[https://www.w3schools.com/cssref/sel_attr_contain.asp|CSS [attribute*=value] Selector]]\\

==== Example ====
"test"를 포함하는 클래스 속성 값이 있는 모든 %%<div>%% 요소들에 대한 배경색을 설정합니다.\\ 
<code css>
  <style>
    div[class*="test"] {
      background: #ffff00;
    }
    /* "test"라는 클래스 속성 값을 가지는 모든 div 요소를 선택하여 배경색 적용*/
  </style>

</head>
<body>
  
  <div class="first_test">The first div element.</div>
  <div class="second">The second div element.</div>
  <div class="test">The third div element.</div>
  <p class="test">This is some text in a paragraph.</p>
  
</body>
</code>
{{:wiki:css:css_note:attributevalueselector01.png? 400|}}

=====Definition and Usage=====
%%[attribute*= value]%% 셀렉터는 지정된 값을 포함하는 속성을 가진 모든 요소와 일치합니다.\\

=====CSS Syntax=====
<code css>
attribute *= value{
   css declarations;
}
</code>

=====More Examples=====

====Example====
"test"라는 클래스 속성 값을 가진 모든 요소들에 대해 배경색을 설정합니다.\\

<code css>
  <style>
    [class*="test"] {
      background: #ffff00;
    }
    /* "test"라는 클래스 속성 값을 가지는 모든 요소를 선택하여 배경색 적용*/
  </style>

</head>
<body>
  
  <div class="first_test">The first div element.</div>
  <div class="second">The second div element.</div>
  <div class="test">The third div element.</div>
  <p class="test">This is some text in a paragraph.</p>
  
</body>
</code>
{{:wiki:css:css_note:attributevalueselector02.png? 400|}}







{{tag>오션, CSS [attribute*=value] Selector,}}

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

사용자 도구

사이트 도구

문서 도구