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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
    
    /* 상단 */
    .item {
        border-top: 1px solid gray;
        width: 690px;
        margin-bottom: 25px;
        padding-top: 10px;
    }
    
    .item .header {
        margin: 5px 0px;
    }
    
    .item .header span:first-child {
        font-weight: bold;
        font-size: 12px;
        color: #333;
        margin-right: 7px;
    }
    
    .item .header span:last-child {
        font-size: 12px;
        color: #999;
        letter-spacing: 1px;
    } 
    
    
    /* 하단 */
    .item .picsText {
        font-size: 12px;
        color: #888;
        font-weight: bold;
        margin-top: 7px;
    }
    
    .item .txt {
        font-size: 13px;
        color: #313181;
        font-weight: bold;
        font-family: 돋움;
    }
    
    .item .pics {
        float: left;
        width: 150px;
        margin: 10px;
    }
    
    .item .txts {
        float: left;
        width: 500px;
        margin: 10px;
    }
    
    .item .txt {
        margin-bottom: 6px;
        text-align: left;
    }
    
    .item .txt span:last-child {
        float: right;
        font-size: 12px;
        color: #999;
        font-weight: normal;
    }
    
    
</style>
</head>
<body>
    
    <!-- ex24.htm -->
    
    [ 연습 : 네이버 뉴스, 장르(생활/문화)섹션 따라하기]
    <!-- <div class="item">
        <div class="header">섹션명</div>
        <div class="content">
            <div class="pics">
                <img src="images/pic01.png" class="img" />
                <div class="picsText">표준단독주택 공시가격 3.81% ↑…고가주택…</div>
            </div>
            <div class="txt2">
                <div class="txt">
                    <span>기사제목</span> <img src="images/ico_photo.gif" /> <span>언론사</span>
                </div>
                <div class="txt">
                    <span>기사제목</span> <img src="images/ico_photo.gif" /> <span>언론사</span>
                </div>
                <div class="txt">
                    <span>기사제목</span> <img src="images/ico_photo.gif" /> <span>언론사</span>
                </div>
                <div class="txt">
                    <span>기사제목</span> <img src="images/ico_photo.gif" /> <span>언론사</span>
                </div>
                <div class="txt">
                    <span>기사제목</span> <img src="images/ico_photo.gif" /> <span>언론사</span>
                </div>
            </div>
        </div>
    </div>
 -->
 
     <div class="item">
        <div class="header">
            <span>경제</span> 
            <span>| 일반 | 금융 | 생활경제</span>
        </div>
        <div class="content">
            <div class="pics">
                <img src="images/pic01.png" class="img" />
                <div class="picsText">표준단독주택 공시가격 3.81% ↑…고가주택…</div>
            </div>
            <div class="txts">
                <div class="txt">
                    <span>삼성전자, 작년 시설투자 23조4천억원 집행…올해 더 늘려(종합)</span> <img src="images/ico_photo.gif" /> <span>연합뉴스</span>
                </div>
                <div class="txt">
                    <span>악몽딛고…5년만에 고개 든 저축은행</span> <img src="images/ico_photo.gif" /> <span>매일경제</span>
                </div>
                <div class="txt">
                    <span>IMF "6월말까지 쿼터 개혁 마무리하겠다"</span> <img src="images/ico_photo.gif" /> <span>이데일리</span>
                </div>
                <div class="txt">
                    <span>[한수진의 SBS 전망대] "1% 초저금리 대출? 집값 떨어지면 대출자 부담"</span> <img src="images/ico_photo.gif" /> <span>SBS</span>
                </div>
                <div class="txt">
                    <span>건축학회 "제2롯데월드 소음·진동 안전성 문제없어"</span> <img src="images/ico_photo.gif" /> <span>머니투데이</span>
                </div>
            </div>
            <div style="clear:both;"></div>
        </div>
    </div>
         
         <div class="item">
        <div class="header">
            <span>경제</span> 
            <span>| 일반 | 금융 | 생활경제</span>
        </div>
        <div class="content">
            <div class="pics">
                <img src="images/pic01.png" class="img" />
                <div class="picsText">표준단독주택 공시가격 3.81% ↑…고가주택…</div>
            </div>
            <div class="txts">
                <div class="txt">
                    <span>삼성전자, 작년 시설투자 23조4천억원 집행…올해 더 늘려(종합)</span> <img src="images/ico_photo.gif" /> <span>연합뉴스</span>
                </div>
                <div class="txt">
                    <span>악몽딛고…5년만에 고개 든 저축은행</span> <img src="images/ico_photo.gif" /> <span>매일경제</span>
                </div>
                <div class="txt">
                    <span>IMF "6월말까지 쿼터 개혁 마무리하겠다"</span> <img src="images/ico_photo.gif" /> <span>이데일리</span>
                </div>
                <div class="txt">
                    <span>[한수진의 SBS 전망대] "1% 초저금리 대출? 집값 떨어지면 대출자 부담"</span> <img src="images/ico_photo.gif" /> <span>SBS</span>
                </div>
                <div class="txt">
                    <span>건축학회 "제2롯데월드 소음·진동 안전성 문제없어"</span> <img src="images/ico_photo.gif" /> <span>머니투데이</span>
                </div>
            </div>
            <div style="clear:both;"></div>
        </div>
    </div>
    
    
         <div class="item">
        <div class="header">
            <span>경제</span> 
            <span>| 일반 | 금융 | 생활경제</span>
        </div>
        <div class="content">
            <div class="pics">
                <img src="images/pic01.png" class="img" />
                <div class="picsText">표준단독주택 공시가격 3.81% ↑…고가주택…</div>
            </div>
            <div class="txts">
                <div class="txt">
                    <span>삼성전자, 작년 시설투자 23조4천억원 집행…올해 더 늘려(종합)</span> <img src="images/ico_photo.gif" /> <span>연합뉴스</span>
                </div>
                <div class="txt">
                    <span>악몽딛고…5년만에 고개 든 저축은행</span> <img src="images/ico_photo.gif" /> <span>매일경제</span>
                </div>
                <div class="txt">
                    <span>IMF "6월말까지 쿼터 개혁 마무리하겠다"</span> <img src="images/ico_photo.gif" /> <span>이데일리</span>
                </div>
                <div class="txt">
                    <span>[한수진의 SBS 전망대] "1% 초저금리 대출? 집값 떨어지면 대출자 부담"</span> <img src="images/ico_photo.gif" /> <span>SBS</span>
                </div>
                <div class="txt">
                    <span>건축학회 "제2롯데월드 소음·진동 안전성 문제없어"</span> <img src="images/ico_photo.gif" /> <span>머니투데이</span>
                </div>
            </div>
            <div style="clear:both;"></div>
        </div>
    </div>
 
