1cm

자바 프로그래밍_Day_49_CSS선택자 본문

국비지원_Java/Java Programming_1

자바 프로그래밍_Day_49_CSS선택자

dev_1cm 2021. 11. 12. 16:55
반응형

 

 

2021. 10. 27

 

 

     > CSS

       -> Cascading Style Sheets

 

 

     > style과 stylesheet

       -> style은 정해진 속성을 입력하여 웹 페이지를 꾸미는 것, stylesheet는 웹 페이지에서 반복적으로 쓰는 style을 모아놓은 것.

 

 

     > CSS적용

       -> 내부 스타일 시트 : <style></style> 내부에 스타일 정보를 저장하는 방법

       -> 외부 스타일 시트 : <link>태그를 이용하여 css파일을 읽어와서 스타일 적용

       -> 인라인 스타일 시트 : 태그 내부에 스타일 정보를 지정하는 방법

 

 

     > CSS 선택자

 

구분 내용
전체 선택자 *
태그 선택자 태그(h1, p, li 등)
아이디 선택자 #아이디명
클래스 선택자 .클래스명
후손 선택자 선택자 선택자
자손 선택자 선택자 > 선택자
속성 선택자 선택자[속성=값] / 선택자[속성~=값]
선택자[속성|=값] / 선택자[속성^=값]
선택자[속성$=값] / 선택자[속성*=값]
동위 선택자 선택자 + 선택자 / 선택자 ~ 선택자
구조 선택자 선택자:first-child / 선택자:last-child
선택자:nth-child(수열) / 선택자:nth-last-child(수열)
선택자:first-of-type / 선택자:last-of-type
선택자:nth-of-type(수열) / 선택자:nth-last-of-type(수열)
반응 선택자 선택자:active / 선택자:hover
상태 선택자 :checked / :focus
:enabled / :disabled
링크 선택자 :link / visited
문자 선택자 ::first-letter / ::first-line
::after / ::before / ::selection
부정 선택자 선택자:not(선택자)

 

 

     > 전체 선택자

       -> <html>에 있는 모든 태그에 적용되는 스타일

       -> 전체 태그는 body태그에 있는 요소 뿐만 아니라 html, head에도 적용 됨

       -> *{설정내용;}

 

 

     > 태그 선택자

       -> 특정 태그에 적용되는 스타일

       -> 여러 개 태그 선택 시에는 ' , '(쉼표)로 구별하여 작성

       -> 태그명{설정내용;}

 

 

     > 아이디/클래스 선택자

       -> 아이디 선택자 : 태그 속성 id를 설정하고 id값을 선택자로 하는 것(#), 요소(element)를 구분할 수 있는 식별자 역할을 하는 선택자로 하나의 문서에서 하나의 id값만 가질 수 있다.(중복불가)

       -> 클래스 선택자 : 태그 속성을 class로 설정하고 class값을 선택자로 하는 것(.), 여러 태그들 중에서 동일한 스타일을 적용한다거나 동일한 형태를 가져야 할 때, 클래스 속성을 주고 동일한 기능을 하게끔 만들어줄 때 사용한다.(중복사용 가능)

       -> 클래스 선택자는 중복이 허용되나 id선택자는 중복 허용X -> 코드 상에서 에러는 없지만 javascript의 DOM에서 id값으로 페이지 요소를 가져오기 때문에 중복 허용 X

       -> 클래스는 중복을 허용하기 때문에 영역을 정확하게 하기 위해 태그 선택자와 같이 쓰는 경우도 있음

       -> #아이디 명{설정내용;}

       -> .클래스명{설정내용;}

 

 

     > 기본 속성 선택자

       -> 지금 선택자와 함께 사용하는 선택자로 선택자 뒤에 []를 사용하여 속성과 속성 값을 사용한다.

       -> 선택자[속성]{설정내용;}

       -> 선택자[속성=속성값]{설정내용;}

 

 

     > 문자열 속성 선택자

       -> 특정 문자열을 확인하여 스타일을 적용하는 방식으로 특별한 경우에만 사용한다.

       -> 선택자[속성~=값] : 속성값이 특정 값을 단어로 포함하는 태그 선택, 띄어쓰기로 구분

       -> 선택자[속성|=값] : 속성값이 특정 값을 단어로 포함하는 태그 선택, "-"로 구분하고 -앞의 내용이 값 동일해야 한다.

       -> 선택자[속성^=값] : 속성값이 특정값으로 시작하는 태그 선택

       -> 선택자[속성$=값] : 속성값이 특정값으로 끝나는 태그 선택

       -> 선택자[속성*=값] : 속성값이 특정값으로 포함하는 태그 선택

 

 

     > 후손 / 자손 선택자

       -> 후손 선택자 : 선택자 후손선택자{설정내용;}

       -> 자손 선택자 : 선택자>자손선택자{설정내용;}

          -> 여러 개 자손 선택 가능(선택자>자손>자손>자손...)

 

 

     > 동위 선택자

       -> 동위 관계에서 뒤에 위치한 태그를 선택할 때 사용

       -> 선택자a + 선택자b : 동위 선택자a의 바로 뒤에 있는 한 개의 선택자만 선택

       -> 선택자a ~ 선택자b : 동위 선택자a의 뒤에 있는 선택자b 모두 선택

 

 

     > 반응 선택자

       -> 사용자의 움직임에 따라 달라지는 선택자

       -> 선택자:active{설정내용;}

          -> 사용자가 클릭하면 설정내용 실행

       -> 선택자:hover{설정내용;}

          -> 사용자의 마우스가 올라가 있기만 해도 설정내용 실행

 

 

     > 상태 선택자

       -> 입력 양식의 상태에 따라 선택되는 선택자

       -> input태그:checked

          -> 체크 상태의 input태그 선택

       -> input태그:focus

          -> 초점이 맞추어진 input태그 선택

       -> input태그:enabled

          -> 사용 가능한 input태그 선택

       -> input태그:disabled

          -> 사용 불가능한 input태그 선택

 

 

     > 일반 구조 선택자

       -> 특정한 위치에 있는 태그 선택(위치로만 구분)

       -> :first-child

          -> 형제 관계 태그 중 첫 번째 태그 선택

       -> :last-child

          -> 형제 관계 태그 중 마지막 태그 선택

       -> :nth-child(수열)

          -> 형제 관계 태그 중 앞에서 수열 번째 태그 선택

       -> :nth-last-child(수열)

          -> 형제 관계 태그 중 뒤에서 수열 번째 태그 선택

 

 

     > 형태 구조 선택자

       -> 특정한 위치에 있는 태그 선택(태그 별로 구분)

       -> :first-of type

          -> 형제 관계 태그 중 첫 번째 태그 선택

       -> :last-of-type

          -> 형제 관계 태그 중 마지막 태그 선택

       -> :nth-of-type(수열)

          -> 형제 관계 태그 중 앞에서 수열 번째 태그 선택

       -> :nth-of-type(수열)

          -> 형제 관계 태그 중 뒤에서 수열 번째 태그 선택

 

 

     > 문자 선택자

       -> 태그 내부에서 특정 조건의 문자를 선택하는 선택자

       -> 선택자::first-letter

          -> 첫 번째 글자를 선택

       -> 선택자::first-line

          -> 첫 번째 줄을 선택

       -> 선택자::after

          -> 태그 뒤에 위치하는 공간을 선택

       -> 선택자::before

          -> 태그 앞에 위치하는 공간을 선택

       -> 선택자::selection

          -> 사용자가 드래그한 글자 선택

 

 

     > 부정 선택자

       -> 지금까지의 선택자에 대해 반대로 적용하는 선택자

       -> 선택자에는 다른 부정 선택자나 가상 요소를 넣을 수 없음

       -> 요소:not(선택자)

          -> 선택자를 반대로 적용하여 선택

 

 

     > CSS 우선순위

       -> 적용 방법에 따른 순위

          -> 태그 스타일 -> class 스타일 -> id 스타일 -> 인라인 스타일 -> important

       -> 소스 순서에 따른 순위

          -> 나중에 작성된 스타일 적용

 

 

     > 코드 실습과 출력 결과

     > 01_CSS선택자1.html

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
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 기본 선택자</title>
 
    <!--
        내부 스타일 시트
            현재 문서에 <style> 요소(태그) 내부에 스타일 정보를 저장하는 방법.(같은 문서 내에 스타일이 존재한다.)
    -->
    <style>
        /* CSS 주석 */
 
        /* 전체 선택자 테스트 */
        /* * {
            color:hotpink;
        } */
 
        /* 태그 선택자 테스트 */
        /* body {
            color: green;
        } */
        p {
            color: red;
        }
 
        /* 아이디 선택자 테스트 */
        #id1 {
            background-color: yellow;
            color: violet;
        }
 
        #id3 {
            background-color: yellowgreen;
            color: hotpink;
        }
 
        /* 클래스 선택자 테스트 */
        .class1 {
            background-color: gray;
            color: orangered;
        }
 
        .class2 {
            color: purple;
        }
 
        .test {
            font-size: 30px;
        }
 
    </style>
