댓글 목록

CSS 속성선택자(Attr Selectors)

페이지 정보

작성자 운영자 작성일 17-10-29 19:27 조회 1,456 댓글 0

동영상 강좌는 유튜브 채널 '웹학교'를 이용하시기 바랍니다.

특정 속성을 가진 HTML 요소 스타일

특정 속성 또는 속성 값을 갖는 HTML 요소를 스타일화 할 수 있습니다. 


CSS [속성] 선택자 

[속성] 선택자는 지정된 속성을 가진 요소를 선택하는 데 사용됩니다.

다음 예제에서는 target 속성이 있는 <a> 요소를 모두 선택합니다.


a[target] {
  background-color: yellow;
}


CSS [attribute = "value"] 셀렉터 

[attribute = "value"] 선택자는 지정된 속성 및 값을 가진 요소를 선택하는 데 사용됩니다.


다음 예제는 target = "_ blank"속성을 가진 모든 <a> 요소를 선택합니다.


a[target="_blank"] { 
  background-color: yellow;
}


CSS [attribute ~= "value"] 셀렉터 

[attribute ~ = "value"] 선택자는 지정된 단어를 포함하는 속성 값을 가진 요소를 선택하는 데 사용됩니다.

다음 예제에서는 공백으로 구분 된 단어 목록을 포함하는 title 속성이 있는 모든 요소를 ​​선택합니다. 그 중 하나는 "flower"입니다.


[title~="flower"] {
  border: 5px solid yellow;
}


위의 예는 title = "my-flower"또는 title = "flowers"가 아닌 title = "flower", title = "summer flower"및 title = "flower new"요소와 일치합니다.


CSS [attribute |= "value"] 셀렉터 


[attribute | = "value"] 선택자는 지정된 속성으로 지정된 값으로 시작하는 요소를 선택하는 데 사용됩니다.


다음 예제에서는 class 속성 값이 "top"으로 시작하는 모든 요소를 ​​선택합니다.


** 이 값은 class = "top"와 같은 혼자이거나 class = "top-text"처럼 하이픈 (-)이 올 수 있는 전체 단어여야 합니다!


[class|="top"] {
  background: yellow;
}


CSS [attribute ^= "value"] 셀렉터 

[attribute ^ = "value"] 선택자는 속성 값이 지정된 값으로 시작하는 요소를 선택하는 데 사용됩니다.


다음 예제에서는 class 속성 값이 "top"으로 시작하는 모든 요소를 ​​선택합니다.


** 그 값은 완전한 단어일 필요는 없습니다!


[class^="top"] {
  background: yellow;
}


CSS [attribute$="value"] 셀렉터 


[attribute $ = "value"] 선택자는 속성 값이 지정된 값으로 끝나는 요소를 선택하는 데 사용됩니다.


다음 예제에서는 class 속성 값이 "test"로 끝나는 모든 요소를 ​​선택합니다.


** 그 값은 완전한 단어일 필요는 없습니다!


[class$="test"] {
  background: yellow;
}


CSS [attribute *= "value"] 셀렉터 

[attribute * = "value"] 선택자는 속성 값이 지정된 값을 포함하는 요소를 선택하는 데 사용됩니다.


다음 예제에서는 "te"가 포함 된 클래스 속성 값을 가진 모든 요소를 ​​선택합니다.


** 그 값은 완전한 단어일 필요는 없습니다!


[class*="te"] {
  background: yellow;
}


양식 스타일링 


속성 선택자는 클래스 또는 ID없이 양식을 스타일링하는 데 유용 할 수 있습니다.


input[type="text"] {
  width: 150px;
  display: block;
  margin-bottom: 10px;
  background-color: yellow;
}

input[type="button"] {
  width: 120px;
  margin-left: 35px;
  display: block;
}




댓글목록 0

등록된 댓글이 없습니다.

CSS Flexbox강좌

CSS Variables강좌 

CSS Grid강좌