thinkNote

▶ 선택자는 스타일을 지정할  HTML 요소를 선택한다.

■ CSS 선택자

▶ CSS 선택자는 5개 항목으로 분류한다.

▷ 간단 선택자 ( name, id, classs 기반으로 요소를 선택 )

▷ 결합 선택자  ( 요소 간의 특정 관계를 기반으로 요소를 선택 )

▷ 의사-클래스 선택자 ( 특정 상태를 기반으로 요소 선택 )

▷ 의사-요소 선택자 ( 요소의 일부 선택 및 스타일 지정 )

▷ 속성 선택자 ( 속성 또는 속성 값을 기반으로 요소 선택 )

▶ 이번 글에서는 가장 기본적인 CSS 선택자를 설명한다.

■ CSS 요소 선택자

p {
  text-align: center;
  color: red;
}

실습 : https://www.w3schools.com/css/tryit.asp?filename=trycss_syntax_element 

■ CSS id 선택자

▶ id 선택자는 특정 요소를 선택할 HTML 요소의 "id" 속성을 사용한다.

▶ 요소의 id는 한 페이지안에서 유일해야 하기에 id 선택자는 유일한 하나의 요소를 선택하는데 사용된다.

▶ 특정 id를 가진 요소를 선택하려면 해시(#) 문자 뒤에 요소의 id를 사용한다.

#para1 {
  text-align: center;
  color: red;
}

실습 : https://www.w3schools.com/css/tryit.asp?filename=trycss_syntax_id 

※ id 이름은 숫자로 시작할 수 없다

■ CSS class 선택자

▶ class 선택자는 특정 "class" 속성을 가진 HTML 요소를 선택한다.

▶ 특정 class를 가진 요소를 선택하려면 점( . ) 문자 뒤에 요소의 class 이름을 사용한다.

.center {
  text-align: center;
  color: red;
}

실습 : https://www.w3schools.com/css/tryit.asp?filename=trycss_syntax_class 

▶ 특정 HTML 요소만 클래스의 영향을 받도록 지정할 수도 있다.

p.center {
  text-align: center;
  color: red;
}

실습 : https://www.w3schools.com/css/tryit.asp?filename=trycss_syntax_element_class 

▶ HTM L요소는 하나 이상의 class 를 참조할 수 있다.

<p class="center large">This paragraph refers to two classes.</p>

실습 : https://www.w3schools.com/css/tryit.asp?filename=trycss_syntax_element_class2 

※ class 이름은 숫자로 시작할 수 없다.

■ CSS 범용 선택자

▶ 범용 선택자( * )는 페이지의 모든 HTML 요소를 선택한다.

* {
  text-align: center;
  color: blue;
}

실습 : https://www.w3schools.com/css/tryit.asp?filename=trycss_syntax_universal 

■ CSS 그룹화 선택자

▶ 그룹화 선택자는 스타일 정의가 동일한 모든 HTML 요소를 선택한다.

h1 {
  text-align: center;
  color: red;
}

h2 {
  text-align: center;
  color: red;
}

p {
  text-align: center;
  color: red;
}

▶ 코드를 최소화하려면 선택자를 그룹화하는 것이 좋다.

▶ 선택자를 그룹화하려면 각 선택자를 쉼표( , )로 구분한다.

h1, h2, p {
  text-align: center;
  color: red;
}

실습 : https://www.w3schools.com/css/tryit.asp?filename=trycss_grouping 

출처 : https://www.w3schools.com/css/css_selectors.asp