* 선택자{속성명: 속성값;}**


* 종류

 : 선택자 우선순위, 구체화된 순서대로

 1. 태그 선택자

 2. 클래스 선택자 : .클래스명

 3. ID 선택자 : 태그명#아이디명

 -----------------------------

 4. 그룹 선택자 : 선택자, 선택자, 선택자 {}

 5. 자식 선택자 : 부모 > 자식 {}

 6. 자손 선택자 : 조상선택자 자손선택자 {}

 7. 인접 형제 선택자 : 친형선택자 + 선택자 {} ,윗손

 8. 형제 선택자 : 형선택자 ~ 선택자 {} ,아무형제


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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
    /*
        2. ID 선택자
        - 태그의 id값을 통해서 태그를 검색
        - #아이디명    
        - 태그명#아이디명
    
        3. 클래스 선택자
        - 태그의 class값을 통해서 태그를 검색
        - .클래스명
        - 태그명.클래스명
        
    */
    /* h3 {
        color: blue;
    } */ 
    
    
    id선택자
    #co_title {
        color: red;
    } /* 생략된 형태 */
    
    
    div#co_tel {
        color: yellow;
    } /* 원형 */
    클래스
    .p_title{
        background-color: yellow;
    }
    .p_tel{
        color: green;
    }
    
    div.p_name{
        color: orange;
    } /* 태그 유무에 따라 범위가 달라짐 */
    
    
    
    /* 
        선택자는 얼마든지 중복 가능 
        
        속성 충돌    
        1. 완전하게 동일한 선택자를 가지고 동일한 속성을 정의한 경우 (a태그 2개 예제)
            - 되도록 쓰지 말것
            - 나중에 선언된 속성이 이전 속성을 덮어쓴다.
        
        2. 다른 종류 선택자를 가지고 동일한 속성을 정의한 경우
            a. 태그 선택자  : 1점
            b. class 선택자 : 10점
            c. id 선택자    : 100점
            - 점수의 총합이 가장 높은 선택자가 적용
    */
    
    a{
        color: red;
    }
    
    a{
        background-color: yellow;
        /* color: green; */
    }
    
    
    .links {
        color: orange:
    }
        
    #link1 {
        color: blue;
    }
</style>
</head>
<body>
    <!-- ex04.htm -->
    <!-- 
        
        HTML
        - 구조와 데이터는 표현하지만., 데이터의 의미는 표현할 수 없는 언어
        - 표현에 중심을 둔 언어
        - 다시 데이터에 접근했을 때 데이터를 구분 못함
        
        의미가 없고 재사용이 불가능한 HTML에 의미를 부여합시다.
        -> Semantic Web, 시멘틱 웹 -> HMTL5
        - 식별자 추가(id, class)
            - id : 유일한 식별자(문서내에서), PK주민번호 같은 것
            - class : 집합 식별자
            
    -->
    [연습 : 선택자]
    <h3 id="co_title">회사 정보</h3>
    <div id="co_address">주소 : 서울시 강남구</div>
    <div id="co_tel">전화 : 02-555-8888</div>   -> 문서내에서 유일한 정보 
 
    <hr />
    
    <h3 class="p_title">개인 정보</h3>
    <div class="p_name">이름 : 홍길동</div>
    <div class="p_tel">전화 : 010-999-4444</div>
    
    <h3 class="p_title">개인 정보</h3>
    <div class="p_name">이름 : 아무게</div>
    <div class="p_tel">전화 : 010-255-2222</div>
    
    
    안녕하세요. <span class="p_name">홍길동</span> 입니다.
 
    
    <hr />
    
    <a href="#" id="link1" class="links">링크입니다.</a>
 
 
 
</body>
</html>
cs


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

인접 형제 선택자, 형제 선택자  (0) 2016.01.22
자손 선택자  (0) 2016.01.22
그룹 선택자, 자식 선택자  (0) 2016.01.22
css 적용방식  (0) 2016.01.22
css란  (0) 2016.01.22

+ Recent posts

티스토리툴바