[WEB2] CSS class와 id 사용하기 & 선택자 우선순위

Rae-eun Yang·2022년 3월 6일

생활코딩 WEBn

목록 보기

15/21

class란 한국어로 반, 학급 이라는 뜻이죠.
따라서 하나의 class는 한 학급으로 묶어주는 역할을 한다고 생각하시면 됩니다.

1) class 사용하기

<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8'>
  <title>웹호스팅으로 웹페이지 공유하기</title>
  <style>
    a {
      color : black;
      text-decoration: none;
    }
  </style>
</head>
<body>
  <h1>어서오세요!</h1>
  <ol>
    <li><a href="1.html" target="_blank">html</a></li>
    <li><a href="2.html" target="_blank">css</a></li>
    <li><a href="3.html" target="_blank">javascript</a></li>
  </ol>
</body>

저번의 예제에서 이러한 코드를 작성했습니다.

그리고 이런 결과를 냈는데요.
여기서!

방문했던 링크는 회색으로 (html, css)
현재 방문하고 있는 링크는 빨간색으로 (css)

표시하고 싶다면, 어떻게 해야할까요?
일일이 style 속성을 넣지 마시고 class 를 사용하시면 편합니다.

<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8'>
  <title>웹호스팅으로 웹페이지 공유하기</title>
  <style>
    a {
      color : black;
      text-decoration: none;
    }
  </style>
</head>
<body>
  <h1>어서오세요!</h1>
  <ol>
    <li><a href="1.html" target="_blank" class="saw">html</a></li>
    <li><a href="2.html" target="_blank" class="saw">css</a></li>
    <li><a href="3.html" target="_blank">javascript</a></li>
  </ol>
</body>

먼저

방문했던 링크는 회색으로 (html, css)

를 해결하기 위해
a 태그의 class 속성을 이용해서 saw라는 class를 정의해주겠습니다.

그렇게 saw라는 class로 html, css를 포함한 a 태그들을 묶어주었는데요.
이것을 한꺼번에 style 태그 안의 css로 처리할 수 있습니다.

  <style>
    a {
      color : black;
      text-decoration: none;
    }
    .saw {
      color : gray;
    }
  </style>

이런 식으로요.
class를 선택자로 지정하려면 class 이름 앞에 . 을 붙여주시면 됩니다!

성공적으로 saw class를 가진 태그의 글자 색상이 회색으로 바뀐 것을 볼 수 있습니다.
그러면

현재 방문하고 있는 링크는 빨간색으로 (css)

는 어떻게 처리하면 될까요?
class는 여러개를 만들 수 있는데요, css의 a 태그에 class를 하나 더 만들어주겠습니다.

<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8'>
  <title>웹호스팅으로 웹페이지 공유하기</title>
  <style>
    a {
      color : black;
      text-decoration: none;
    }
    .saw {
      color : gray;
    }
    .active {
      color : red;
    }
  </style>
</head>
<body>
  <h1>어서오세요!</h1>
  <ol>
    <li><a href="1.html" target="_blank" class="saw">html</a></li>
    <li><a href="2.html" target="_blank" class="saw active">css</a></li>
    <li><a href="3.html" target="_blank">javascript</a></li>
  </ol>
</body>

보시면 빨간색 글자로 변경할 css의 a 태그의 class 속성에 active를 추가한 뒤,
style태그에서 active를 선택자로 지정해 글자 색상을 red로 바꿔주었습니다.

원하는 결과가 나왔네요.

class의 속성 값은 여러개의 값을 넣을 수 있고 띄어쓰기로 구분합니다.
이렇게 class를 사용하면 태그들을 간단하게 지정한 이름으로 묶어서 여러 속성들을 부여할 수 있습니다.
정말 편리하죠!

2) class의 순서

전의 예제에서, css의 a 태그에 두 개의 class를 부여해주었고
style 태그에서 그 두 개의 class를 선택자로 지정해서 글자 색상을 바꿔주었습니다.
그런데 css가 회색이 아니라 빨간색인 이유는 무엇일까요?

class가 여러개일때는 순서가 있습니다.

  <style>
    a {
      color : black;
      text-decoration: none;
    }
    .saw {
      color : gray;
    }
    .active {
      color : red;
    }
  </style>

가 아니라

  <style>
    a {
      color : black;
      text-decoration: none;
    }
    .active {
      color : red;
    }
    .saw {
      color : gray;
    }
  </style>

으로 바꿔주게 된다면 css는 빨간색이 아닌, 회색으로 보일 것입니다.
가장 최근에 명령한 결과가 나타납니다.

3) id 사용하기

class가 여러 개 있을 때, 결과는 최근에 명령한 것이 보여진다고 했습니다.
그렇기에 class와 태그들이 많아진다면
모든 태그들과 그것들을 묶어주는 class의 순서들을 조정해야 합니다.

그것이 꽤 복잡하기에 우리는 편리하게 id라는 것을 사용합니다.
우선순위는 class보다 id가 위입니다.

코드를 조금 바꿔보겠습니다.

<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8'>
  <title>웹호스팅으로 웹페이지 공유하기</title>
  <style>
    a {
      color : black;
      text-decoration: none;
    }
    #active {
      color : red;
    }
    .saw {
      color : gray;
    }
  </style>
</head>
<body>
  <h1>어서오세요!</h1>
  <ol>
    <li><a href="1.html" target="_blank" class="saw">html</a></li>
    <li><a href="2.html" target="_blank" class="saw" id="active">css</a></li>
    <li><a href="3.html" target="_blank">javascript</a></li>
  </ol>
</body>