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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
    
    
    /*  
        float
        - 태그를 기존 출력 흐름에서 벗어나 왼쪽(오른쪽)으로 강제 배치
        - Queue, Stack
    */
    #name {
        float: left;    
    }
    
    #name2 {
        float: left;
    }
    
    
    .box { 
        border: 1px solid gray; width: 50px; height: 50px; 
        float: left;
    }
    .box2 { 
        border: 1px solid gray; width: 50px; height: 50px; 
    }
    #box1 { background-color: red; }
    #box2 { background-color: orange; }
    #box3 { background-color: yellow; }
    #box4 { background-color: green; }
    #box5 { background-color: blue; }
    #box6 { background-color: darkblue; }
    #box7 { background-color: purple; } 
    
</style>
</head>
<body>
    <!-- ex21.htm -->
    [ 연습 : float ]
    <div>
        안녕하세요 <span id="name">홍길동</span>입니다. 반갑습니다. <span id="name2">아무게</span>입니다.
    </div>
    
    
    <hr />
    <!-- div#box$.box{상자$}*7 -->
    <div id="box1" class="box">상자1</div>
    <div id="box2" class="box">상자2</div>
    <div id="box3" class="box">상자3</div>
    <div id="box4" class="box">상자4</div>
    <div id="box5" class="box">상자5</div>
    <div id="box6" class="box">상자6</div>
    <div id="box7" class="box">상자7</div>
    
    <div id="box8" class="box2">상자8</div>
 
 
</body>
</html>
cs


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

네이버뉴스의 네티즌 와글와글 따라하기  (0) 2016.01.22
<div>로 레이아웃 짜기 예제  (0) 2016.01.22
네이버 검색창 예제  (0) 2016.01.22
의사클래스 예제  (0) 2016.01.22
블럭태그, 인라인태그 예제  (0) 2016.01.22


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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
    #search {
        width: 300px;
    }
    
    #searchList {
        border: 1px solid gray;
        width: 280px;
        height: 200px;
        padding: 10px;
        background-color: white;
        
        position: absolute;
        left: 68px;
        top: 25px;
    
    }
    
    #tbl1 {
        width: 600px;
        margin: 0px auto;
        position: relative;
        left: 0px;
        top: 0px;
</style>
</head>
<body>
    <!-- ex20.htm -->
    [연습 : 네이버 검색창st ]
    <table border="1" id="tbl1">
        <tr>
            <td>
                검색어 : <input type="text" id="search" /> <input type="button" value=" 검색하기 " />
                <!-- 추천검색어 -->
                <div id="searchList">
                    홍길동<br />
                    아무게<br />
                    태블릿<br />
                    모니터<br />
                </div>
            </td>
        </tr>
        <tr>
            <td>메인</td>
        </tr>
        <tr>
            <td>하단</td>
        </tr>
    </table>
    
    
    
    추가 내용물...
    
    
    
</body>
</html>
cs


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

<div>로 레이아웃 짜기 예제  (0) 2016.01.22
float 태그  (0) 2016.01.22
의사클래스 예제  (0) 2016.01.22
블럭태그, 인라인태그 예제  (0) 2016.01.22
박스모델 이용한 게시판 예제  (0) 2016.01.22


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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
    
    /* 
        Pseudo Class 
    
        :first-child
        :last-child
        :nth-child
        
    */
    
    
    div:first-child {
        color: red;
    }
    
    div:last-child {
        color: red;
    }
    
    div:nth-child(3) {
        color: orange;
    }
    
    
    #tbl1 tr:first-child {
        background-color: #DEDEDE;
    }
    
    
    /* 활성화됐을때 */
    
    input {
        border: 1px solid gray;
        outline: none;
    }
    
    input:focus {
        /* background-color: yellow; */
        border: 1px solid red;
        
    }
    
    
