======CSS Attribute Selectors====== * description : CSS Attribute Selectors * author : 오션 * email : shlim@repia.com * lastupdate : 2021-03-31 \\ =====Style HTML Elements With Specific Attributes===== 특정 속성 또는 속성 값이 있는 %%HTML%% 요소의 스타일을 지정할 수 있습니다.\\ \\ =====CSS [attribute] Selector===== ''%%[attribute]%%'' 셀렉터는 지정된 속성을 가진 요소를 선택하는 데 사용됩니다.\\ \\ 하기 예제는 대상 속성이 있는 모든 %%%% 요소를 선택합니다.\\ ====예제====

CSS [attribute] Selector

The links with a target attribute gets a yellow backround:

w3schools.com disney.com wikipedia.org ===Result=== {{:wiki:css:css_note:attrselector.png?400|}}\\ =====CSS [attribute="value"] Selector===== ''%%[attribute = "value"]%%'' 셀렉터는 지정된 속성 및 값이 있는 요소를 선택하는 데 사용됩니다.\\ \\ 하기 예제는 %%target="_ blank"%% 속성이 있는 모든 요소를 선택합니다.\\ ====예제====

CSS [attribute] Selector

The links with target="_blank" gets a yellow backround:

w3schools.com disney.com wikipedia.org ===Result=== {{:wiki:css:css_note:attrvalueselector.png?400|}}\\ =====CSS [attribute~="value"] Selector===== ''%%[attribute ~ = "value"]%%'' 셀렉터는 지정된 단어를 포함하는 속성 값이 있는 요소를 선택하는 데 사용됩니다.\\ \\ 하기 예제는 공백으로 구분된 단어 목록을 포함하는 title 속성을 가진 모든 요소를 선택하며, 여기에서는 "flower"입니다.\\ ====예제====

CSS [attribute~="value"] Selector

All images with the title attribute containing the word "flower" get a yellow border.

\\ 위의 예제는 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"처럼 뒤에 하이픈 (-)으로 연결되는 완전한 단어이어야 합니다.\\ ====예제====

CSS [attribute|="value"] Selector

Welcome

Hello World!

Are you learning CSS?

===Result=== {{:wiki:css:css_note:attrvalueslctr.png?400|}}\\ =====CSS [attribute*="value"] Selector===== ''%%[attribute * = "value"]%%'' 셀렉터는 속성 값이 지정된 값을 포함하는 요소를 선택하는 데 사용됩니다.\\ \\ 하기 예제는 "te"를 포함하는 클래스 속성 값을 가진 모든 요소를 선택합니다.\\ \\ **Note:** 값(value)은 전체 단어일 필요는 없습니다!\\ ====예제====

CSS [attribute*="value"] Selector

The first div element
The second div element
The third div element

This is a some text in a paragraph.

===Result=== {{:wiki:css:css_note:attrvalueslctr03.png?400|}}\\ =====Styling Forms===== 속성 선택자(attribute selector)는 클래스(class) 또는 아이디(ID) 없이 양식에 스타일을 설정하는 것에 유용할 수 있습니다.\\ ====예제====

Styling Forms

Firstname: lastname:
===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%% 속성값을 가진 모든 %%%% 요소를 선택합니다. ^ | %%[attribute$=value]%% | %%a[href$=".pdf"]%% | %%".pdf"%%로 끝나는 %%href%% 속성값을 가진 모든 %%%% 요소를 선택합니다. | ^ %%[attribute*=value]%% ^ %%a[href*="w3schools"]%% ^ 하위문자열 %%"w3schools"%%를 포함하는 %%href%% 속성 값을 가진 모든 %%%% 요소를 선택합니다. ^ \\ \\ {{tag>오션 CSS Attribute Selectors}}