[CSS] 선택자(Selector)에 대하여 (전체, 태그, 클래스, 아이디)

CSS 선택자(Selector)란?

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

 

 

 전체 선택자(Universal Selector) 

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

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

 

See the Pen 전체 선택자 by wjdxo513 (@wjdxo513) on CodePen.

 

전체 선택자를 활용하여 글씨는 붉은색, margin은 0으로 설정해 봤습니다. 이렇게 전체 선택자는 주로 문서의 여백이나 글꼴 크기 등 웹 문서의 기본 스타일을 초기화할 때 사용합니다. 예를 들어 웹 문서를 브라우저에 표시할 때 브라우저 창에 바짝 붙지 않도록 문서 내용 바깥쪽에는 '마진'을 두고 문서 내용 안쪽에는 '패딩'이라는 여백을 두는데 이런 여백 때문에 디자인이 깔끔하지 않을 경우, 전체 선택자를 사용하여 웹 문서 전체에 마진과 패딩 여백을 0으로 지정할 수 있습니다.

 

 

 태그 선택자(Tag Selector) 

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

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

 

See the Pen 태그 선택자 by wjdxo513 (@wjdxo513) on CodePen.

 

위와 같이 하나의 태그에서만 css를 지정할 수 있고 같은 속성값이라면 여러 개의 태그들을 한 번에 CSS를 지정하실 수도 있습니다. 이렇게 CSS를 정의하면 웹 문서의 모든 대상 태그에게 스타일이 적용됩니다.

 

 

 클래스 선택자(Class Selector) 

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

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

 

See the Pen 클래스 선택자 by wjdxo513 (@wjdxo513) on CodePen.

 

위와 같이 하나의 클래스에서만 css를 지정할 수 있고 같은 값이라면 여러 개의 클래스들을 한 번에 지정하실 수도 있습니다. 그리고 특정 태그에서만 클래스를 지정하실 수도 있습니다. 

 

 

 아이디 선택자(ID Selector) 

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

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

 

See the Pen id 선택자 by wjdxo513 (@wjdxo513) on CodePen.

 

마침표(.) 대신 #기호를 사용한다는 점만 제외하면 클래스 선택자와 사용법이 같습니다.

 

 

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

class 선택자

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

 

id 선택자

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

 

※ 복합선택자가 궁금하시다면 아래 글을 참고해 주세요.

[CSS] 복합 선택자(Combinators)에 대하여 (일치, 자식, 후손, 인접형제, 일반형제)

 

댓글

Designed by JB FACTORY