</head>
<body>
    <h1>CSS 기본 선택자</h1>
    <p id="p1">
        선택자란? <br>
        특정 HTML 요소를 선택할 때 사용하는 기능으로,
        요소(element)를 선택하여 원하는 스타일과 기능을 적용할 수 있다.
        * 요소 : 태그 한 세트라고 생각하면 된다.
    </p>
 
    <h3>1. 전체 선택자(*)</h3>
    <p>
        HTML 문서 안의 모든 태그를 선택할 때 전체 선택자를 사용할 수 있다.
    </p>
    <pre>
        * {
            스타일 속성: 값;
            스타일 속성: 값;
            ...
        }
    </pre>
 
    <h3>2. 태그 선택자 (태그명)</h3>
    <p>
        HTML 문서 내에 같은 태그를 모두 선택할 때 사용한다.
    </p>
    <pre>
        태그명 {
            스타일 속성: 값;
            스타일 속성: 값;
            ...
        }
    </pre>
 
    <h3>3. 아이디 선택 (#아이디)</h3>
    <p>
        HTML 문서 내에 해당하는 아이디의 속성값을 가진 태그만 선택할 때 사용한다.
    </p>
    <pre>
        #아이디 {
            스타일 속성: 값;
            스타일 속성: 값;
            ...
        }
    </pre>
    <ol>
        <li id="id1">아이디 선택자 테스트1</li>
        <li id="id2">아이디 선택자 테스트2</li>
        <li id="id3">아이디 선택자 테스트3</li>
        <li id="id4">아이디 선택자 테스트4</li>
    </ol>
 
    <h4>클래스 선택자 (.클래스)</h4>
    <p>
        HTML 문서 내에 여러 개의 태그를 동일한 클래스로 지정하여 선택할 때 사용한다.
    </p>
    <pre>
        .클래스 {
            스타일 속성: 값;
            스타일 속성: 값;
            ...
        }
    </pre>
 
    <ul>
        <li class="class1">클래스 선택자 테스트 1</li>
        <li class="class2 test">클래스 선택자 테스트 2</li>
        <li class="class1 test">클래스 선택자 테스트 3</li>
        <li class="class2">클래스 선택자 테스트 4</li>
        <li class="class1">클래스 선택자 테스트 5</li>
    </ul>
 
    <br><br><br><br><br>
