[CSS] 셀렉터 1

"셀렉터" 

셀렉터란, CSS에서 스타일을 적용할 요소를 선택할 수 있게 해주는 요소 입니다.

셀렉터는 스타일의 적용 상황이 모두 다르듯 그 종류가 굉장히 방대합니다.

이번 포스트에서는 자주 쓰이는 셀렉터 몇가지를 소개하겠습니다.

 

---

1. 전체 셀렉터

이름이 말해주듯 모든 요소에 스타일을 적용하는 셀렉터입니다. 사용법은 간단하게 '*'를 사용합니다.

* { 속성: 속성 값; }

 

 

2. 태그 셀렉터

태그 셀렉터는 특정 태그를 선택하여 그 태그에 스타일을 적용합니다. '태그명'을 통해 적용시킵니다.

태그명 { 속성: 속성 값; }

 

태그 셀렉터 (b태그 css적용)

3. 클래스 셀렉터

클래스 셀렉터는 일부분에만 다른 스타일을 적용하는 경우에 사용합니다. 클래스를 사용하기 위해서는 태그 안에 클래스명을 명시하고 css에서 반드시  .(점)을 통해 지정해주어야 합니다.

 아래 예제에서 전체 셀렉터로 파란글씨를 적용해놨지만 클래스 셀렉터를 통해 특정 부분에만 붉은 글씨를 적용시킨 모습을 보여줍니다.

[ HTML ]
<태그 class = "클래스 이름">

[ CSS ]
.클래스 이름 { 속성: 속성 값; }

 

클래스 셀렉터

 

4. ID 셀렉터

ID 셀렉터도 또한 특정부분에 스타일을 적용하기 위해서 사용합니다. id 셀렉터는 #으로 셀렉터를 지정합니다. 이렇게 보면 클래스와 ID는 차이가 없어보이지만 두 속성은 알고보면 사뭇 다른점을 가지고 활용방법이 달라집니다. 클래스와 ID, 두 속성의 차이점은 바로 아래서 설명드리겠습니다.

[ HTML ]
<태그 id = "id 이름">

[ CSS ]
#id 이름 { 속성: 속성 값; }

 

ID 셀렉터

 

4+.  클래스와 ID의 차이점

위에서 본대로라면 .과 #으로 지정하는것 외에는 클래스와 아이디는 차이가 없어보입니다. 그렇다면 클래스와 id가 가지는 차이점은 무엇일까요?

 우선 지난 캐스캐이딩 포스트에서 봤듯이 id가 우선 적용된다는 특징을 가지고 있습니다. 그 밖에 큰 차이점은 클래스는 한 문서에서 여러번 쓰일 수 있지만 id는 한 문서에서 딱 한 번만 사용이 가능하다는 차이점을 가지고 있습니다.

 

예를들어 3학년 10반이라고 하면 그 안에는 3학년 10반이라는 소속의 학생이 1명일 수도 있고 10명, 20명, 30명 일 수도 있습니다. 하지만 3학년 10반 1번이라는 학생은 학교 안에서 딱 한 명 존재합니다. 이런식으로 클래스와 아이디는 차이점을 가지고 있습니다.

보시다시피 클래스는 클래스명을 중복 사용함으로써 다른 클래스의 요소를 합치거나 할 수 있지만 id는 별개의 요소로 처리해 버리기 때문에 id3에서는 아무런 효과도 나타나지 않았음을 알 수 있습니다.

 

5. 그룹 셀렉터

그룹 셀렉터는 여러개의 요소에 같은 스타일을 적용하고 싶을 때 사용합니다. 예를들면 h태그와 strong태그에 같은 효과를 주고싶다고 하면 그룹 셀렉터로 묶어서 같은 효과를 줄 수 있습니다. 사용법은 간단하게 요소사이에 ,를 넣어주면 됩니다.

요소1, 요소2 { 속성: 속성 값; }

 

그룹 셀렉터

---

 

오늘 포스트에서는 가장 많이 활용되고 기초적인 다섯개의 셀렉터를 알아보았습니다. 그 외에도 여러가지 셀렉터가 존재하는데, 이것들은 다음 포스트에서 다루겠습니다.