[CSS] 선택자(Selector)

css 선택자(Selector)  란 ?

CSS에서는 스타일 속성을 적용하는 요소들을 선택자라고 합니다. CSS 문법에서는 가장 앞에 나오는 대상이 되는 타겟을 의미하며 이를 통해 스타일을 적용할 수 있게 됩니다. 이 선택자는 태그의 전체가 될 수도 있고, 때로는 여러 개의 요소들을 묶어 별도의 선택자로 만들 수도 있습니다. 

 

전체 선택자(Universal Selector)

/* 사용법 */
*{속성 : 속성값;}

전체 선택자는 말 그대로 스타일의 모든 요소에 적용할 때 사용합니다. 주로 모든 하위 요소에 한꺼번에 스타일을 적용할 때 사용하며 전체 선택자로는 *(별표)를 사용합니다. 

 

태그 선택자(Tag Selector)

/* 사용법 */
tag명{속성 : 속성값;}
tag명1, tag명2{속성 : 속성값;} /* 여러개 태그 한번에 */

태그 선택자(Tag Selector)는 특정 태그가 쓰인 모든 요소에 스타일을 적용합니다. 전체 선택자 다음으로 범위가 넓으며 해당 태그를 사용하는 모든 요소에 적용됩니다.

 

클래스 선택자(Class Selector)

/* 사용법 */
.class명{속성 : 속성값;}
.class명1, .class명2{속성 : 속성값;} /* 여러개 class 한번에 */
tag명.class명 /* 특정 태그의 class에만 스타일 지정 */

같은 태그라도 스타일을 다르게 분리하여 사용하고 싶다면 어떻게 해야 할까요? 이렇게 특정 태그에서 스타일을 다르게 지정하려고 할 때 사용하는 것을 클래스 선택자(Class Selector)라고 합니다. 클래스 선택자는 태그 대신 클래스 이름을 사용하시면 되는데 앞에 태그를 명시해주어 특정 태그에만 클래스 선택자를 적용하실 수도 있습니다. 클래스 선택자는 클래스 이름 앞에는 반드시 마침표(.)를 붙이셔야 하고 클래스 이름은 태그명과 겹치지 않게 설정해주셔야 합니다. 

 

아이디 선택자(ID Selector)

/* 사용법 */
#id명{속성 : 속성값;}
#id명1, #id명2{속성 : 속성값;} /* 여러개 id 한번에 */
tag명#id명 /* 특정 태그의 id에만 스타일 지정 */

id선택자도 클래스 선택자와 마찬가지로 웹 문서 안의 특정 부분에 스타일을 지정할 때 사용합니다. 클래스 선택자와 id선택자의 가장 큰 차이는 클래스 선택자가 문서 안에서 여러 번 적용할 수 있는 스타일인 반면, id 선택자는 문서 안에서 한 번만 적용할 수 있다는 것입니다. id 선택자는 중복해서 사용할 수 없기 때문에 주로 문서의 레이아웃과 관련된 스타일을 지정하거나 자바스크립트 프로그램에서 웹 요소를 구분하기 위해 자주 사용합니다.

 

class선택자와 id선택자의 차이점

 

class 선택자

• 동일한 이름으로 사용이 가능하다.
• 동일한 여러 곳에서 적용하여 사용이 가능하다.
• CSS표시는 .

 

id 선택자

• 동일한 이름으로 사용이 불가능하다.
• 한 곳에서만 적용해서 사용이 가능하다.
• CSS표시는 #