CSS 선택자 (selector)의 정의와 사용법

CSS를 다루는 데 있어서 가장 기초적이고 기본적이고 핵심 적인 것이 바로 CSS 선택자의 활용이죠.

CSS의 선택자 문법은 다음과 같죠.

선택자 { 속성:값}

/*example*/
select {position:absolute}
#selector { position:absolute; }
.selector { postition:absolute; }

이런 선택자는 우리가 CSS의 스타일을 적용하고 싶은 특정 대상을 제한하고 지정하는 것을 지칭하는 것이죠. 쉽게 생각하면 타깃이라고 여겨도 무방합니다.

위에서 예를 든 선택자 3종에 대해서 일단 알아보죠.

 

요소 선택자 (type Selector)

아무런 기호가 없이 오는 단어는 html 태그의 Element요소입니다.

a, p, div, table, li, ul, input, img 등등의 html 태그를 지정할 떄는 태그를 써주면 됩니다.

하지만 태그에 스타일을 걸어버리게 되면, 문서 전체에 걸쳐서 그 태그는 지정한 속성으로만 동작하게 되니까, 태그 고유의 디폴트 속성에서 벗어나버리게 되죠. 규모가 큰 프로젝트에서는 굉장히 골치 아파집니다.

 

ID 선택자(id selector)

#으로 시작하는 선택자입니다. 보통 태그의 속성으로 id="id명"으로 할당한 경우 해당 id값을 가진 요소를 선택합니다.

id는 페이지 내에서는 오직 한 요소만이 가져야 합니다. 

물론 CSS의 속성은 중복되어 있어도 적용되긴 합니다만, html문서 기술상에서는 id는 오직 페이지 내에서는 고유한 값을 가져야 합니다.

<div id="cssIdSelector"></div>

<style>

#cssIdSelector { postion:absolute; width:200px; height:100px}

</style>

 

클래스 선택자 (class selector)

.으로 시작된 선택자들입니다. id가 오직 한 개체에만 속성을 부여할 수 있는데 반해서, class는 많은 요소에 공통적으로 적용코자 할 때 사용합니다.

id와 class가 동시에 다른 속성으로 적용될 때에는 id값이 우선됩니다.

<div id="cssIdSelector" class="cssClassSelector"></div>

<style>

#cssIdSelector { postion:absolute; width:200px; height:100px}

.cssClassSelector{ postion:absolute; width:100px; height:200px}

</style>

위의 세가지는 기본적으로 요소 자체를 선택할 때 직접적인 선택자에 해당됩니다.

CSS는 상속이라는 개념을 가지고 있는데요.

특별하게 기술하지 않은 스타일의 경우에는 부모의 속성을 물려받게 됩니다.

그리고 그러한 속성의 가장 끝판왕이라고 할 수 있는 최초의 속성!

태초에 빛이 있었으니... 별빛과 닮은 *선택자입니다.

 

전체 선택자 (universal selector)

무차별적으로 모든 요소들에 대해 속성을 지정하겠다는 뜻입니다.

보통은 공통적용되는 CSS페이지의 최상단에 기술해 놓으면서 대체로 웹사이트 전체의 폰트의 속성을 정의할 때 가장 많이 사용됩니다.

* { font-size:12px; font-familyt:'돋움',dotum;}

과 같이 적용합니다.

 

직계 자식 선택자 (child selector)

>를 사용하는 선택자인데요. 

특정된 요소의 바로 아래 자식을 지칭할 때 사용됩니다.

body > p { font-size:14px}

과 같이 적용되면, html문서상에서 div 등 어떤 것에도 쌓여 있지 않은 p태그의 요소에만 폰트 사이즈가 14px로 적용됩니다.

<style>

#testSelector1 > p { font-size:14px}

</style>

<div id="testSelector1">

<div><p>소라넷 주소 좀 고정해라!</p></div>

<p>보배드림 페라리녀는 베이글녀!</p>

</div>

위와 같은 경우는 "보배드림 페라리녀는 베이글녀!"만 폰트사이즈가 14px로 변경되고, "소라넷 주소 좀 고정해라!"는 영향을 받지 않게 되죠.

 

자손 선택자 (descendant selector)또는 문맥 선택자 (contextual selector)