</style>
</head>
<body>
    <!-- ex19.htm -->
    [연습]
    <div>항목1</div>
    <div>항목2</div>
    <div>항목3</div>
    <div>항목4</div>
    <div>항목5</div>
    
    <!-- 
        table#tbl1>tr*20>td{데이터}*5 
    -->
    <table id="tbl1">
        <tr>
            <td>데이터</td>
            <td>데이터</td>
            <td>데이터</td>
            <td>데이터</td>
            <td>데이터</td>
        </tr>
        <tr>
            <td>데이터</td>
            <td>데이터</td>
            <td>데이터</td>
            <td>데이터</td>
            <td>데이터</td>
        </tr>
        <tr>
            <td>데이터</td>
            <td>데이터</td>
            <td>데이터</td>
            <td>데이터</td>
            <td>데이터</td>
        </tr>
        <tr>
            <td>데이터</td>
            <td>데이터</td>
            <td>데이터</td>
            <td>데이터</td>
            <td>데이터</td>
        </tr>
        <tr>
            <td>데이터</td>
            <td>데이터</td>
            <td>데이터</td>
            <td>데이터</td>
            <td>데이터</td>
        </tr>
        <tr>
            <td>데이터</td>
            <td>데이터</td>
            <td>데이터</td>
            <td>데이터</td>
            <td>데이터</td>
        </tr>
        <tr>
            <td>데이터</td>
            <td>데이터</td>
            <td>데이터</td>
            <td>데이터</td>
            <td>데이터</td>
        </tr>
        <tr>
            <td>데이터</td>
            <td>데이터</td>
            <td>데이터</td>
            <td>데이터</td>
            <td>데이터</td>
        </tr>
        <tr>
            <td>데이터</td>
            <td>데이터</td>
            <td>데이터</td>
            <td>데이터</td>
            <td>데이터</td>
        </tr>
        <tr>
            <td>데이터</td>
            <td>데이터</td>
            <td>데이터</td>
            <td>데이터</td>
            <td>데이터</td>
        </tr>
        <tr>
            <td>데이터</td>
            <td>데이터</td>
            <td>데이터</td>
            <td>데이터</td>
            <td>데이터</td>
        </tr>
        <tr>
            <td>데이터</td>
            <td>데이터</td>
            <td>데이터</td>
            <td>데이터</td>
            <td>데이터</td>
        </tr>
        <tr>
            <td>데이터</td>
            <td>데이터</td>
            <td>데이터</td>
            <td>데이터</td>
            <td>데이터</td>
        </tr>
        <tr>
            <td>데이터</td>
            <td>데이터</td>
            <td>데이터</td>
            <td>데이터</td>
            <td>데이터</td>
        </tr>
        <tr>
            <td>데이터</td>
            <td>데이터</td>
            <td>데이터</td>
            <td>데이터</td>
            <td>데이터</td>
        </tr>
        <tr>
            <td>데이터</td>
            <td>데이터</td>
            <td>데이터</td>
            <td>데이터</td>
            <td>데이터</td>
        </tr>
        <tr>
            <td>데이터</td>
            <td>데이터</td>
            <td>데이터</td>
            <td>데이터</td>
            <td>데이터</td>
        </tr>
        <tr>
            <td>데이터</td>
            <td>데이터</td>
            <td>데이터</td>
            <td>데이터</td>
            <td>데이터</td>
        </tr>
        <tr>
            <td>데이터</td>
            <td>데이터</td>
            <td>데이터</td>
            <td>데이터</td>
            <td>데이터</td>
        </tr>
        <tr>
            <td>데이터</td>
            <td>데이터</td>
            <td>데이터</td>
            <td>데이터</td>
            <td>데이터</td>
        </tr>
    </table>
    
    
    <hr />
    
    데이터 : <input type="text" /><br />
    데이터 : <input type="text" /><br />
    데이터 : <input type="text" /><br />
    데이터 : <input type="text" /><br />
    데이터 : <input type="text" /><br />
    데이터 : <input type="text" /><br />
    데이터 : <input type="text" /><br />
    데이터 : <input type="text" /><br />
    데이터 : <input type="text" /><br />
    데이터 : <input type="text" /><br />
    데이터 : <input type="text" /><br />
    데이터 : <input type="text" /><br />
    데이터 : <input type="text" /><br />
    데이터 : <input type="text" /><br />
    데이터 : <input type="text" /><br />
    데이터 : <input type="text" /><br />
    데이터 : <input type="text" /><br />
    데이터 : <input type="text" /><br />
    
        