</body>
</html>
 cs

 

 

 

     > 02_CSS선택자.css

 

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
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
/* * {
    color: green;
} */
/* 기본 속성 선택자 테스트 */
/* div 중 name 속성값이 name1과 일치하는 태그 */
div[name="name1"] {
    background-color: orangered;
}
 
/* div 중 name 속성 안에 name1이 포함되어 있는 태그(속성값이 띄어쓰기로 구분된) */
div[name="name1"] {
    background-color: yellow;
}
 
/* div 중 class 속성에서 class로 시작하는 태그(-로 구분) */
div[class|="class"] {
    background-color: aqua;
}
 
/* div 중 name 속성이 name로 시작되는 태그 */
div[name^="name"] {
    background-color: blue;
}
 
/* div 중 class 속성이 class로 끝나는 경우 */
div[name$="class"] {
    color: white;
}
 
/* div 중 class 속성 중에 i를 포함하는 태그 */
div[class*=i] {
    background-color: yellowgreen;
    color: red;
}
 
/* 클래스가 div-class인 것 중 name 속성값이 name3 포함되어 있는 경우 (속성값이 띄어쓰기로 구분된) */
.div-class[name~=name3] {
    background-color: hotpink;
}
 
/* ---------------------------------------- */
 
/* 자손 선택자와 후손 선택자 테스트 */
#test1>h4 {
    background-color: orange;
}
 
#test1>ul>li {
    background-color: coral;
}
 
#test1 li {
    color: red;
}
 
/* ---------------------------------------- */
/* 동위 선택자 테스트 */
#div-test {
    background-color: red;
}
 
