11.웹페이지제작

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
<!DOCTYPE>
 
<html lang="ko">
 
<head>
    <meta charset="UTF-8">
    <title>만나 공지</title>
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="style.css">
    
    <link href='http://fonts.googleapis.com/css?family=Paytone+One' rel='stylesheet' type='text/css'>
        
    <link href='http://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css' 
    rel='stylesheet'>
    
    </head>
 
    <body>
        <div class="box1">
        
        <div class="site">
        <h1><a href="#">만나 공지사항</a></h1>
        </div>
        
        </div>
 
 
        <div class="box2">
        <div class="box2-inner">
        
            <nav class="menu">
            <ul>
                <li><a href="#">메인</a></li>
                <li><a href="#">회사</a></li>
                <li><a href="#">상품</a></li>
                <li><a href="#">자료</a></li>
                <li><a href="#">공지</a></li>
                <li><a href="#">문의</a></li>
 
            </ul>
            </nav>
            
            </div>
        </div>
 
            <div class=boxA>
        <div class="box3">
        
        <!--기사카테고리-->
        <div class="story-cat">
        <ul>
        <li><a href="#">소식</a></li>
        <li><a href="#">정보</a></li>
        </ul>
        </div>
        
        
        <article class="story">
            <h1>만나홈페이지가 새롭게 개설되었습니다.</h1>
            
            <div class="storyinfo">
            <time datetime="2016-11-3">
            <i class="fa fa-clock-o"></i>
            2016년 11월 3일</time>
            </div>
            
            
            <p><img src="a.jpg" width="600" height="400"></img></p>
            
            <h2>11월의 만나 소식</h2>
            
            <p>한국 최초의 전도형 주문QT책자 만나홈페이지가 새롭게 탄생했습니다. 앞으로 주보시안,캘린더,소식지,QT책자 등 다양한 문서자료를 업로드할
            예정입니다. 자주 방문하셔서 퀄리티 높은 자료들 많이 받아가시고 문서선교를 통해 큰 부흥이 있길 바랍니다.</p>
        
            
            <h2>11월의 만나 공유</h2>
            
            <p>한국 최초의 전도형 주문QT책자 만나홈페이지가 새롭게 탄생했습니다. 앞으로 주보시안,캘린더,소식지,QT책자 등 다양한 문서자료를 업로드할
            예정입니다. 자주 방문하셔서 퀄리티 높은 자료들 많이 받아가시고 문서선교를 통해 큰 부흥이 있길 바랍니다.</p>
            
            <div class="share">
                <ul>
                <li><a href="#" class="share-tw"><i class="fa fa-twitter"></i><span>Twitter</span>로 공유</a></li>
            
                
                
                <li><a href="#" class="share-fb"><i class="fa fa-facebook"></i><span>FaceBook</span>으로 공유</a></li>
                
                
            
                <li><a href="#" class="share-gp"><i class="fa fa-google-plus"></i><span>Google+</span>로 공유</a></li>
                </ul>
            
            
            </div>
            
    </article>
                <article class="relation">
                <h1>관련기사</h1>
                <ul>
                    <li><a href="#"> <img src="xc.jpg" alt=""/>
                    <div class="text">
                    만나주보 자료 다운받는법
                    </div>
                    
                    
                    </a></li>
 
                <li>
                <a href="#">
                    <img src="xc.jpg" alt=""/>
                    <div>
                    만나주보 자료 다운받는법
                    </div>
                </a>
                </li>
                    
 
                <li>
                <a href="#">
                    <img src="xc.jpg" alt=""/>
                    <div>
                    만나주보 자료 다운받는법
                    </div>
                </a>
                </li>                    
    
                    <li>
                <a href="#">
                    <img src="xc.jpg" alt=""/>
                    <div>
                    만나주보 자료 다운받는법
                    </div>
                </a>
                </li>    
                </ul>
                
                
                </article>
                
        
        </div>
 
        
        <div class="box4">
            
            <div class="box4-1">
            
            <aside class="sidemenu">
                <h1>특집 소식</h1>
                <ul>
                    <li><a href="#"><i class="fa fa-caret-right"></i>만나메뉴 들어갈자리1</a></li>
                    <li><a href="#"><i class="fa fa-caret-right"></i>만나메뉴 들어갈자리2</a></li>
                    <li><a href="#"><i class="fa fa-caret-right"></i>만나메뉴 들어갈자리3</a></li>
                    <li><a href="#"><i class="fa fa-caret-right"></i>만나메뉴 들어갈자리4</a></li>
                
                </ul>
            
            
            </aside>
        
        
                <aside class="recommend">
                <h1>특집 정보</h1>
                <ul>
                    <li><a href="#"> <img src="ty.jpg" alt="">
                    
                    <div class="text">
                    특집 정보 들어갈자리1</div></a></li>
                    
                    
                    
                    <li><a href="#">
                    <img src="yt.jpg" alt="">
                    <div class="text">
                    특집 정보 들어갈자리2</div></a></li>
                    
                
                </ul>
            
            
            </aside>
            
            </div>
            
            <div class="box4-2">
                    <aside class="popular">
                <h1>추천 정보</h1>
                <ul>
                    <li>
                        <a href="#">
                            <img src="fl.jpg" alt="">
                                <div class="text">
                                    추천 정보 들어갈자리1
                                        <span>정보</span>
                                </div>
                    
                        </a>
                    </li>
                    
                    <li><a href="#"><img src="fl.jpg" alt=""><div class="text">
                                    추천 정보 들어갈자리2
                                        <span>정보</span>
                                </div></a></li>
                    <li><a href="#"><img src="fl.jpg" alt=""><div class="text">
                                    추천 정보 들어갈자리3
                                        <span>정보</span>
                                </div></a></li>
                    <li><a href="#"><img src="fl.jpg" alt=""><div class="text">
                                    추천 정보 들어갈자리4
                                        <span>정보</span>
                                </div></a></li>
                
                </ul>
            
            
            </aside>
            
            </div>
        </div>
            </div>
        
        <div class="box5">
        <div class="box5-inner">
        <div class="copyright">
    
    <p>Copyright &copy; MANA</p>