</body>
</html>
cs


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

float 태그  (0) 2016.01.22
네이버 검색창 예제  (0) 2016.01.22
블럭태그, 인라인태그 예제  (0) 2016.01.22
박스모델 이용한 게시판 예제  (0) 2016.01.22
수평 정렬 - 인라인 태그, 블럭 태그  (0) 2016.01.22


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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
    
    
    /*  블럭태그 & 인라인 태그    */
    div { border: 1px solid black; }
    a { border: 1px solid black; }
    
    #box2 {
        width: 100px;
        height: 100px;
        padding: 20px;
        margin: 20px;
    }
    
    #link2 {
        /* 
            인라인태그는 크기 지정 불가능 
            -> 내용물의 크기가 곧 인라인태그의 크기로 지정
        */
        width: 100px;
        height: 100px;
        padding: 50px;
        margin: 50px;
    } /* 구글 */
    
    
</style>
</head>
<body>
    <!-- ex15.htm -->
    [연습 : 블럭태그& 인라인태그]
    <div id="box1">상자1</div>
    <div id="box2">상자2</div>
    <div id="box3">상자3</div>
    
    <hr />
    내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다.
    내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다.
    <a href="#" id="link1">네이버</a>
    <a href="#" id="link2">구글</a>
    <a href="#" id="link3">다음</a>    
    내용입니다. 내용입니다.내용입니다. 내용입니다. 내용입니다. 내용입니다.
    내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다.
    
    
 
</body>
</html>
cs


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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
    
    
    /*  블럭태그 & 인라인 태그    */
    div { border: 1px solid black; }
    a { border: 1px solid black; }
    
    div {
        /* display: inline;
        width: 500px;  -> 인라인태그는 width 못씀 */
        
        display: inline-block;
        width: 100px;
        height: 50px;
        margin: 50px;
    }
    
    a {
        display: block;
    }
    
    
    
    #menu {
        width: 500px;
    } /* 창 줄여도 움직이지 못하게 하려면.. */    
    
    #menu li {
        display: inline-block; /* 고정너비 */
        border: 1px solid black;
        width: 90px;
    }
        
        
</style>
</head>
<body>
    <!-- ex16.htm -->
    [연습 : 블럭태그& 인라인태그]<br /><br />
    <div id="box1">상자1</div>
    <div id="box2">상자2</div>
    <div id="box3">상자3</div>
    
    
    <hr />
    <a href="#" id="link1">네이버</a>
    <a href="#" id="link2">구글</a>
    <a href="#" id="link3">다음</a>    
    
    
    <hr />
    <!-- 메뉴 -->
    <ul id="menu">
        <li>시작페이지</li>
        <li>회원가입</li>
        <li>게시판</li>
        <li>Q/A</li>
        <li>오시는길</li>
    </ul>
        
 
</body>
</html>
cs


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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
    
    /* 가시성 */
    div {
        border: 1px solid black;
        width: 150px;
        height: 150px;
    }
    
    
    #box2 {
        /* visibility: hidden; */
        display: none;
    }
</style>
</head>
<body>
    
    <!-- ex17.htm -->
    
    
    [연습]
    
    div#box${상자}*3
    <div id="box1">상자</div>
    <div id="box2">상자</div>
    <div id="box3">상자</div>
    
    
</body>
</html>
cs


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

