Style HTML Elements With Specific Attributes
It is possible to style HTML elements that have specific attributes or attribute values.
속석을 명시한 html 요소 스타일하기
속성 또는 속성 값을 명시되어저 있는 html 요소를 스타일링 하는 것은 가능하다.
CSS [attribute] Selector
The [attribute] selector is used to select elements with a specified attribute.
The following example selects all <a> elements with a target attribute:
[attribute] 선택자는 명시된 속성을 가지고 있는 요소를 선택하기 위해서 사용되어진다.
다음의 예제는 target 속성을 가지고 있는 모든 <a> 요소를 선택한다.
CSS [attribute="value"] Selector
The [attribute="value"] selector is used to select elements with a specified attribute and value.
The following example selects all <a> elements with a target="_blank" attribute:
[attribute="value"] 선택자는 명시된 속성과 값을 가진 요소를 선택하기 위해서 사용되어진다.
다음의 예제는 target"="_blank"인 속성의 모든 <a> 요소를 선택한다.
CSS [attribute~="value"] Selector
The [attribute~="value"] selector is used to select elements with an attribute value containing a specified word.
The following example selects all elements with a title attribute that contains a space-separated list of words, one of which is "flower":
[attribute~="value"] 선택자는 명시된 단어를 포함하는 속성의 값을 가진 요소를 선택하기 위해서 사용되어진다.
다음의 예제는 공백으로 구분되어있는 단어중에서 flower를 포함하는 title 속성을 가진 모든 요소를 선택한다.
The example above will match elements with title="flower", title="summer flower", and title="flower new", but not title="my-flower" or title="flowers".
위의 예제는 타이틀 속성이 flower, summer flower, flower new 인 것은 모두 매칭되지만, my-flower, flowers는 매칭되지 않는다.
CSS [attribute|="value"] Selector
The [attribute|="value"] selector is used to select elements with the specified attribute starting with the specified value.
The following example selects all elements with a class attribute value that begins with "top":
Note: The value has to be a whole word, either alone, like class="top", or followed by a hyphen( - ), like class="top-text"!
[attribute|="value"] 선택자는 명시된 value로 시작하는 명시된 속성을 가진 요소를 선택한다.
다음의 예제는 class 속성값이 top으로 시작하는 모든 요소를 선택한다.
주의 : 값은 전체 하나의 완전한 단어여야만 한다. class="top" 처럼, - 이 포함 되지 않는 ?
CSS [attribute^="value"] Selector
The [attribute^="value"] selector is used to select elements whose attribute value begins with a specified value.
The following example selects all elements with a class attribute value that begins with "top":
Note: The value does not have to be a whole word!
[attribute^="value"] 선택자는 구체적인 값으로 시작되는 속성들을 선택하기 위해 사용되어진다.
다음의 예제는 top로 시작하는 속성의 값을 가진 하나의 클래스를 가진 모든 요소를 선택한다.
주의 : 값은 하나의 전체 단어일 필요는 없다.?
CSS [attribute$="value"] Selector
The [attribute$="value"] selector is used to select elements whose attribute value ends with a specified value.
The following example selects all elements with a class attribute value that ends with "test":
Note: The value does not have to be a whole word!
[attribute$="value"] 선택자는 구체적인 값으로 끝나는 속성을 가진 요소를 선택하기 위해서 사용되어진다.
다음의 예제는 "test"로 끝나는 값을 가진 클래스의 모든 요소를 선택한다.
주의 값은 하나의 완전한 단어일 필요는 없다.
CSS [attribute*="value"] Selector
The [attribute*="value"] selector is used to select elements whose attribute value contains a specified value.
The following example selects all elements with a class attribute value that contains "te":
Note: The value does not have to be a whole word!
[attribute*="value"] 선택자는 구체적인 값을 포함하는 속성값의 요소를 선택하기 위해서 사용되어진다.
다음의 예제는 "te"를 포함하는 속성값을 가진 클래스의 모든 요소들을 선택한다.
주의 : 값은 하나의 완전한 단어일 필요는 없다.
'영어공부' 카테고리의 다른 글
| CSS Specificity (0) | 2020.01.21 |
|---|---|
| CSS Counters (0) | 2020.01.21 |
| CSS Image Sprites (0) | 2020.01.21 |
| CSS Dropdowns (0) | 2020.01.21 |
| CSS Navigation Bar (0) | 2020.01.20 |
