[CSS] 속성 선택자


Study/Javascript, Jquery, CSS  2020. 1. 15. 00:02

안녕하세요. 명월입니다.


이 글은 CSS의 속성 선택자에 대한 글입니다.


이전 글에서 CSS 선택자에 대해서 간략하게 설명했었습니다.

링크 - [CSS] Selector(선택자)


CSS의 선택자는 여러가지 방식이 있는데 그중 가장 많이 사용되는 오브젝트(element) 선택 방법이지 않을까 싶습니다.

먼저 속성 선택자는 html의 태그를 살펴보면 태그 명이 있고 속성(attribute)가 있는 형태로 구성됩니다.

<!-- 태그명은「input」,속성은「type」,「id」,「class」,「value」이다. -->
<input type="text" id="test" class="form-control" value="100%">

여기서 우리가 흔히 사용되는 id와 클래스도 xml 구성으로 보면 결국은 속성(attribute)의 종류입니다.

그러나 id와 class는 자주 사용하고 object를 구분하는 중요한 속성이기 때문에 id의 경우는 「#」를 사용해서 class의 경우는 「.」를 사용해서 선택이 가능합니다.

<!DOCTYPE html>
<html>
 <head>
  <title> New Document </title>
  <style>
    /*  구분을 편하게 하기 위해 input 태그와 a 태그를 style를 적용했다.*/
    input,a{
      /* 너비는 100px이다. */
      width: 100px;
      /* 높이는 50px이다. */
      height: 50px;
      /* 여백은 10px이다. */
      margin:10px;
    }
  </style>
 </head>
 <body>
  <!-- 첫번째 요소 -->
  <input type="textbox" readonly="readonly" value="readonly"><br />
  <!-- 두번째 요소 -->
  <input type="textbox" value="normal"><br />
  <!-- 세번째 요소 -->
  <input type="button" value="button"><br />
  <!-- 네번째 요소 -->
  <input type="submit" value="submit button"><br />
  <!-- 다섯번째 요소 -->
  <a href="http://nowonbun.tistory.com" style="display:block;">명월일지</a><br />
  <!-- 여섯번째 요소 -->
  <a href="https://nowonbun.tistory.com" style="display:block;">명월일지</a><br />
  <!-- 일곱번째 요소 -->
  <a href="http://localhost" style="display:block;">명월일지</a><br />
 </body>
</html>
/*input태그의 readonly의 속성을 가지고 있는 요소*/
input[readonly] {
  border:1px solid #000;
}
/*input태그의 type의 속성이 button인 요소*/
input[type="button"] {
  border:1px solid red;
}
/*input태그의 value의 속성이 submit의 문자를 포함하고 있는 요소*/
input[value~="submit"] {
  border:1px solid blue;
}
/*input태그의 href의 속성이 https의 문자로 시작하는 요소*/
a[href^="https"] {
  color:green;
}
/*input태그의 href의 속성이 localhost로 끝나는 요소*/
a[href$="localhost"] {
  color:gray;
}

먼저 input[readonly]의 의미는 input요소에 readonly속성을 사용하는 요소를 찾는 선택자입니다. html에서 보면 첫번째 요소가 선택이 됩니다. 첫번째 input 태그의 테두리는 까만색이 되겠네요.

input[type="button"]는 type의 속성이 button으로 되어있는 요소입니다. 즉 세번째 요소가 선택이 될 것입니다. 세번째 input 버튼의 태두리는 빨간색이 되겠습니다.

input[value~="submit"]는 value의 속성에 submit이 포함되어 있는 요소입니다. 네번째 submit 버튼의 태두리가 빨간색이 되겠습니다.

a[href^="https"]는 https로 시작하는 a 태그의 요소를 찾는 것인데 여섯번째 요소입니다. 다섯번째는 http이므로 해당 사항이 아닙니다.

a[href$="localhost"]의 경우는 localhost로 끝나는 요소입니다만 일곱번째 요소가 해당사항입니다.

여기까지 CSS의 속성 선택자에 대한 설명이었습니다.


궁금한 점이나 잘못된 점이 있으면 댓글 부탁드립니다.