네이버 검색창 예제  (0) 2016.01.22
의사클래스 예제  (0) 2016.01.22
박스모델 이용한 게시판 예제  (0) 2016.01.22
수평 정렬 - 인라인 태그, 블럭 태그  (0) 2016.01.22
박스 모델  (0) 2016.01.22


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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
    #tblList {
        width: 600px;
        border: 1px solid gray;
        border-collapse: collapse;
    }
    #tblList td, #tblList th {
        border: 1px solid gray;
        foot-size: 12px;
        padding: 3px;
    }
    
    #tblList #co1l { width: 50px; }
    #tblList #co12 { width: 240px; }
    #tblList #co13 { width: 70px; }
    #tblList #co14 { width: 90px; }
    #tblList #co15 { width: 50px; } /* 너비 맞추기 */
    
    #tblList th {
        background-color: #CDCDCD;
    } /* 메뉴 배경색 */
    
    #tblList .cell1, #tblList .cell3, #tblList .cell4, #tblList .cell5 {
        text-align: center;
    } /* 정렬 */
    
    #tblList .cell2 {
        padding-left: 15px;
    }
    
    #list1 {
        /* list-style-image : url('images/bullet05.png'); */
        /* background-color:  yellow; */
    }
    #list1 li {
        /* background-color: red; */
        background-image: url('images/bullet05.png');
        background-repeat: no-repeat;
        list-style-type: none;
        padding-left: 20px; 
        background-position: 0px 2px;
        margin-left: -25px;
    } /* *** */
    #junior {
        background-image: url(images/sp.png);
        background-repeat: no-repeat;
        border: 0px solid black;
        width: 52px;
        height: 17px;
        background-position: -50px -70px;
    }