</div>
        </div>
        </div>
        
    </body>
 
</html>
Colored by Color Scripter
cs

2.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
@charset "utf-8";
body{ font-family:'맑은 고딕','Apple SD Gothic Neo',sans-serif;margin:0}
.box1,.box5-inner,.box2-inner, .boxA {padding-left:10px; padding-right:10px}
.site h1 a{color:black; text-decoration:none}
.site h1 {margin:0; font-size:30px; font-family:'Paytone One', sans-serif;font-weight:normal}
.menu ul{ list-style:none ;}
.menu li a{color:black; font-size:14px; text-decoration:none; display:block; padding:15px }
.menu li a:hover{ background-color:#eeeeee}
.menu ul:after{content:""; display:block; clear:both}
.menu ul li{float:left; width:auto}
.story h1{font-size:36px; margin-top:0; margin-bottom:20px;}
.story p{margin-top:0; margin-bottom:20px;}
.sidemenu ul{list-style:none;margin:0;padding:0}
.sidemenu li a{text-decoration:none; color:black; font-size:14px; padding:5px; display:block}
.sidemenu li a:hover{background-color:#eeeeee}
.sidemenu h1{margin-top:0; margin-bottom:10px; border-bottom:dotted 2px #dddddd;color:#666666;font-size:18px}
.sidemenu{margin-bottom:30px} 
.recommend ul {margin:0; padding:0; list-style:none; }
.recommend li a{text-decoration:none;color:black; font-size:14px; color:#000000; padding:0; display:block;
                margin-bottom:10px}
.recommend li a:hover{background-color:#eeeeee}
.recommend h1{margin-top:0; margin-bottom:10px; border-bottom:dotted 2px #dddddd; color:#666; font-size:18px}
.recommend{margin-bottom:30px}
.popular ul {margin:0; padding:0; list-style:none; }
.popular li a{text-decoration:none;color:#2288bb;
            font-size:14px; padding:5px; display:block;
            border-bottom: dotted 1px #dddddd
            }
.popular li a:hover{background-color:#eeeeee}
.popular h1{margin-top:0; margin-bottom:10px; border-bottom:dotted 2px #dddddd; color:#666; font-size:18px}
.popular{margin-bottom:30px}
.copyright p{ margin:0; color:#666666; font-size:14px}
.box2{background-color:#FFCBCB;margin:0}
.box5{border-top: solid 1px #dddddd}
.box1{padding-top:8px; padding-bottom:8px}
.box3{padding-top:10px; padding-bottom:30px}
.box4{padding-top:40px; padding-bottom:30px}
.box5{padding-top:15px; padding-bottom:15px}
.storyinfo{margin-bottom:20px;margin-top:-10px}
.storyinfo i{margin-right:5px; color:#aaaaaa;font-size:20px}
/*기사의분류 */
.story-cat{margin-bottom:30px;}
.story-cat ul{ margin:0; padding:0; list-style:none}
.story-cat li a{ display:block; padding:3px 5px; color:#000000; font-size:12px; text-decoration:none;
                background-color:#FFA648; color:#ffffff; margin-right:5px;
                border-radius:2px;}
.story-cat li a:hover{background-color:#eeeeee}
.stroy-cat ul:after{ content:""; display:block; clear:both}
.story-cat li{float:left; width:auto}
.story h2{margin-top:40px; padding-left:10px; border-left:solid 10px #7cbac1;font-weight:normal}
.sidemenu i {margin-right:5px; color:#888888}
.popular li a img{border:none}
.popular a:after{content:"";display:block;clear:both}
.popular img{ float:left; width:60px;}
.popular .text{float:none; width:auto; margin-left:60px;padding-left:15px}
.popular span {display:block; color:#666666; font-size:12px}
.recommend img{ width:100%; height:auto; border:none; vertical-align:bottom}
/*글에 검은색 바 입히기*/
.recommend .text{padding: 5px 10px; background-color: rgba(0,0,0,0.5); color:#ffffff}
/*특집정보 메뉴의 글자를 중첩*/
.recommend a{position: relative}
.recommend .text{ position: absolute; bottom:0; left:0; width:100%;
box-sizing:border-box;-moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;}
    
/*특집정보 메뉴에 마우스 올렸을때 색 변화*/
.recommend li a:hover{background-color:#eeeeee;opacity:0.8}
/*sns 공유 버튼 가로정렬 및 마우스 올렸을 때 색변화*/
.share{margin-top:40px}
.share ul{ margin:0; padding:0; list-style:none;}
.share ul:after{content:""; display:block; clear:both}
.share li{float:left; width:33.3333%;}
.share li a{display:block; padding:10px 5px; color:white; font-size:14px; text-decoration:none; text-align:center}
.share li a:hover{ opacity:0.8}
.share-tw{background-color:#55acee}
.share-fb{background-color:#3b5998}
.share-gp{background-color:#dd4b39}
/*관련기사*/
.relation{margin-top:40px; padding:20px; background-color:#EAEAEA}
.relation h1{margin-top:0; margin-bottom:5px; color:black; font-size:20px; font-weight:normal}
.relation ul{margin: 0; padding:0; list-style:none}
.relation li{float:left; width:25%}
.relation li a{ display:block; padding:5px; color:#000000; font-size:14px; text-decoration:none}
.relation li a:hover{text-decoration:underline}
.relation ul:after{content:""; display:block; clear:both}
.relation img{max-width:100%; height:auto; border:none}
/*599이하*/
@media(max-width:599px){
    
    .relation{padding:10px}
    
    .relation li{width:50%}
    
    .relation li:nth-child(3){clear:both}
    
    
    .share span{display: inline-block; text-indent:-9999px}
    
    .menu li a{ padding: 10px 3px; font-size:11px}
    
    .site h1 {font-size:20px}
    .story h1 {margin:0; font-size:26px}
    
    .box1{padding-top:4px;
        padding-bottom:4px}
    .box3{padding-top:15px;}
     
        
    
.box4:after{ content:""; display:block; clear:both}
    .box4-1{float:left; width:50%}
    .box4-2{float:left; width:50%}
    
    
    .box4-1{padding-right:20px; -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box}
    .box4-2{padding-left:20px;-moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box}
    
}
@media(min-width:600px) and (max-width:767px){
    
}
@media(min-width:768px){
/*box3과 box4를 가로 정렬하는 설정*/
.boxA:after {content:""; clear:both; display:block}
.box3{ float:left; width:70%; padding-right:50px;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box
}
.box4{float:left; width:30%}
}
/*가운데 정렬하기*/
@media (min-width:1040px){
    
    .box1,.box5-inner,.box2-inner, .boxA {
        
        width:1000px; margin-left:auto; margin-right:auto
        
        
    }
    
    
}
 
 
    
 
 
 
Colored by Color Scripter
cs

저작자표시

'매일코딩 > HTML&CSS3' 카테고리의 다른 글

10.웹페이지제작 - 컨텐츠 페이지 (0)	2016.11.02
9.웹페이지제작 - 준비2 (0)	2016.11.02
8.웹페이지제작 - 준비1 (0)	2016.11.02
7.레이아웃 - 박스 겹치기 (2)	2016.11.02
6.레이아웃 - 박스 정렬 순서 (0)	2016.11.02

길위의 개발자

11.웹페이지제작 - 완성

'매일코딩 > HTML&CSS3' 카테고리의 다른 글

댓글

티스토리툴바

11.웹페이지제작 - 완성

'매일코딩 > HTML&CSS3' 카테고리의 다른 글

관련글

댓글

티스토리툴바