[CSS] class 선택자와 id 선택자에 대해 알아보자 ✍️

HTML+CSS

[CSS] class 선택자와 id 선택자에 대해 알아보자 ✍️

🌟 Sean 🌟 2024. 11. 19. 09:22

👨‍💻특정 부분에 스타일을 적용하는 class / id 선택자

특정 요소에 스타일을 적용하는 타입 선택자 특정 태그를 사용하면 모든 요소에 스타일을 적용할 수 있다.

같은 태그라도 일부는 다른 스타일을 사용할 때 class 선택자와 id 선택자를 사용한다.

1. <p></p> 태그 모든 요소에 스타일 적용

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <p>HTML</p>
    <p>CSS</p>
    <p>JavaScript</p>
</body>

</html>

p {
    color: red;
}

2.<p></p> 태그 요소에 class(.) / id(#) 선택자 특정 부분 스타일 적용

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <p>HTML</p>
    <p class="css">CSS <--class 선택자 사용</p> 
    <p id="js">JavaScript <-- id 선택자 사용</p>
</body>

</html>

p {
    color: red;
}

/* class 선택자 */
.css {
    text-decoration: underline;
    color:blue;
}

/* id 선택자 */
#js {
    text-decoration: line-through;
    color:aqua;
}

3. 스타일 적용 결과

class / id 선택자를 사용하여 p 태그 안의 특정 부분 스타일 적용

4. class 선택자와 id 선택자의 차이

- class 선택자는 문서에서 여러 번 적용할 수 있는 반면, id 선택자는 문서에서 한 번만 적용할 수 있다.

- id 선택자는 중복해서 적용할 수 없으므로 주로 문서의 레이아웃과 관련된 스타일을 지정하거나 웹 요소에 자바스크립트 프로그램을

사용하면서 요소를 구별할 때 사용된다.

- class 선택자는 이름 앞에 마침표(.)를 사용한다.

- id 선택자는 마침표(.) 대신 # 기호를 사용한다.