</style>
</head>
<body>
    <!-- ex14.htm -->
    
    
    [연습 : 게시판]
    <h2>게시판</h2>
    <table id="tblList">
        <tr>
            <!-- th#idcol$.cols*5 -->
            <th id="idcol1" class="cols">번호</th>
            <th id="idcol2" class="cols">제목</th>
            <th id="idcol3" class="cols">이름</th>
            <th id="idcol4" class="cols">날짜</th>
            <th id="idcol5" class="cols">읽음</th>        
        </tr>
        
        <!-- tr>td*5        
        tr*15>(td.cell1{$}+td.cell2{게시판 테스트입니다.$}+td.cell3{홍길동}+td.cell4{2015-01-$$}+td.cell5{15}) -->
        
        <tr>
            <td class="cell1">1</td>
            <td class="cell2">게시판 테스트입니다.1</td>
            <td class="cell3">홍길동</td>
            <td class="cell4">2015-01-01</td>
            <td class="cell5">15</td>
        </tr>
        <tr>
            <td class="cell1">2</td>
            <td class="cell2">게시판 테스트입니다.2</td>
            <td class="cell3">홍길동</td>
            <td class="cell4">2015-01-02</td>
            <td class="cell5">15</td>
        </tr>
        <tr>
            <td class="cell1">3</td>
            <td class="cell2">게시판 테스트입니다.3</td>
            <td class="cell3">홍길동</td>
            <td class="cell4">2015-01-03</td>
            <td class="cell5">15</td>
        </tr>
        <tr>
            <td class="cell1">4</td>
            <td class="cell2">게시판 테스트입니다.4</td>
            <td class="cell3">홍길동</td>
            <td class="cell4">2015-01-04</td>
            <td class="cell5">15</td>
        </tr>
        <tr>
            <td class="cell1">5</td>
            <td class="cell2">게시판 테스트입니다.5</td>
            <td class="cell3">홍길동</td>
            <td class="cell4">2015-01-05</td>
            <td class="cell5">15</td>
        </tr>
        <tr>
            <td class="cell1">6</td>
            <td class="cell2">게시판 테스트입니다.6</td>
            <td class="cell3">홍길동</td>
            <td class="cell4">2015-01-06</td>
            <td class="cell5">15</td>
        </tr>
        <tr>
            <td class="cell1">7</td>
            <td class="cell2">게시판 테스트입니다.7</td>
            <td class="cell3">홍길동</td>
            <td class="cell4">2015-01-07</td>
            <td class="cell5">15</td>
        </tr>
        <tr>
            <td class="cell1">8</td>
            <td class="cell2">게시판 테스트입니다.8</td>
            <td class="cell3">홍길동</td>
            <td class="cell4">2015-01-08</td>
            <td class="cell5">15</td>
        </tr>
        <tr>
            <td class="cell1">9</td>
            <td class="cell2">게시판 테스트입니다.9</td>
            <td class="cell3">홍길동</td>
            <td class="cell4">2015-01-09</td>
            <td class="cell5">15</td>
        </tr>
        <tr>
            <td class="cell1">10</td>
            <td class="cell2">게시판 테스트입니다.10</td>
            <td class="cell3">홍길동</td>
            <td class="cell4">2015-01-10</td>
            <td class="cell5">15</td>
        </tr>
        <tr>
            <td class="cell1">11</td>
            <td class="cell2">게시판 테스트입니다.11</td>
            <td class="cell3">홍길동</td>
            <td class="cell4">2015-01-11</td>
            <td class="cell5">15</td>
        </tr>
        <tr>
            <td class="cell1">12</td>
            <td class="cell2">게시판 테스트입니다.12</td>
            <td class="cell3">홍길동</td>
            <td class="cell4">2015-01-12</td>
            <td class="cell5">15</td>
        </tr>
        <tr>
            <td class="cell1">13</td>
            <td class="cell2">게시판 테스트입니다.13</td>
            <td class="cell3">홍길동</td>
            <td class="cell4">2015-01-13</td>
            <td class="cell5">15</td>
        </tr>
        <tr>
            <td class="cell1">14</td>
            <td class="cell2">게시판 테스트입니다.14</td>
            <td class="cell3">홍길동</td>
            <td class="cell4">2015-01-14</td>
            <td class="cell5">15</td>
        </tr>
        <tr>
            <td class="cell1">15</td>
            <td class="cell2">게시판 테스트입니다.15</td>
            <td class="cell3">홍길동</td>
            <td class="cell4">2015-01-15</td>
            <td class="cell5">15</td>
        </tr>
            
    </table>
    
    
    
    <hr />
    <h3>오늘의 할일</h3>
    
    <ol id="list1">
        <li>개인 문서 작성하기</li>
        <li>HTML 정리하기</li>
        <li>강아지 밥주기</li>
        <li>세탁물 찾아오기</li>
    </ol>
    
    <ol id="list2">
        <li>개인 문서 작성하기</li>
        <li>HTML 정리하기</li>
        <li>강아지 밥주기</li>
        <li>세탁물 찾아오기</li>
    </ol>
    
    
    
    <hr />
    <h3>이미지 출력</h3>
    <div id="junior"></div>
    
    
        
</body>
</html>
cs


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

의사클래스 예제  (0) 2016.01.22
블럭태그, 인라인태그 예제  (0) 2016.01.22
수평 정렬 - 인라인 태그, 블럭 태그  (0) 2016.01.22
박스 모델  (0) 2016.01.22
의사 클래스  (0) 2016.01.22


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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
    
    /* 
    
        수평 정렬 
        1. 인라인 태그
            - 본인 자신 스스로 정렬 불가능
            - 내용물의 정렬도 불가능
            - 부모를 통해서 정렬 가능
        2. 블럭 태그
            - 본인 자신 스스로 정렬 불가능
            - 내용물의 정렬의 가능
            
        
    */
    
    
    /* 인라인 태그 */
    body {
        /* text-aglin: center; */
    }
    span {
        background-color: yellow;
    }
    /* 블럭 태그*/
    /* div {
        background-color: red;
        width: 100px;
        text-align: center;
    } */
        
    #pBox {
        background-color: yellow;
        text-align: center; /* 블럭태그 정렬 x */
    }
    
    #cBox {
        background-color: red;
        width: 100px;
        /* margin-left: 150px; 상대적인 사이즈로 정렬됨..nono */
        /* margin-left: auto;
        margin-right: auto; 자주 쓰임 */ 
        
        margin: 0px auto;
    }
        
