CSS 선택자 | Notion

기본 선택자 사용하기

전체 선택자

전체 선택자는 HTML에서 사용할 수 있는 모든 요소를 한 번에 선택자로 지정하는 방법이다. 이는 * 기호를 사용해 표시된다(정규식을 생각하면 편하다).

<!DOCTYPE html>
<html lang="ko">
 <head>
  <title>hi~~~</title>
  <style>
   *{
    color:green;
   }
  </style>
 </head>
 <body>
  <h1>hihi</h1>
  <h2>hihihi</h2>
  <p>bye!!</p>
 </body>
</html>

Untitled

태그 선택자

태그 선택자는 HTML의 태그명으로 선택자를 지정하는 방법이다.

<!DOCTYPE html>
<html lang="ko">
 <head>
  <title>hi~~~</title>
  <style>
   h2{
    color:red;
   }
  </style>
 </head>
 <body>
  <h1>hihi</h1>
  <h2>hihihi</h2>
  <p>bye!!</p>
 </body>
</html>

Untitled

아이디 선택자

아이디 선택자는 HTML 태그에서 사용할 수 있는 id 속성값을 이용해 선택자를 지정하는 방법이다. 이 때 속성값 앞에는 # 기호를 붙여 구분한다.

<!DOCTYPE html>
<html lang="ko">
 <head>
  <title>hi~~~</title>
  <style>
   #home{
    color:red;
   }
  </style>
 </head>
 <body>
  <h1 id="home">hihi</h1>
  <h2>hihihi</h2>
  <p id="home">bye!!</p>
 </body>
</html>

Untitled

클래스 선택자

클래스 선택자는 HTML 태그에서 사용할 수 있는 class 속성값을 이용해 선택자를 지정하는 방법이다. 이 때 속성값 앞에 . 기호를 붙인다.

<!DOCTYPE html>
<html lang="ko">
 <head>
  <title>hi~~~</title>
  <style>
   .c1{
    color:red;
   }
   .c2{
    color:blue;
   }
  </style>
 </head>
 <body>
  <h1 class="c1">hihi</h1>
  <h2 class="c2">hihihi</h2>
  <p>bye!!</p>
 </body>
</html>

Untitled

기본 속성 선택자

속성 선택자는 HTML 태그에서 사용할 수 있는 속성과 값을 사용해 선택자를 지정하는 방법이다.