위의 자식 선택자가 직계 자식만 특정하는 것에 반해서, 자손선택자는 몇 대 자손인지 상관없이 속성이 상속됩니다.

선택자의 형식은 공백입니다.

<style>

#testSelector2 p { font-size:14px}

</style>

<div id="testSelector2">

<div><p>소라넷 주소 좀 고정해라!</p></div>

<p>보배드림 페라리녀는 베이글녀!</p>

</div>

 

직계자식 선택자의 적용 때와 달리  "보배드림 페라리녀는 베이글녀!", "소라넷 주소 좀 고정해라!" 두 문장 모두 폰트 사이즈가 14px로 변경됩니다.

 

인접 형제 선택자 (Adjacent sibling selector)

요소 +나 ~,^ 요소의 형태로 사용됩니다.

역시 강력한 능력을 발휘하는 선택자입니다.

이 부분에 대해서만 별도로 포스팅해두었습니다.

2019/08/16 - [Lect & Tip/html, css, scss] - ~ + 인접 형제 선택자를 이용한 No javascript 토글 상세검색 화면 CSS만으로 퍼블리싱하기

 

부정 선택자 :not selector

부정 선택자는 잘 쓰면 스타일 작성이 굉장히 간결해집니다.

이에  관해서는 다음 링크를 참조하세요.

2019/08/30 - [Lect & Tip/html, css, scss] - css3 :not 선택자

 

자손/자식 선택자 + 전체 선택자

전체 선택자가 단독으로 쓰이면 문서 전체에 영향을 끼치지만, 자손 혹은 자식 선택자와 함께 사용하면, 자손 혹은 자식 모두를 지칭하게 됩니다.

<style>

#testSelector3 > * { font-size:14px}

</style>

<div id="testSelector3">

<div><p>소라넷 주소 좀 고정해라!</p></div>

<p>보배드림 페라리녀는 베이글녀!</p>

<div>아프리카티비 bj 4대여신 박현서 짱!</div>

</div>

위의 예시에서는 "보배드림 페라리녀는 베이글녀!"와 "아프리카티비 bj 4대 여신 박현서 짱!"문장만 14px의 폰트 사이즈로 변경됩니다.

전체 선택자에 의해서 

<div><p>소라넷 주소 좀 고정해라!</p></div>

문장은 p요소 하부까지 12px로 지정되었죠.

#testSelector3 > * { font-size:14px}

에 의해서는 

<div><p>소라넷 주소 좀 고정해라!</p></div> 

p 요소는 영향을 받지 못합니다. 

그러니 처음에 선언된 12px 폰트 사이즈만 따르게 됩니다.

<p>보배드림 페라리녀는 베이글녀!</p>

<div>아프리카티비 bj 4대여신 박현서 짱!</div>

는 

#testSelector3 > * { font-size:14px}

의 영향을 받게 되는 것이죠.

 

속성 선택자 (attributor selector)

구체적인 속성을 지닌 요소에 대해서만 특정되는 선택 자요.

주로 input 태그의 변종들에 적용하게 되는데요.

input[type=text] { font-weight:bold}
input[type=checkbox] { margin:0; padding:0}

와 같이 사용합니다.

 

의사 선택자 (pseudo Selector)

의사 선택자는 의사 클래스 선택자와 의사 요소 선택자로 나뉘는데요.

의사 클래스 선택자 (pseudo-class selector)

:link, :visited, :active, :hover, :focus, :lang

:first-child (요소의 첫 번째 자식을 특정함)

:last-child (CSS3에서만 적용됨, IE9+이상만 인식됨)

의사 요소 선택자 (pseudo-element selector)

:first-line 문단의 첫 번째 줄에 적용 (블록 속성을 가진 요소에만 적용됨)

:first-letter 첫 번째 문자를 특정함 (블록 속성을 가진 요소에서만 적용)

:before 요소의 내용 앞에 내용을 생성함(content속성을 반드시 써야 함)

:after 요소의 내용 뒤에 내용을 생성함(content속성을 반드시 써야 함)

의사 선택자는 좀 더 할 말이 많기 때문에 소개만 하고 사용법은 다음 포스팅에서 다룰게요.

출처: https://www.vouloir.kro.kr/entry/CSS-선택자-selector의-정의와-사용법 [블루아르2019]