</body>
</html>
cs


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

네이버뉴스의 네티즌 와글와글 따라하기  (0) 2016.01.22
<div>로 레이아웃 짜기 예제  (0) 2016.01.22
float 태그  (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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
    
    #news {
        width: 660px;
        border: 0px solid black;
    }
    
    #news .itemImg {
        width: 140px;
        height: 84px;
    }
    
    #news .itemText {
        color: #4f4f4f;
        font-size: 12px;
        line-height: 16px;
        margin-top: 5px;
    }
    
    #news #title {
        font-size: 14px;
        font-weight: bold;
        color: #2f56aa;
        font-family: 돋움;
        margin: 7px;
    }
    
    #news .item {
        width: 140px;
        border: 0px solid red;
        float: left;
        margin-left: 14px;
    }
</style>
</head>
<body>
    <!-- ex23.htm -->
    [ 연습 : 네이버 뉴스, 네티즌 와글와글 따라하기 ]
    
    <div id="news">
        <div id="title">네티즌 와글와글</div>
        <div id="content">
            <div class="item">
                <img src="images/01.jpg" class="itemImg" />
                <div class="itemText">여군, 남군 관사 출입금지…軍, 성군기 행동… </div>
            </div> <!-- 주황상자 -->
            <div class="item">
                <img src="images/02.jpg" class="itemImg" />
                <div class="itemText">작년 서울 청년 실업률 2000년 이후 처음 10… </div>
            </div>
            <div class="item">
                <img src="images/03.jpg" class="itemImg" />
                <div class="itemText">'열정페이'…내 청춘을 갉아먹었다 </div>
            </div>
            <div class="item">
                <img src="images/04.jpg" class="itemImg" />
                <div class="itemText">1억6천만년 된 뱀 화석 발견…뱀 연구 신기원…</div>
            </div>
            <div style="clear:both; "></div> <!-- float속성 끊기 -> clear: both; 만들어줘야., -->
        </div>
    </div>
 
 
 
</body>
</html>
 
cs


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

네이버 뉴스의 장르 섹션 따라하기  (0) 2016.01.22
<div>로 레이아웃 짜기 예제  (0) 2016.01.22
float 태그  (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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
    
    
    #menu {
        border: 10px solid red;
        width: 600px;
        height: 50px;
    }
    
    #subMenu {
        border: 10px solid orange;
        width: 150px;
        height: 350px;
        float: left;
    }
    
    #content {
        border: 10px solid blue;
        width: 430px;
        height: 350px;
        float: left;
    }
    
    #footer {
        border: 10px solid yellow;
        width: 600px;
        height: 50px;
        clear: both;
    }
    
    #main {
        width: 620px;
    }
    
    
</style>
</head>
<body>
    
    
    <!-- ex22.htm ***** -->
    <!-- 
        화면 전체 레이아웃 구성
        1. table 태그
        2. div 태그 + float 속성*
    -->
    
    
    [ 연습 : div로 레이아웃 짜기 ]
    <div id="main" >
    <div id="menu">메뉴</div>
    <div id="subMenu">서브메뉴</div>
    <div id="content">메인</div>
    <div id="footer">하단부</div>
    </div>
    
    
    
</body>
</html>
cs


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

네이버 뉴스의 장르 섹션 따라하기  (0) 2016.01.22
네이버뉴스의 네티즌 와글와글 따라하기  (0) 2016.01.22
float 태그  (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
<!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

+ Recent posts

티스토리툴바