/* #div-test+div {
    background-color: seagreen;
} */
 
/* 중간에 p태그가 와도 div-test 뒤에 모든 div에 적용된다.(p제외) */
/* #div-test~div {
    background-color: seagreen;
} */
/* ---------------------------------------- */
/* 반응 선택자 테스트 */
#active-test, #hover-test {
    background-color: tan;
    width: 300px;
    height: 300px;
}
 
#active-test:active {
    background-color: teal;
    color: white;
}
 
#hover-test:hover {
    background-color: purple;
    color: salmon;
    cursor: pointer;
}
 
/* #hover-test:active {
    background-color: hotpink;
    color: blue;
} */
 
/* ---------------------------------------- */
/* 상태 선택자 테스트 */
input[type=checkbox]:checked {
    width: 20px;
    height: 20px;
}
 
input[type=checkbox]:checked+label{
    font-size: 20px;
}
 
#userId:focus, #userPwd:focus {
    background-color: lightpink;
    border: 2px solid blue;
}
 
option:disabled {
    background-color: violet;
}
 
option:enabled {
    background-color: greenyellow;
}
 
button:disabled {
    color: red;
}
 
button:enabled {
    background-color: yellowgreen;
}
 
/* ---------------------------------------- */
/* 일반 구조 선택자 */
/* 형제 관계 태그 중 첫 번째 태그 선택 */
#test1 p:first-child {
    background-color: red;
    color: white;
}
 
/* 형제 관계 태그 중 마지막 태그 선택 */
/* 마지막 자식이 p태그가 아니여서 스타일이 적용되지 않는다. */
#test1 p:last-child {
    background-color: red;
    color: white;
}
 
/* 형제 관계 태그 중 앞에서 수열번 째 태그 선택 */
/* 수식을 사용하거나 쉭 대신 odd(홀수), even(짝수)를 대입해줄 수 있다. */
#test1 p:nth-child(2n) {
    background-color: yellowgreen;
    color: white;
}
 
/* 형제 관계 태그 중 뒤에서 수열번째 태그 선택 */
#test1 p:nth-last-child(4){
    background-color: skyblue;
}
 
/* ---------------------------------------- */
/* 형태 구조 선택자 */
/* 형제 관계 태그 중 첫 번째 태그 선택 */
#test2 p:first-of-type {
    background-color: red;
    color: white;
}
 
/* 형제 관계 태그 중 마지막 태그 선택 */
#test2 p:first-of-type {
    background-color: orange;
    color: white;
}
 
/* 형제 관계 태그 중 수열번째 태그 선택 */
/* 수식을 사용하거나 쉭 대신 odd(홀수), even(짝수)를 대입해줄 수 있다. */
#test2 p:nth-last-child(even) {
    background-color: skyblue;
    color: white;
}
 
/* 형제 관계 태그 중 뒤에서 수열번째 태그 선택 */
#test2 p:nth-last-child(4) {
    background-color: skyblue;
    color: white;
}
 
/* ---------------------------------------- */
/* 문자 선택자 테스트 */
/* 첫 번째 글자를 선택해서 스타일 적용 */
#test3 p::first-letter {
    font-size: 2em;
}
 
/* 첫 번째 라인을 선택해서 스타일 적용 */
#test3 p::first-line {
    background-color: wheat;
}
 
/* 태그 앞에 위치하는 공간을 선택 */
#test3 p::before {
    content: "1. ";
}
 
/* 태그 뒤에 위치하는 공간을 선택(태그 바깥쪽 위치) */
#test3 p::after {
    content: "@@@@@@@@@@";
}
 
/* 사용자가 드래그한 글자 스타일 변경 */
#test3 p::selection {
    background-color: seagreen;
    color: white;
}
 
/* ---------------------------------------- */
/* 부정 선택자 */
/* #test4 p:not(.p1) {
    background-color: coral;
} */
 
#test4 p:not(:nth-child(odd)) {
    background-color: coral;
}
 cs

 

 

 

 

     > 02_CSS선택자2.html

 

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
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>기본 선택자 2</title>
 
    <!--
        외부 스타일 시트
        스타일만을 따로 관리하는 .css 확장자를 가지는 외부 문서를 만들고 <link> 통해 연결시켜주는 방법이다.
    -->
    <link rel="stylesheet" href="./02_CSS선택자.css">