</style>
 
</head>
<body>
 
    <!-- ex13.htm -->
 
    
    안녕하세요 <span>홍길동</span>입니다.
 
    <div id="pBox">
        상자
        <div id="cBox">상자</div>
        상자
    </div>
    
    
</body>
</html>
cs


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

블럭태그, 인라인태그 예제  (0) 2016.01.22
박스모델 이용한 게시판 예제  (0) 2016.01.22
박스 모델  (0) 2016.01.22
의사 클래스  (0) 2016.01.22
텍스트 관련 속성 - 글자색, 정렬, 꾸밈, 들여쓰기, 크기, 두께, 서체, 수치표현  (0) 2016.01.22


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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
    /* 
        박스 모델, Box Model **
        - HTML 태그는 화명상 출력이 될때., 사각형의 형태로 출력
        1. 크기(width, height)
        2. 테두리(border)
        3. 여백(안쪽(padding), 바깥쪽(margin))
    */
    
    #box1 {
        /* border-style: solid;
        border-width: 10px;
        border-color: yellow; */
        
        /* border: solid 10px black; */
        
        /* border-top: 10px solid red;
        border-bottom: 20px dashed green; */
        
        border: 2px solid balck;
        border-left: 20px solid black;
        /* border-right: 20px solid black; */  
        border-right: 0px;
        
    }
    
    #txt1 {
        /* background-color: : yellow; */
        border: 1px solild gray;
    }
    /* 테두리** */
    #tbl1 {
        border: 1px solid gray;
        border-collapse: collapse; /* 선 합치기 */
    }
    
    #tbl1 td /* #tbl1할아버지 */{
        border: 1px solid gray;
        padding: 5px;
        padding-left: 20px;
    }
    
    
    
    /*  
        HTML 태그(객체)의 크기
        1. 블럭태그
            - 너비 : 항상 부모를 꽉 채운다. (100%)
            - 높이 : 내용물의 높이
        2. 인라인태그
            - 너비 : 내용물의 너비만큼
            - 높이 : 내용물의 높이
        
        그런데??? width, height 속성
        - 태그의 종류에 상관없이 너비, 높이를 지정 가능
    */
    #box2 {
        border: 10px solid red;
        width: 100px;
        height: 100px;
    }
    #txt1 {
        width: 200px;
        height: 100px;
    }
    #tbl1 {
        width: 200px;
        /* height: 200px; 잘안씀 */
    }
    
    
    
    #box3 {
        border: 1px solid black;
        width: 200px;
        height: 200px;
        /* padding: 20px; */
        padding-left: 20px;
        padding-top: 50px;
        padding-right: 0px;
        padding-bottom: 0px;
    }
    
    .box {
        border: 1px solid black;
        width: 100px;
        height: 100px;
        
    }
    
    #box4 {
        background-color: yellow;    
        /* margin-bottom: 30px; */
    }
    
    #box5 {
        background-color: orange;
        /* margin: 20px; */
        /* margin-top: 20px;
        margin-bottom: 20px; */
        
        /* margin: 20px 50px 70px 100px; */
        /* margin: 20px 50px; */
        margin: 20px 0px;        
    }
    
    
    
    
    #box7 {
        /* 박스 모델 정의 */
        
        border: 10px solid black;
        width: 100px;
        height: 100px;
        padding: 10px;
        margin: 10px;
        
    }
        
