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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
    /*  
        
        4. 그룹 선택자
        - 앞의 3종류를 동시에 선택자로 사용
        - 선택자, 선택자, 선택자 {}
    
        5. 자식 선택자, Child seletor
        - 친부모 태그를 조건으로 자식을 검색
                
    */
    
    h3, div, span {
        color: blue;
    }
    
    h3, #name, .area {
        background-color: yellow;
    }
    body, p, div, span, table, th, td, li. input, textarea, fieldset, legend, a {
        font-family: 궁서체;
    }
    
    
    
    
    .names {
        font-size: 30pt;
    }
    
    div > .names {
        font-style: italic;
    } 
    p > span {
        text-decoration: underline;
    } /* 자식선택자 */
</style>
</head>
<body>
    <!-- ex05.htm -->
    [연습 : 선택자]
    <h3>제목입니다.</h3>
    <div class="area">영역입니다.</div>
    <p>안녕하세요. <span id="name">홍길동</span> 입니다.</p>
 
    <div></div>
    <span></span>
 
 
 
    <hr />
    <div>안녕하세요 <span class="names">홍길동</span>입니다.</div>
    <p>안녕하세요 <span class="names">홍길동</span>입니다.</p>
 
 
 
</body>
</html>
cs


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

인접 형제 선택자, 형제 선택자  (0) 2016.01.22
자손 선택자  (0) 2016.01.22
ID 선택자, 클래스 선택자  (0) 2016.01.22
css 적용방식  (0) 2016.01.22
css란  (0) 2016.01.22

+ Recent posts

티스토리툴바