</head>
<body>
    <h1>기본 선택자 2</h1>
 
    <h3>1. 기본 속성 선택지</h3>
    <p>
        기본 선택자 뒤에 []를 사용하여 속성과 속성값을 사용한다.
    </p>
    <pre>
        선택자[속성=속성값] {
            스타일 속성: 값;
            스타일 속성: 값;
            ...
        }
    </pre>
 
    <div class="div-class" name="name1">div1</div>
    <div class="div-class" name="name2">div2</div>
    <div class="div-class" name="name3 name1">div3</div>
    <div class="class-div" name="name3">div4</div>
 
    <h3>2. 자손 선택자와 후손 선택자</h3>
    <p>
        자손 : 바로 하위 요소들 / 후손 : 하위 요소들 전부
    </p>
    <pre>
        1) 자손 선택자
            a>b {
                스타일 속성: 값;
                스타일 속성: 값;
                ...
            }
        2) 후손 선택자
            a b {
                스타일 속성: 값;
                스타일 속성: 값;
                ...
            }
    </pre>
 
    <div id="test1">
        <h4>자손입니다.</h4>
        <h4>나도 자손입니다.</h4>
        <ul>
            <h4>나도 자손입니다.</h4>
            <li>나는 ul의 자손이면 div의 후손입니다.</li>
            <li>나는 ul의 자손이면 div의 후손입니다.</li>
        </ul>
        <li>나는 div의 자손입니다.</li>
    </div>
 
    <h3>3.동위 선택자</h3>
    <p>
        동위 관계(같은 레벨)에서 뒤에 위치한 태그를 선택할 때 사용한다. 
    </p>
    <pre>
        1) a 선택자 뒤에 있는 b 요소 한 개 선택
            a+b {
                스타일 속성: 값;
                스타일 속성: 값;
                ...
            }
        
        2) a 선택자 뒤에 있는 모든 b 요소 선택
            a~b {
                스타일 속성: 값;
                스타일 속성: 값;
                ...
            }
    </pre>
 
    <div id="div-test">div1</div>
    <!-- <p>aa</p> (div-test+div일 때 바로 뒤에 div가 없을 경우(p태그가 오게 될 경우) 적용 X)-->
    <div>div2</div>
    <div>div3</div>
    <div>div4</div>
    <div>div5</div>
 
    <h3>4. 반응 선택자</h3>
    <p>
        사용자의 움직임에 따라 달라지는 선택자
    </p>
    <pre>
        1) 사용자가 클릭하는 요소에 스타일 적용
            선택자:active {
                스타일 속성: 값;
                스타일 속성: 값;
                ...
            }
        2) 사용자가 마우스를 올려놓는 요소에 스타일 적용
            선택자:hover {
                스타일 속성: 값;
                스타일 속성: 값;
                ...
            }
    </pre>
 
    <div id="active-test">active 테스트</div>
    <br>
    <div id="hover-test">hover 테스트</div>
 
    <h3>5. 상태 선택자</h3>
    <p>
        요소의 상태에 따라 선택되는 선택자
    </p>
    <pre>
        1) 체크된 상태의 태그
            선택자:checked {
                스타일 속성: 값;
                스타일 속성: 값;
                ...
            }
    </pre>
 
    <input type="checkbox" name="fruits" id="apple">
    <label for="apple">사과</label>
    <input type="checkbox" name="fruits" id="banana">
    <label for="banana">바나나</label>
    <input type="checkbox" name="fruits" id="peach">
    <label for="peach">복숭아</label>
    
    <pre>
        2) 초점이 맞추어진 input 태그의 스타일 변경
            선택자:focus {
                스타일 속성: 값;
                스타일 속성: 값;
                ...
            }
    </pre>
 
    <label for="userId">아이디 : </label>
    <input type="text" name="userId" id="userId" placeholder="아이디를 입력하세요.">
 
    <br><br>
    
    <label for="userPwd">패스워드 : </label>
    <input type="text" name="userPwd" id="userPwd" placeholder="패스워드를 입력하세요.">
    
    <br><br>
 
    <pre>
        3) 사용 가능한 요소의 스타일 변경
            선택자:enabled{
                스타일 속성: 값;
                스타일 속성: 값;
                ...
            }
        4) 사용 불가능한 요소의 스타일 변경
            선택자:disabled {
                스타일 속성: 값;
                스타일 속성: 값;
                ...
            }
    </pre>
 
    <h3>당신의 연령대는?</h3>
    <select>
        <option disabled>10대</option>
        <option disabled>20대</option>
        <option>30대</option>
        <option>40대</option>
        <option>50대</option>
    </select>
 
    <button>버튼1</button>
    <button disabled>버튼2</button>
 
    <h3>6. 일반 구조 선택자</h3>
 
    <p>
        특정 위치에 있는 태그(위치로 구분)
    </p>
 
    <div id="test1">
        <p>테스트 1</p>
        <p>테스트 2</p>
        <p>테스트 3</p>
        <p>테스트 4</p>
        <p>테스트 5</p>
        <pre>테스트 6</pre>
    </div>
 
    <h3>7. 형태 구조 선택자</h3>
    <p>
        특정 위치에 있는 태그(태그별로 구분)
    </p>
    <div id="test2">
        <p>테스트 1</p>
        <p>테스트 2</p>
        <p>테스트 3</p>
        <p>테스트 4</p>
        <p>테스트 5</p>
        <pre>테스트 6</pre>
    </div>
 
    <h3>8. 문자 선택자</h3>
    <p>
        태그 내부에서 특정 조건의 문자를 선택하는 선택자
    </p>
 
    <div id="test3">
        <p>
            국내 가상화폐 거래소 1위 업체인 업비트의 누적 회원이 890만 명에 달하고 회원 중 2030의 비중이 60%를 넘어섰다. 업비트 이용자들은 대개 직장 출근 직후(오전 9시~10시)와 퇴근시간대(오후 6시~7시 사이)에 가장 거래를 활발히 하고 있는 것으로 나타났다.
    
            25일 업비트 운영업체 두나무에 따르면, 업비트 회원은 총 890만 명 중 20대가 31%로 가장 많았고, 30대가 29%, 40대가 24%로 뒤를 이었다. 지난해 업비트 3주년 출범 조사 당시 30대(39.8%), 40대(24.1%), 20대(20.1%)의 순위가 1년 사이에 바뀌었다. 20대의 디지털 자산 투자 참여가 크게 증가한 점이 원인이 됐다. 업비트 측은 “2030 세대만 전체 회원의 60%를 차지해 디지털 자산 투자에 대한 MZ세대(1980년대 초~2000년대 초 출생한 세대)의 뜨거운 관심을 방증했다”고 설명했다. 성별로는 남성이 57%, 여성이 43%로 나타났다.
    
            업비트 이용자들의 거래가 가장 활발한 시간대는 오전 9시에서 10시로 집계됐으며 그다음은 오후 6시에서 7시로 집계됐다. 
    
            업비트는 “이용자들이 출퇴근 시간에 활발하게 거래하는 직장인의 특성을 보여주고 있다”고 해석했다. 업비트를 이용할 때는 모바일 기기를 사용하는 비중이 78%(안드로이드 52%, iOS 26%)로, 22%인 웹(PC)에 비해 압도적으로 높은 것으로 나타났다. 이용자들의 업비트 앱 일 평균 체류 시간은 45분 32초이다. 올해 9월까지 총 앱 이용 시간만 4억6426만8590시간에 달해 일수로 환산하면 5만3734년에 맞먹는 것으로 나타났다. 
        </p>
    </div>
 
    <h3>9. 부정 선택자</h3>
    <p>
        지금까지의 선택자에 대해 반대로 적용하는 선택자
    </p>
 
    <div id="test4">
        <p>테스트 1</p>
        <p>테스트 2</p>
        <p class="p1">테스트 3</p>
        <p>테스트 4</p>
        <p>테스트 5</p>
    </div>
 
    <br><br><br><br><br>
</body>
</html>
 cs

 

반응형

'국비지원_Java > Java Programming_1' 카테고리의 다른 글

자바 프로그래밍_Day_51_CSS_레이아웃_스타일  (0) 2021.12.07
자바 프로그래밍_Day_50_CSS_선택자_우선순위  (0) 2021.12.02
자바 프로그래밍_Day_48_폼 관련 태그  (0) 2021.10.30
자바 프로그래밍_Day_47_멀티미디어, 하이퍼링크 관련 태그  (0) 2021.10.30
자바 프로그래밍_Day_46_표, 영역관련태그  (0) 2021.10.30
'국비지원_Java/Java Programming_1' Related Articles more
Comments