CSS 선택자(Selector) - (1) 기본 선택자

CSS 선택자란?

HTML 문서에 작성한 요소에 CSS효과를 적용하려면 효과를 적용할 특정한 요소를 선택해야 합니다.
이 때, 특정 요소를 선택하기 위해 사용하는 것을 CSS 선택자라고 합니다.

 

1. 태그 선택자
2. id 선택자
3. class 선택자
4. 속성 선택자
5. 전체 선택자

 

<!-- 예시 -->
<p id="title"> 안녕하세요.  </p>
<p class="content"> CSS를 공부하고 있습니다. </p>
<p name="ment"> 감사합니다. </pre>
<p name="date"> 2022년 10월 9일 드림 </pre>

 

1. 태그 선택자

선택자의 종류에는 여러가지가 있는데, 기본적으로 태그 이름을 선택자로 사용할 수 있습니다.

 

예를 들어, 위에 보여드린 <예시>에서 <p> 태그로 묶인 문단의 글자 색을 바꾸고 싶다면

p{ color: red; }

태그 이름인 p를 적고 중괄호를 연 후 CSS코드를 작성하면  p태그의 글자 색이 빨간색으로 바뀌게 됩니다. 

이 때 CSS 효과는 문서 내에 있는, 동일한 종류의 모든 태그에 적용됩니다.

 

<예시>에 있는 네 문단은 전부 <p> 태그로 묶여있으므로, 글자가 전부 빨간색으로 바뀌게 됩니다.

 

 

2. id 선택자

   #id명{ css 코드; }    

id 선택자를 사용하면 특정한 id를 속성으로 가진 요소에만 CSS 효과를 적용할 수 있습니다.

 

<예시> 의 p태그 중 id='title' 속성을 가진 문단만을 지정해서 글자색을 빨간색으로 바꾸고 싶다면

#title{ color: red;}

id임을 표시하기 위해 '#' 을 적은 후, id명인 title을 선택자로 적은 후 CSS 코드를 작성하면 됩니다.

2. class 선택자

   .class명{ css 코드; }    

class속성 또한 id 선택자와 비슷한 방식으로 선택할 수 있습니다. 

 

# 대신 class임을 나타내기 위해 ' . '을 붙여주면 됩니다.

.content{ color: green; }

위와 같이 작성하면 content를 클래스로 가진 요소의 글자가 녹색으로 바뀌게 됩니다.

 

3. 속성 선택자

속성 선택자는 특정한 속성이나 속성값을 가진 요소를 선택할 때 사용할 수 있는 선택자입니다.

•  태그[ 속성 ]  태그 중 특정한 속성을 가진 태그만 선택하는 선택자입니다. 
•  태그[속성 = 특정값 ]   태그의 속성이 가진 속성값이 입력한 특정값과 정확히 일치하는 경우 선택하는 선택자입니다.
•  태그[속성 ~= 특정값]  한 속성이 여러 속성값을 가지고 있을 때, 여러 속성값 중에 특정값이 있으면 선택하는 선택자입니다.
•  태그[속성 |= 특정값]  속성값이 특정값과 같거나, 입력한 속성값으로 시작하면서  뒤에 ' - '가 붙는 태그를 선택하는 선택자입니다.
•  태그[속성 ^= 특정값]  속성값이 특정값으로 시작하는 경우 선택하는 선택자입니다.
•  태그[속성 $= 특정값]  속성값이 특정값으로 끝나는 경우 선택하는 선택자입니다.
•  태그[속성 *= 특정값]   속성값이 특정값을 포함하고 있는 경우 선택하는 선택자입니다.

<예시>에서 <p>태그로 묶인 문단 중  name  속성을 가진 문단만 선택해 글자 색을 주황색으로 바꾸고 싶다면

아래와 같이 작성하면 됩니다.

p[ name ]{ color : orange; }

 

만약  name  속성을 가진문단 중 마지막 문단의 색만 주황색으로 바꾸고 싶다면

아래와 같이  name 의 속성값을 추가로 입력해서 선택할 수 있습니다.

p[ name="date" ]{ color : orange; }

 

 

4. 모든 요소 선택자

선택자로 *을 입력하면, 모든 요소를 선택할 수 있습니다.

*{font-weight: bold;}

위와 같이 작성하면, <예시>에 있는 모든 요소가 선택되고 CSS 효과가 적용됩니다.