프로그래밍 노트/HTML5 + CSS3

[CSS] 주요 선택자

엠씨비기 2019. 2. 7. 22:27

1. 전체 선택자


전체 선택자는 스타일을 모든 요소에 적용할 때 사용하며, 전체 선택자로는 *(별표)를 사용한다.


2. 태그 선택자


특정 태그가 쓰인 모든 요소에 스타일을 적용하며, 전체 선택자 다음으로 많은 요소들에 스타일을 적용한다.


3. 클래스 선택자


특정 부분에만 스타일을 적용할 때 사용하는 것이 클래스 선택자이다. 

클래스 선택자는 태그 대신 클래스 이름을 사용하는데, 클래스 이름 앞에는 마침표(.)를 붙인다. 


4. id 선택자


클래스 선택자와 동일하네 특정 부분에만 스타일을 적용할 때 사용한다.

다만, 클래스 선택자의 경우 여러번 반복 적용이 가능하지만, id 선택자의 경우 문서 내 한번만 적용이 가능하다.

사용법은 클래스 선택자의 마침표(.) 대신, 샵(#) 기호를 앞에 붙인다.


5. 그룹 선택자


여러 선택자를 쉼표(,)로 구분해 나열한 후 동일한 스타일을 지정하는 것을 그룹 선택자라고 한다.


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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!DOCTYPE html>
<html lang = "ko">
    <head>
        <meta charset="utf-8">
        <style>
            /*전체 선택자*/
            *{
                background:ivory; /*배경색은 아이보리*/
                text-align:center; /*글자를 가운데 정렬*/
            }
            /*태그 선택자*/
            h1{
                font-size:2em; /*글자크기 지정*/
                text-decoration:underline; /*아랫줄 스타일 부여*/
            }
            table,th,td{
                border-collapse:collapse; /*표 테두리 사이의 간격 제거*/
                border:1px solid black; /*선 1px로 지정*/
            }
            /*그룹 선택자*/
            ul,li{
                color:blue;/*글자색은 파란색*/
                text-align:left;
            }
            /*클래스 선택자*/
            .bold{font-weight:bold;/*볼드처리*/}
            /*ID 선택자*/
            #header{
                background:gray;
                color:white;
            }
        </style>
    </head>
    <body>
        <h1>과제관리표</h1>
        <ul>
            <li>OS 수업의 과제 제출 여부에 대해서 관리하기 위한 표 입니다.</li>
            <li>기한 내에 <span class="bold">제출시 'O', 미제출시 'X' 표시</span></li>
        </ul>
        <br>
        <table id="report_table" width = "100%">
            <thead>
                <tr>
                    <th id = "header">이름</th>
                    <th id = "header">학번</th>
                    <th id = "header">전공</th>
                    <th id = "header">1차 과제</th>
                    <th id = "header">2차 과제</th>
                    <th id = "header">3차 과제</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td id="name">홍길동</td>
                    <td>151523</td>
                    <td>컴퓨터공학</td>
                    <td>O</td>
                    <td>-</td>
                    <td>-</td>
                </tr>
                <tr>
                    <td id="name">김철수</td>
                    <td>141129</td>
                    <td>컴퓨터공학</td>
                    <td>X</td>
                    <td>-</td>
                    <td>-</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>
cs