티스토리

Lennon FE

검색하기

[CSS3] 셀렉터(Selector)

🧑‍💻 Web/CSS

[CSS3] 셀렉터(Selector)

Lennon 2022. 1. 26. 21:30

728x90

CSS 셀렉터란?

스타일을 적용시키기 위해 HTML에 작성한 요소들에 대해 셀렉터로 특정하고, 선택된 요소에 스타일을 적용한다.

우선 보편적으로 사용하는 전체 셀렉터, 태그 셀렉터, id, class셀렉터를 알아보고,

그 후 후손 셀렉터, 자식 셀렉터, 링크 셀렉터를 알아보도록 하자.

전체 셀렉터

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        color: blue;
      }
    </style>
  </head>
  <body>
    <p id="first-pTag">hi minho</p>
    <p class="second-pTag">hi ddoddo</p>
    <span>hello world!</span>
  </body>
</html>

*

* 으로 셀렉터를 지정하면, html에 있는 모든 요소를 선택하는 걸 의미한다.

어떤 태그든 선택되어 글자색이 파랗게 변할 것이다.

태그 셀렉터

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      p {
        color: red;
      }
    </style>
  </head>
  <body>
    <p>hi minho</p>
    <p>hi ddoddo</p>
  </body>
</html>

html에 태그들에 사용하면 됨(p, div, span, table 등등)

p태그에 대해 글자색을 red로 지정했다. 결과는 다음과 같다.

ID, Class 셀렉터

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #first-pTag {
        color: red;
      }
      .second-pTag {
        color: orange;
      }
    </style>
  </head>
  <body>
    <p id="first-pTag">hi minho</p>
    <p class="second-pTag">hi ddoddo</p>
  </body>
</html>

모두가 알다시피 id셀렉터는 #으로, class 셀렉터는 .으로 시작하면 된다.

둘 개는 비슷하면서 다른 점이 있다. id는 html에서 유일해야하지만, class는 아니다.

셀렉터에서도 class는 여러 값을 지정할 수 있다는 것이다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .first-pTag {
        color: red;
      }
      .second-pTag {
        color: blue;
      }
      .text-font {
        font-size: 50px;
      }
    </style>
  </head>
  <body>
    <p class="first-pTag">hi minho</p>
    <p class="second-pTag text-font">hi ddoddo</p>
    <span id="first-spnaTag">hello world!</span>
  </body>
</html>

hello ddoddo를 포함한 p태그에는 2개의 class가 들어가 있는 걸 확인할 수 있고, 둘 다 적용됨이 확인된다.

class 셀렉터를 이용하는 것은 재사용 측면에서 유리하다.

이제 응용을 해보자.

후손 셀렉터

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div p {
        color: red;
      }
    </style>
  </head>
  <body>
    <div>
      <p class="first-pTag">div p</p>
      <p class="second-pTag text-font">div p2</p>
      <table border="1">
        <tr>
          <td><p>d</p></td>
          <td>d</td>
          <td>d</td>
          <td>d</td>
        </tr>
      </table>
    </div>
    <p>p</p>
  </body>
</html>

div내부에 있는 p태그에 대해 color값을 변동해주었다. 결과값 역시 div내부에 위치한 p태그만 바뀐 것을 확인할 수 있다.

그러나 만약에 div안에 <table>태그에 감싸진 p태그가 있다고 생각해보자. 이것은 그 태그 안에도 적용이 되어 예상하지 못한 결과를 얻을 수 있다. 이는 자식 셀렉터로 해결할 수 있다.

자식 셀렉터

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div > p {
        color: red;
      }
    </style>
  </head>
  <body>
    <div>
      <p class="first-pTag">div p</p>
      <p class="second-pTag text-font">div p2</p>
      <table border="1">
        <tr>
          <td><p>d</p></td>
          <td>d</td>
          <td>d</td>
          <td>d</td>
        </tr>
      </table>
    </div>
    <p>p</p>
  </body>
</html>

div > p 를 이용해 div안에 있는 자식중에 p태그를 고를 수 있다. 후손(table태그)까지 전달이 안 되므로, 예상할 수 있는 값을 얻을 수 있다.

링크 셀렉터

<!DOCTYPE html>
<html>
  <head>
    <style>
      /* 아직 방문하지 않았을 때 폰트 색상 black */
      a:link {
        color: black;
      }

      /* 방문 했을 때 폰트 색상 red로 변경 */
      a:visited {
        color: red;
      }

      /* 마우스가 올라가 있을 때 30px로 조정 */
      a:hover {
        font-size: 30px;
      }

      /* 요소가 클릭 된 상태일 때 색상 오렌지 */
      a:active {
        color: orange;
      }
    </style>
  </head>
  <body>
    <a href="http://www.naver.com" targer="_black">This is a link</a><br />
  </body>
</html>

:link

셀럭터가 아직 방문하지 않은 링크일 때

:visited

셀렉터가 방문한 링크일 때

:hover

셀렉터에 마우스가 올린 상태일 때

:active

셀렉터에 마우스를 클릭된 상태일 때

작성한 것을 제외한 많은 셀렉터들이 있지만, 이 정도만 숙지해도 CSS3를 작성한 HTML에 잘 적용할 수 있을 것이다.

728x90