[CSS] CSS의 기본 선택자(Simple Selectors)

CSS는 선택자(ex. h1, .class 등)를 잡아 HTML 요소에 스타일을 준다.

CSS가 선택자를 잡는 기준은 5가지로 나눌 수 있다.

1. Simple Selectors(요소의 name,id,class를 기준으로 선택 - 일반적인 방법)
2. Combinator Selectors(요소 간의 관계를 기준으로 선택)
3. Pseudo-class Selectors(요소의 특정 상태를 기준으로 선택)
4. Pseudo-elements Selectors(요소의 특정 부분을 선택)
5. Attribute Selectors(요소가 가진 속성이나 속성의 값으로 선택)

이번 글에서는 Simple Selectors에 대해서 알아보겠습니다.

Simple Selectors(요소의 name, id, class를 기준으로 선택)

 

1) name을 기준으로 선택

/* h1 요소에 글자색 속성을 빨간색으로 정의 */
/* h1이 <h1> 요소의 name */

h1{
    color : red;
}

 

2) class를 기준으로 선택

/* <h1 class='test'></h1> 다음과 같은 요소가 존재 */
/* 클래스명(test) 앞에 마침표('.')를 적어 class임을 나타낸다 */

.test{
    color : red;
}

+

요소(elements)는 1개 이상의 클래스를 가질 수 있다.

/* 두개의 class('test'와 'example')를 가지는 요소 */ 

<h1 class='test example'></h1>

3) id를 기준으로 선택

/* <h1 id='test'></h1> 다음과 같은 요소가 존재 */
/* id명(test) 앞에 샵('#')를 적어 id임을 나타낸다 */

#test{
    color : red;
}

4) 모든 요소를 선택

/ 별표('*')를 이용하여 페이지에 있는 모든 요소를 선택 */
* {
    color : red;
}

 

+

콤마(' , ')를 기준으로 여러 선택자에 한꺼번에 같은 스타일을 줄 수 있다.

h1, h2 { color : red; }
.class1, class2 {color : red; }
#id1, #id2 { color : red; }

 

참고 - "Learn CSS" W3School (https://www.w3schools.com)