</style>
</head>
<body>
    <!-- ex12_box.htm -->
    [연습 : 박스]<br /><br />
    <div id="box1">상자1</div>
    <div id="box2">상자2</div>
    뒤의 내용물.,
    
 
    <hr />
    <input type="text" id="txt1" />
    
 
    <hr />
    <table id="tbl1">
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>3</td>
            <td>4</td>
        </tr>
    </table>
    
    
    <hr />
        <div id="box3">안녕하세요 홍길동님~안녕하세요 홍길동님~안녕하세요 홍길동님~
    안녕하세요 홍길동님~안녕하세요 홍길동님~안녕하세요 홍길동님~안녕하세요 홍길동님~
    안녕하세요 홍길동님~안녕하세요</div>
 
    
    <hr />
    <div id="box4" class="box">상자</div>
    <div id="box5" class="box">상자</div>
    <div id="box6" class="box">상자</div>
    
    
    <hr />
    위의 내용********
    <div id="box7">상자</div>
    아래의 내용
        
        
        
</body>
</html>
cs


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

박스모델 이용한 게시판 예제  (0) 2016.01.22
수평 정렬 - 인라인 태그, 블럭 태그  (0) 2016.01.22
의사 클래스  (0) 2016.01.22
텍스트 관련 속성 - 글자색, 정렬, 꾸밈, 들여쓰기, 크기, 두께, 서체, 수치표현  (0) 2016.01.22
css 색상표현법  (0) 2016.01.22


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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
    
    /*  
        Pseudo Class, 의사 클래스
        - 몇몇 태그들이 제공받는 클래스    
    */
    
    /* .link {
        color: red;
    } */
    
    /* a:link { color:yellow; } */ /* 한번도 가보지 않은 URL */
    /* a:visited { color:red; } */ /* 방문했던 URL */
    /* a:hover { color:green; } */ /* 마우스를 올렸을 때 */
    /* a:artive { color:orange; } */ /* 활성화 되었을 때 */
    
    
    /* 일반적인 링크 서식 */
    a {
        /* 위의 4가지 상태 모두 포함 */
        color: black;
        font-size: 12px;
        text-decoration: none;    
    }
    
    a:hover {
        color: red;
    } /* 추가적으로 같이 잘 쓰이는., */
    #list1 {
        /* list-style-type: disc; */
        list-style-image: url(images/bullet09.png);
    }
    /* 배경(색, 이미지) */
    body /* #box */ {
        /* background-color: yellow; */
        background-image: url(images/catty01.png);
        background-repeat: no-repeat;
        /* left|center|right    top|center|bottom */
        background-position: center top;
        background-attachment: scroll;
    }
    #txtSearch {
        /* background-image: url(images/hangame.png);
        background-repeat: no-repeat;
        background-position: center center; */
        
        /* background: url(images/hangame.png); */
        /* background: red; */
        
        /* 속성 그룹 ( 여러개의 속성을 한번에 지정) */
        background: url(images/hangame.png) no-repeat center;
    }
</style>
</head>
<body>
    <!-- ex11.htm -->
    [연습 : ]<br /><br />
    <a href="http://www.codeproject.com">코드 프로젝트</a>
 
 
    <hr />
    <ol id="list1">
        <li>강아지</li>
        <li>고양이</li>
        <li>닭</li>
        <li>염소</li>
    </ol>
 
 
    <hr />
    <div id="box">상자</div>
 
 
    <hr />
    검색 : <input type="text" id="txtSearch" size="50" />
 
 
    <br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br />
 
 
</body>
</html>
 
cs


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

