CSS 선택자 - id, class

선택자

선택자란? 요소들에게 스타일을 주기 위해서 해당 요소를 DOM에서 찾기 위한 수단이다

◆ 선택자의 종류

1. 기본선택자
- 기본선택자는 선택자를 하나를 사용하는 것
- 전체선택자(*), 태그선택자(h1, p, div), id선택자(#X), class선택자(.X), 가상요소, 가상클래스

2. 조합선택자
- 조합선택자는 선택자를 여러개를 사용하는 것
- 하위(자손)선택자, 자식선택자, 동위(인접형제)선택자

0. 전체선택자

- 모든 요소를 선탤 할 때 사용

- 선택자 : *

- 브라우저에 적용되어있는 magin, padding값을 초기화시켜주기 위해서 많이 사용된다

- 하지만!! 브라우저의 성능을 떨어뜨리는 주범으로 사용하는 것을 권장하지 않음

1. 태그 선택자(요소 선택자)

- 태그명이 선택자와 같은 태그들에 선택할 때 사용

- 선택자 : 태그의 이름

- 태그 선택자 사용 시 문서의 지정된 요소가 모두 선택

<head>
	<style>
                /* 전체 선택자 */
                *{margin: 0; padding: 0;}

                /* 태그 선택자 */
                h1{color: red;}
                p{color: green;}
                
                /* 동일한 스타일의 경우 */
                h1, h2{color: red;}
	</style>
</head>

📢 참고 선택자에 쉼표(,)가 들어가면 '또는(OR)의 의미를 갖는다.

2. id선택자

- 요소에 id속성과 이름을 추가하고, id이름과 같은 태그를 선택할 때 사용

- 선택자 : #id이름

- id 이름은 문서에서 중복되지 않도록 한 요소에 한 개의 아이디 사용

- id선택자는 유연성이 없고 재활용할 수 없다

3. class선택자

- 요소에 class속성과 이름을 추가하고, class이름과 같은 태그를 선택할 때 사용

- 선택자 :. class이름

- 클래스 이름은 서로 다른 태그에서 중복으로 사용 가능

- 같은 유형의 여러 요소를 선택할 때 사용

- 하나의 요소에 2개 이상의 클래스를 적용 가능

<head>
    <style>
        /* id 선택자 */
        #container{width: 200px;background-color: black;}

        /* class 선택자 */
        .red{color: red;}

        /* 태그 선택자 */
        p{color: white;}
        ul{color: white;}
    </style>
</head>
<body>
     <div id="container">
        <ul>
            <li class="red">red</li>
            <li>blue</li>
            <li>green</li>
        </ul>
        <p>이 색을<span class="red">빨간색</span>이다.</p>
     </div>
</body>

실행결과

📢 참고 id, class는 요소에 이름을 붙일때 큰덩어리한테 붙이는 것이 좋다
→ 이유는 다른 요소에 스타일을 적용해야하는 경우가 생기기 떄문이다.

◆ id, class 이름 생성 규칙

1. 영문자로 작성
2. 첫글자는 영문으로 시작(첫글자는 숫자가 나올수 없음)
3. 대소문자 구분
4. 특수문자는 '_' 만 사용

저작자표시

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

CSS 선택자 - 가상요소, 가상클래스 (1)	2020.12.19
CSS 선택자 - 조합선택자(후손,자식,형제) (6)	2020.12.18
DOM이란? (5)	2020.12.16
CSS 삽입방법 (0)	2020.10.14
CSS란? (0)	2020.10.02