선택자 (selector)
1. 선택자란?
기존 HTML 스타일링은 HTML 문서 내에서 이뤄졌고 태그 내에 일일히 스타일링을 적용해야했다.
하지만 CSS가 등장하면서 태그에 대한 접근법이 달라졌다.
CSS 문서를 외부에 만들거나 <style> 태그 내에 따로 적용하면 당연히 HTMl과 CSS는 분리될 수 밖에 없다.
그리고 HTML 문서에서 원하는 부분에 스타일을 적용하기 위한 것이 바로 선택자다.
선택자는 CSS를 통해 HTML 문서 내에서 스타일을 적용하려는 부분을 지정하는 것을 말한다.
2. 다양한 선택자
태그선택자
선택자로 태그(tag)로 지정하면 <body> 태그 내의 해당 태그를 가진 모든 태그에 스타일이 적용된다.
아래와 같은 경우 <div> 뿐 아니라 <div>의 자손으로 있는 <p>까지 스타일이 적용된다.
<body>
<style>
div{ font-size: 50px; }
</style>
<div> div 태그입니다. </div>
<div>
<p> div 태그입니다 - 1 </p>
<p> div 태그입니다 - 2 </p>
<p> div 태그입니다 - 3 </p>
<div>
</body>
클래스 선택자
스타일 적용하려는 태그에 class 값을 준 뒤 해당 클래스 값을 선택자로 지정할 수 있다.
해당 클래스 값을 선택자로 지정할 땐 앞에 점 ( . )을 찍어줘야 한다.
클래스는 동일한 값을 여러 태그에 적용할 수 있다.
그래서 성격 등이 비슷한 태그는 하나의 클래스로 묶어서 스타일 적용이 가능하다.
|
.class 명 { 속성 : 속성값 } |
<body>
<style>
.hi p{ font-size: 50px; }
</style>
<p class="hi"> 안녕하세요! </p>
</body>
id 선택자
스타일을 적용하려는 태그에 id값을 준 뒤 해당 id 값을 선택자로 지정할 수 있다.
해당 id 값을 선택자로 지정할 땐 앞에 샵 ( # )을 붙여주면 된다.
id값은 단 한개만 지정할 수 있어서 id값을 여러개태그에 적용하려면 매번 id 값을 새로 적어야 한다.
|
#아이디 명 { 속성 : 속성값 } |
<body>
<style>
#hello { font-size: 50px; }
</style>
<p id="hello"> 안녕하세요! </p>
</body>
그룹 선택자
쉼표 ( , )를 쓰면 여러 개 태그를 동시에 선택자로 지정할 수 있다.
|
태그명, 태그명.... { 속성 : 속성값 } |
<body>
<style>
div, p { font-size: 50px; }
</style>
<div> div 태그입니다. </div>
<p> p 태그입니다. </p>
<div>
<p> div 태그입니다 - 1 </p>
<p> div 태그입니다 - 2 </p>
<p> div 태그입니다 - 3 </p>
</div>
</body>
속성 선택자 1
지정된 어트리뷰트(속성)을 갖는 모든 요소를 선택한다.
|
요소[속성]{ 속성: 속성값 } |
<body>
<style>
a[href]{ color: red;}
</style>
<a href="#"> 첫번째 링크 </a><br> // 글자 빨간색으로 변경
<a href="#"> 두번째 링크 </a><br> // 글자 빨간색으로 변경
<a href="#"> 세번째 링크 </a><br> // 글자 빨간색으로 변경
</body>
속성 선택자 2
지정된 어트리뷰트(속성)과 속성이 가진 속성값이 일치하는 요소를 선택한다.
|
요소[속성="속성값"]{ 속성: 속성값 } |
<body>
<style>
a[href="naver.com"]{ color: red;}
</style>
<a href="naver.com"> 첫번째 링크 </a><br> // 빨간색으로 글자색 변경
<a href="google.com"> 두번째 링크 </a><br>
<a href="daum.net"> 세번째 링크 </a><br>
</body>
후손 셀렉터
후손 셀렉터는 스타일을 적용하려는 요소의 자손 즉 한단계 두단계 이하의 자손들까지 다 적용되는 것을 이야기한다.
예시로 보면 더욱 알기 쉽다.
아래와 같은 예시는 요소 A아래 요소 B를 선택하는 것이다.
그리고 이때는 A요소 아래 모든 요소 B(바로 한단계 아래 자식 요소 뿐 아니라 모든 후손 요소)를 선택하는 것이다.
|
요소A 요소B { 속성: 속성값 } |
<body>
<style>
div p{color: red;}
</style>
<div>
<p> 첫번째 </p> // 붉은 색으로 글씨 색상 변경
<p> 두번째 </p> // 붉은 색으로 글씨 색상 변경
<p> 세번째 </p> // 붉은 색으로 글씨 색상 변경
<span><p>네번째</p></span> // 붉은 색으로 글씨 색상 변경
<span>
<span>
<p>다섯번째</p> // 붉은 색으로 글씨 색상 변경
</span>
</span>
</div>
</body>
자식 셀렉터
후속 셀렉터는 편해보이지만 본인이 원하지 않은 요소까지 선택될 수 있다.
이때는 자식 셀렉터를 쓰면 선택된 요소 바로 한단계 아래 요소만 선택이 가능하다.
|
요소A > 요소B { 속성: 속성값 } |
<body>
<style>
div > p{color: red;}
</style>
<div> dd
<p> 첫번째 </p> // 글씨 색상 빨간색으로 변경
<p> 두번째 </p> // 글씨 색상 빨간색으로 변경
<p> 세번째 </p> // 글씨 색상 빨간색으로 변경
<span><p>네번째</p></span>
<span>
<span>
<p>다섯번째</p>
</span>
</span>
</div>
</body>