수평 정렬 - 인라인 태그, 블럭 태그  (0) 2016.01.22
박스 모델  (0) 2016.01.22
텍스트 관련 속성 - 글자색, 정렬, 꾸밈, 들여쓰기, 크기, 두께, 서체, 수치표현  (0) 2016.01.22
css 색상표현법  (0) 2016.01.22
속성 선택자 / zen coding(emmet) / PCDATA  (0) 2016.01.22


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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
        
    /* 텍스트 관련 속성 */
    #p1 {
        /* 글자색 */
        color: #2f2f2f;
    
        /* 텍스트 정렬 */
        text-align: left;
        
        /* 텍스트 꾸밈 */
        text-decoration: none;
        
        /* 문단 들여쓰기 */
        text-indent: 10px;
        /* 텍스트 크기 */
        /* font-size: 10pt; */
        /* font-size: 9pt; */
        /* font-size: 12px; */
        /* font-size: 0.75em; */
        /*  
            CSS 수치 표현
            - 단위를 반드시 붙인다.
            - px, pt, cm, mm, em, ex 등.,
            
            - pt : 글꼴 크기
            - px : 해상도(점), 사이즈, 좌표
            - em : 글꼴 크기(기본 크기의 상대배율)
            
        */
                
        /* 
            서체 
            - 브라우저가 동작중인 컴퓨터의 설치된 서체만 접근 가능
            - 웹폰트        
        */
        font-family: 'Malgun Gothic', 굴림;
        
        /* 폰트 스타일 */
        font-style: italic;
        
        /* 폰트 두께 */
        font-weight: bold;
                        
    }
    #p2 {
        /* 일반적인 설정 */
        font-family: 굴림;
        font-size: 12pt;
        color: #2f2f2f;
        line-height: 100%;
    }
</style>
</head>
<body>
    <!-- ex10.htm -->
    
    
    [연습 : 텍스트 속성]
        <p id="p1">지난해 7월에는 서울 강남의 한 성형외과에서 유령의사에 의한 
    대리수술 문제가 불거진 데 이어, <!-- <br /><img src="images/face01.png"><br /> --> 
    11월에는 인천 모 병원에서 성형외과 전공의가 음주 수술을 해 물의를 빚었다.</p>
    
    
        <p id="p2">지난해 7월에는 서울 강남의 한 성형외과에서 유령의사에 의한 
    대리수술 문제가 불거진 데 이어, 11월에는 인천 모 병원에서 성형외과 전공의가 음주 수술을 해 물의를 빚었다.</p>
    
    
    
</body>
</html>
cs


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

박스 모델  (0) 2016.01.22
의사 클래스  (0) 2016.01.22
css 색상표현법  (0) 2016.01.22
속성 선택자 / zen coding(emmet) / PCDATA  (0) 2016.01.22
인접 형제 선택자, 형제 선택자  (0) 2016.01.22


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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
    
    
    
    /* 
        배경색, Background-color
        - 해당 태그의 영역의 배경을 채운다.
        
        전경색, fore-color
        - color
        - 글자색
        
        
        CSS 색상 표현법
        1. color name : red, yellow
        2. RGB Color(hex) : #FF00AA
        3. RGB Color(dex) : rgb(255.0.128)
    
        CSS 속성은 모든 태그에 적용이 가능하다. (*************)    
        HTML 서식은 일부 태그에만 적용이 가능하다.
    
    */    
    
    
    #div1 {
        /* background-color: red; */
        /* background-color: # FF00AA */
        background-color: rgb(128,0,255);
    }
    
    #name { background-color: yellow; }
    
    
    
</style>
 
 
</head>
<body>
 
    <!-- ex09.htm -->
 
    aaa
    <div id="div1">영역입니다.</div>
    bbb
    
    
    <hr />
    안녕하세요 <span id="name">홍길동</span>입니다.
    
    
    <hr />
    <input type="text" id="txt1" style="background-color:black;color:white;" />
    
    
    
</body>
</html>
cs


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

의사 클래스  (0) 2016.01.22
텍스트 관련 속성 - 글자색, 정렬, 꾸밈, 들여쓰기, 크기, 두께, 서체, 수치표현  (0) 2016.01.22
속성 선택자 / zen coding(emmet) / PCDATA  (0) 2016.01.22
인접 형제 선택자, 형제 선택자  (0) 2016.01.22
자손 선택자  (0) 2016.01.22

+ Recent posts

티스토리툴바