[CSS] 속성 선택자
안녕하세요. 명월입니다.
이 글은 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의 속성 선택자에 대한 설명이었습니다.
궁금한 점이나 잘못된 점이 있으면 댓글 부탁드립니다.