CSS 선택자(Selector)

Definition

스타일 규칙은 태그뿐만 아니라 웹 문서 어떤 요소에도 적용 가능합니다. 선택자는 웹 문서에서 어느 부분에 스타일을 적용할 것인지 알려주는 것입니다. 선택자를 사용하는 방법은 미리 약속되어 있습니다.

전체 선택자

문서의 모든 요소에 스타일을 적용할 때 사용하는 선택자입니다.

* { 속성:값; }

<!-- 전체 선택자 사용전 -->
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>선택자(Selector) Test</title>
</head>
<body>
  <img src="images/loopy.png">
</body>
</html>

<!-- 전체 선택자 사용후 -->
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>선택자(Selector) Test</title>
  <style>
    * {
      margin:0;
      padding:0;
    }
  </style>
</head>
<body>
  <img src="images/loopy.png">
</body>
</html>

타입(Type) 선택자

특정 tag를 사용한 모든 요소에 style을 적용하는 것이 가능합니다.

tag명 { 속성:값; }

<!DOCTYPE html>
<html lang="ko">
<link>
  <meta charset="UTF-8">
  <title>Type 선택자 test</title>
  <style>
    p {
      color: blue;
    }
  </style>
</head>
<body>
  <h1>heading 1</h1>
  <p>단락 정보 1</p>
  <p>단락 정보 2</p>
  <p>단락 정보 3</p>
</body>
</html>

클래스(Class) 선택자

다른 tag값을 가질지라도 특정 부분을 선택해서 스타일을 적용하고 싶다면, Class 선택자를 사용하면 됩니다.

.Class명 { 속성:값; }

<!DOCTYPE html>
<html lang="ko">
<link>
  <meta charset="UTF-8">
  <title>Class 선택자 test</title>
  <style>
    p {
      color: blue;
    }
    .x {
      background-color: burlywood;
    }
    .y {
      font-style: italic;
      border: 1px solid red;
    }
  </style>
</head>
<body>
  <h1 class="x y">heading 1</h1>
  <p>단락 정보 1</p>
  <p class="x">단락 정보 2</p>
  <p>단락 정보 3</p>
</body>
</html>

아이디(ID) 선택자

특정 부분을 선택해서 스타일을 적용하고 싶다면, ID 선택자를 사용하면 됩니다.

#ID명 { 속성:값; }

<!DOCTYPE html>
<html lang="ko">
<link>
  <meta charset="UTF-8">
  <title>ID 선택자 test</title>
  <style>
    #x {
      background-color: burlywood;
    }
  </style>
</head>
<body>
  <h1 id="x">heading 1</h1>
  <p>단락 정보 1</p>
  <p>단락 정보 2</p>
  <p>단락 정보 3</p>
</body>
</html>

'Study > CSS' 카테고리의 다른 글

텍스트를 스타일하는 방법 (0)	2021.10.08
스타일 작성 규칙(Syntax) (0)	2021.10.07
Introduction to CSS (0)	2021.10.05