Post

CSS 선택자(selector)

Posted Updated
Preview Image
By Namyoonseo 7 min read

1. 선택자(selector)

  • CSS에서 선택자란, CSS로 UI의 디자인하고 표현할 대상이 되는 부분을 지칭합니다.
  • 선택자의 종류는 type선택자, id선택자, class선택자, 전체선택자, 하위선택자, 자식선택자, 인접선택자, 형제선택자, 그룹 선택자, 속성 선택자 ,가상 클래스 선택자 ,가상 요소 선택자, 종속 선택자 , 선택자의 우선순위 가있습니다.

CSS로 속성을 부여하는 형식은 다음과 같습니다.

type선택자

선선택자중 가장 간단한 선택자인데요

html문서의 태그 이름을 선택자로 사용할 수 있습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
p{
    color: red;
}

    </style>
</head>
<body>
    <p>type 선택자</p>
    <div>type 선택자</div>
</body>
</html>

이렇게 사용하면 p태그 안에 있는 type 선택자만 빨간색으로 출력이 됩니다.

id 선택자

  • html 문서의 요소 중 같은 요소라도 각기 다른 이름을 지정하여 따로 속성을 부여할 수 있습니다.
  • html 요소에id로 이름을 붙일 때에는 유일한 이름을 부여해야 하며, 다른 요소에 같은 id를 주어서는 안됩니다.
  • css에서는 id 선택자 앞에 ‘#’을 붙여야 합니다. id명은 숫자로 시작할 수 없으며, 주로 영문자로 시작합니다. ````javascript <!DOCTYPE html>
Document

type 선택자

type 선택자
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

위에는 id가 red인 메서드를 빨간색으로 만들어주는 css 명령어 입니다.

### class 선택자
- html 문서의 여러 요소 중 같은 이름을 갖는 요소만 모아 따로 속성을 부여할수 있습니다.

- html 요소에 같은 이름을 부여할 때에는 class로 이름을 붙입니다.

- 여러 개의 요소에 같은 class명을 부여할수 있고, 하나의 요소에 여러 개의 class명을 부여할 수도 있습니다.

- css에서는 class 선택자 앞에 '.'을 붙여야 합니다.

````javascript
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .red{
         color: red;
        }

        .blue{
         font-weight: bold;
        }

    </style>
</head>
<body>
    <p class="red">type 선택자</p>
    <p class="blue">type 선택자</p>
    <p class ="red blue">type 선택자</p>
</body>
</html>

font-weight는 폰트의 굵기를 설정하는 명령어고 bold는 굵게 라는 뜻입니다. 여기에 200px, 20vw값을 쓰셔도 사용이 가능합니다.

전체 선택자

  • 페이지의 모든 요소를 가리키는 선택자로 ‘*‘로 표시합니다.

  • id나 class명이 부여되있든 상관없이 속성을 부여할수 있습니다.

  • 불필요하게 전체 선택자를 사용하는 것은 속도 저하의 원인이 되므로 반듯이 필요한 경우가 아니면 선택자를 명시하는 것이 좋습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .red{
         color: red;
        }

        .blue{
         font-weight: bold;
        }

    </style>
</head>
<body>
    <h3>이것은 전체 선택자입니다</h3>
    <p id="blue">이것은 전체선택자입니다</p>
    <ul>
        <li>이것은 전체 선택자입니다</li>
    </ul>
</body>
</html>

ul li 안에 있는 ‘이것은 전체 선택자입니다.’는

  • 이것은 전체 선택자입니다.

로 출력 됩니다.

하위 선택자

  • 요소 내부에 있는 모든 해당요소를 가리킵니다.
  • css에서는 선택자 사이를 공백으로 분리합니다. ````javascript <!DOCTYPE html>
Document

이것은 하위 선택자 입니다.

  • 이것은 하위 선택자입니다

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

class =red 밑에 있는 p에만 빨간색이 적용됩니다.

### 자식 선택자 
- 요소 내부에 있는 해당 요소를 가리키지만 하위요소의 하위요소는 가리키지 않습니다.
- css에서는선택자 사이를  >로 분리 합니다.

````javascript
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
         .red > p {
         color: red;
        }

    </style>
</head>
<body>
<div class="red">
<p>이것은 하위 선택자 입니다.</p>
<ul>
    <li><p>이것은 하위 선택자입니다</p></li>
</ul>
</div>
</body>
</html>

class=red 바로 밑에 있는 p 태그에만 빨간색을 주었는데 사이에 <를 써주었습니다.

인접 선택자

  • 현재 요소의 바로 뒤에 나오는 요소만을 가리키는 선택자입니다.
  • css에서는 선택자 사이를 ‘+’로 분리 합니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
         .red + p {
         color: red;
        }

    </style>
</head>
<body>
    <h2></h2>
    <p></p>
    <p></p>
    <h2></h2>
    <p></p>
    <p></p>
</body>
</html>

이것은 h2 바로 뒤에 있는 p 하나에만 빨간색을 입혀준 것입니다.

Coding
CSS
This post is licensed under CC BY 4.0 by the author.