[CSS] CSS 선택자(selector)

CSS 선택자? - Cascading Style Sheets Selector

CSS란 무엇인가?

css는 documents가 사용자에게 화면을 어떻게 보여질까를 기술하는 언어이다.

오늘날 웹표준 에서는 구조와 표현, 행위를 각각 분리해서 개발 하기를 권유한다.

구조 : 웹 컨텐츠에 의미를 부여한  마크업 소스 (HTML)

표현 : 마크업에 대한 시각적인 디자인을 표현 (CSS)

행위 : 브라우저의 상호작용과 동적인 표현을 담당 (JavaScript)

이전 포스팅 [CSS] CSS란 무엇인가? 를 참고하면, 내부 스타일 시트에서

style 태그로 기술하기 보다는, 외부 스타일 시트로 분리해서 사용하는 것이 각 구조화된 마크업에 따라

다양한 디자인을 할 수 있고, 가독성과 유지보수 측면에서 더 효율적이다.

CSS 선택자(Selector)?

선택자(Selector)란 말 그대로 원하는 element(태그)를 선택해주는 요소이다.

기본적인 css의 구성인 Rule Set은 다음과 같다.

selector{property:value}

selector - 선택자. {} 선언블록 이전의 element를 선택, 선언블록 안에 있는 내용을 선택자로 설정한 element에 적용.

{} - 선언블록. property(속성)와 value(값) 으로 이루어진 스타일 정의를 묶어놓음.

property - 해당 element에서 줄 속성을 지정. 공통속성과 element에서 지원하는 속성을 사용할 수 있다.

value - 해당 property에서 사용할 수 있는 값들을 지정함.

CSS 선택자의 종류

전체선택자

*{margin:0; padding:0}

전체 선택자는 html에서 모든 element(태그)에 같은 css 속성을 적용한다.

보통 어떠한 값을 초기화 할 때 사용하는데, 쓰기에는 간편하지만 모든 요소를 읽어내야 하기 때문에

로딩속도가 느려질 수 있다. 이를 방지하기 위해 초기화 css가 존재한다.

일반적으로 reset.css 혹인 Nomalize.css 등을 사용한다.

reset.css 참고 (http://heeya7.tistory.com/6)

Nomalize.css 참고 (http://heeya7.tistory.com/5)

태그선택자

div{margin:0; padding:0}

태그 선택자는 html 요소를 직접적으로 기술하는 선택자다.

element의 tab name을 직접 쓰는 방식으로, 문서 내의 모든 div가 적용되는 위험성이 있으므로

복합선택자 등을 활용하여 써야 한다.

클래스 선택자

/* css */
.className{margin:0; padding:0}
div.className2{color:red}

<!-- html -->
<div class="className className2">클래스 선택자 사용법</div>

클래스 선택자는 위와같이 element에서 class="propertyName" 형식으로 기술된 element를 찾아 스타일을 지정한다.

위의 예시를 보면 .className으로 className이라는 클래스명을 가진 div를 찾아, 스타일을 지정하였다.

그 아래 div.className2 라고 기술된 것은 'div태그중' className2라는 클래스명을 찾아 스타일을 지정한다.

이는 <p class="className2">스타일</p> 와 같은 코드에는 div가 아니기 때문에 적용되지 않는다.

아이디 선택자

/* css */
#idName{margin:0; padding:0}
div#idName{margin:0; padding:0}

<!-- html -->
<div id="idName">아이디 선택자 사용법</div>

아이디 선택자는 .className이 아닌 #을 붙인 #idName 으로 사용된다.

아이디 선택자를 사용할 때 주의할 점은, '단 한번만 유일하게 적용되는 value' 라는 것이다.

이는 html 문서에서 특정 id속성값은 오직 하나만 있어야 한다는 뜻이다.

id선택자는 웹 문서 내에서 요소의 배치 방법을 지정할 때 자주 사용된다.

복합 선택자

/* css */

.grand .parent{color:red}    //적용 가능
.grand .child{color:blue}    //적용 가능

.grand>.parant{font-weight:bold} //적용 가능
.grand>.child{font-weight:bold} //적용 불가능(child는 grand의 직계자식이 아님)

div+p{background:#c8c8c8;} //div태그의 직계자식중 p태그만 스타일 지정
div~p{color:green} //div와 형제관계(같은레벨)의 모든 p태그에 스타일 지정

/* html */

<div class="grand">
<p class="parant">부모태그</p>
<span class="child">자식태그</span>
</div>

<p>div.grand와 형제노드</p> // grand div와 형제레벨의 노드

<p>단락</p>

<span>텍스트</span>

<p>단락2</p>

E F{property:value} // E의 하위요소 F선택

E의 하위요소(자식, 자손 모두 포함) 중에서 F의 명칭을 가진 element를 선택한다.

E>F{property:value} // E의 직계자식 F선택

E의 바로아래요소(직계자식)인 element를 선택한다.

E+F{property:value} // E요소의 바로뒤 오는 직계자식 F선택

E요소의 바로 뒤에있는 직계자식 F만 선택한다. 두번째 F는 선택되지 않는다.

E~F{property:value} // E요소의 형제레벨의 모든 F선택

E요소와 같은 레벨의 모든 F태그를 선택한다.

속성선택자

속성선택자는 태그 안의 속성에 따라 스타일을 지정하는 선택자 방식이다.

값의 조건에 따라 다양한 스타일을 지정할 수 있기 때문에 활용도가 높다.

<input type="text" value="check01" class="default red">
<input type="text" value="check02" class="default blue">
<input type="text" value="check03" class="default red">
<input type="text" value="check04" class="check red">
<input type="text" value="check05" class="check-test">


/* text 형식의 input태그 선택 */
input[type="text"]{width:200px; padding:5px}

/* red 클래스를 포함한 input태그 선택 */
input[class~="red"]{border:1px solid red}

/* check로 시작하는 class명을 가진 input 선택 */
input[class^="check"]{color:green}

/* blue로 끝나는 class명을 가진 input 선택 */
input[class$="blue"]{border:1px solid blue}

/* check라는 값이 포함된 value를 가진 input 선택 */
input[value*="check"]{text-align:right}

/* check로 시작하거나, check를 class명으로 포함하는 input 선택 */
input[class|="check"]{color:red}

E[attr] - 'attr' 속성이 포함된 E태그 선택

E[attr="val"] - 'attr' 속성의 값이 "val"과 일치하는 E태그 선택

E[attr~=“val”] - ‘attr’ 속성의 값에 “val”이 포함되는 E태그 선택

E[attr^=“val”] - ‘attr’ 속성의 값이 “val”로 시작하는 E태그 선택

E[attr$=“val”] - ‘attr’ 속성의 값이 “val”로 끝나는 E태그 선택

E[attr*=“val”] - ‘attr’ 속성의 값에 “val”’이 포함되는  E태그 선택

E[attr|=“val”] - ‘attr’ 속성의 값이 정확하게 “val” 이거나 “val~”로 시작되는 E태그 선택