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>
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
        
        
    }
    
    
}
 
 
    
 
 
 
cs


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

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


 





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
<!DOCTYPE>
 
<html lang="ko">
 
<head>
    <meta charset="UTF-8">
    <title>만나 공지</title>
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="style.css">
    
</head>
 
    <body>
    
        <div class="box1">
        
        <div class="site">
        <h1><a href="#">만나 공지사항</a></h1>
        </div>
        
        </div>
 
 
        <div class="box2">
            <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 class=boxA>
        <div class="box3">
        <article="story">
            <h1>만나홈페이지가 새롭게 개설되었습니다.</h1>
            
            <p><img src="a.jpg" width="500" height="500"></img></p>
            
            <p>한국 최초의 전도형 주문QT책자 만나홈페이지가 새롭게 탄생했습니다. 앞으로 주보시안,캘린더,소식지,QT책자 등 다양한 문서자료를 업로드할
            예정입니다. 자주 방문하셔서 퀄리티 높은 자료들 많이 받아가시고 문서선교를 통해 큰 부흥이 있길 바랍니다.</p>
            
            <p>한국 최초의 전도형 주문QT책자 만나홈페이지가 새롭게 탄생했습니다. 앞으로 주보시안,캘린더,소식지,QT책자 등 다양한 문서자료를 업로드할
            예정입니다. 자주 방문하셔서 퀄리티 높은 자료들 많이 받아가시고 문서선교를 통해 큰 부흥이 있길 바랍니다.</p>
            <p>한국 최초의 전도형 주문QT책자 만나홈페이지가 새롭게 탄생했습니다. 앞으로 주보시안,캘린더,소식지,QT책자 등 다양한 문서자료를 업로드할
            예정입니다. 자주 방문하셔서 퀄리티 높은 자료들 많이 받아가시고 문서선교를 통해 큰 부흥이 있길 바랍니다.</p>
            
            <p>한국 최초의 전도형 주문QT책자 만나홈페이지가 새롭게 탄생했습니다. 앞으로 주보시안,캘린더,소식지,QT책자 등 다양한 문서자료를 업로드할
            예정입니다. 자주 방문하셔서 퀄리티 높은 자료들 많이 받아가시고 문서선교를 통해 큰 부흥이 있길 바랍니다.</p>
            </article>
        </div>
 
        
        <div class="box4">
            
            <aside class="sidemenu">
                <h1>특집 소식</h1>
                <ul>
                    <li><a href="#">만나메뉴 들어갈자리1</a></li>
                    <li><a href="#">만나메뉴 들어갈자리2</a></li>
                    <li><a href="#">만나메뉴 들어갈자리3</a></li>
                    <li><a href="#">만나메뉴 들어갈자리4</a></li>
                
                </ul>
            
            
            </aside>
        
        
                <aside class="recommend">
                <h1>특집 정보</h1>
                <ul>
                    <li><a href="#">특집 정보 들어갈자리1</a></li>
                    <li><a href="#">특집 정보 들어갈자리2</a></li>
                    
                
                </ul>
            
            
            </aside>
            
                    <aside class="popular">
                <h1>추천 정보</h1>
                <ul>
                    <li><a href="#">추천 정보 들어갈자리1</a></li>
                    <li><a href="#">추천 정보 들어갈자리2</a></li>
                    <li><a href="#">추천 정보 들어갈자리3</a></li>
                    <li><a href="#">추천 정보 들어갈자리4</a></li>
                
                </ul>
            
            
            </aside>
        </div>
        
        
        
            </div>
        
        
        <div class="box5">
        <div class="copyright">
    
    <p>Copyright &copy; MANA</p>
</div>
        </div>
    
        
    </body>
 
</html>
cs









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
@charset "utf-8";
body{ font-family:'맑은 고딕','Apple SD Gothic Neo',sans-serif}
.site h1 a{color:black; text-decoration:none}
.site h1 {margin:0; font-size:30px}
.menu ul{ list-style:none ;}
.menu li a{color:black; font-size:14px; text-decoration:none; display:block; padding:5px; margin:10px}
.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:5px; display:block}
.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:black; font-size:14px; color:#000000; padding:5px; display:block}
.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}

@media(min-width:768px){
/*box3과 box4를 가로 정렬하는 설정*/
.boxA:after {content:""; clear:both; display:block}
.box3{ float:left; width:70%}
.box4{float:left; width:30%}
}
 
cs



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

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





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
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>공지</title>
 
 
<style>
.site h1 a{color:black; text-decoration:none}
.site h1 {margin:0; font-size:30px}
.site p {margin:0; font-size:12px}
.menu ul{ list-style:none}
.menu li a{color:black; font-size:14px; text-decoration:none; display:block; padding:5px}
.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;}
.copyright p{ margin:0; color:#666666; font-size:14px}
</style>
 
 
</head>
<body>
 
<div class="site">
    <h1><a href="#">만나 공지사항</a></h1>
    <p>매일 기독자료와 관련된 소식을 드립니다</p>
</div>
 
 
<div 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>
</div>
 
 
 
<div class="story">
    <h1>만나홈페이지가 새롭게 개설되었습니다.</h1>
    <p>한국 최초의 전도형 주문QT책자 만나홈페이지가 새롭게 탄생했습니다.
 앞으로 주보시안,캘린더,소식지,QT책자 등 다양한 문서자료를 업로드할
    예정입니다. 자주 방문하셔서 퀄리티 높은 자료들 많이 받아가시고 
문서선교를 통해 큰 부흥이 있길 바랍니다.</p>
</div>
 
 
 
 
 
<div class="copyright">
    <p>만나는 기독교 문서와 관련된 정보와 자료를 공유합니다.</p>
    <p>Copyright &copy; MANA</p>
</div>
 
 
 
 
</body>
</html>
 
cs




사이트 제목 


 text-decoration:none 는 라인제거




.site h1 a{color:black; text-decoration:none}

.site h1 {margin:0; font-size:30px}

.site p {margin:0; font-size:12px}





기사내용


margin-top:0 위의 공백 제거




.story h1{font-size:36px; margin-top:0; margin-bottom:20px;}

.story p{margin-top:0; margin-bottom:20px;}




메뉴

list-style:none은 메뉴 앞에 * 검은점 제거

padding:5px 내부에 공백 좀 적용

text-decoration:none 밑줄 제거

display:block 링크가 가능하는 범위를 가로 방향으로 늘려준다.

.menu li a:hover 메뉴에 마우스 올리면 이벤트 발생

.menu ul:after{content:""; display:block; clear:both} li 를 감싸고 있는 ul 태그가 li를 그룹화 했다.

.menu ul li{float:left; width:auto} li는 하나의 박스들이 되는데 float 때문에 왼쪽 정렬이 된다. 메뉴가로정렬 



.menu ul{ list-style:none}

.menu li a{color:black; font-size:14px; text-decoration:none; display:block; padding:5px}

.menu li a:hover{ background-color:#eeeeee}


.menu ul:after{content:""; display:block; clear:both}

.menu ul li{float:left; width:auto}



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

11.웹페이지제작 - 완성  (0) 2016.11.03
10.웹페이지제작 - 컨텐츠 페이지  (0) 2016.11.02
9.웹페이지제작 - 준비2  (0) 2016.11.02
8.웹페이지제작 - 준비1  (0) 2016.11.02
7.레이아웃 - 박스 겹치기  (0) 2016.11.02
6.레이아웃 - 박스 정렬 순서  (0) 2016.11.02
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE>
 
<html lang="ko">
 
<head>
    <meta charset="UTF-8">
    <title>만나 공지</title>
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="style.css">
    
</head>
 
<body>
 
</body>
 
</html>
cs


 


HTML 을 사용하겠다.

<!DOCTYPE>선언 




언어종류

<html lang="ko">


</html>




<head>


헤드는 페이지 설정 파일

</head>




<body>


화면출력 내용물


</body>



HTML파일 인코딩

<meta charset="UTF-8">




스마트폰 및 테블릿PC에 맞게 출력

<meta name="viewport" content="width=device-width">



스타일시트 적용하기

<link rel="stylesheet" href="style.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
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>샘플</title>
<style>
.boxA{boder:solid 8px green; background-color:gold; color:pink}
.box1{ 
        height: 200px;
        border:4px solid green;
        text-align: center;
        position:relative
}
.box2{
            height: 100px;
        border:4px solid blue;
    
        position:absolute;
        top:150px;left:60px
        
}
 
 
</style>
</head>
<body>
 
<div class="boxA">
 
<div class="box1">
BOX1
</div>
 
 
<div class="box2">
BOX2
</div>
 
</div>
 
 
 
</body>
</html>
 
cs




- 박스 1과 2를 div태그로 감싸 그룹화 한다.


박스 A의 position 속성을 reletive , box2의 속성을 absolute 로 지정 그럼 박스 2가 boxA 기준으로 위치를 정한다.


그리고 박스 2의 TOP LEFT를 지정하면 박스A를 기준으로 떨어져서 위치한다. 





float 속성을 left 로하면 상자는 왼쪽에 right로 하면 오른쪽에 붙는다.

박스너비 고정하기 






1
2
3
4
5
6
7
8
9
.box2    {float: left; width: 300px ;
            height: 200px;
        border:4px dotted green;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        text-align: center;
        
}
cs



1. 박스2의 너비를 300px으로 준다. 





1
2
3
4
5
6
7
8
9
10
11
.box3    {float: none; width: auto;
                height: 200px;
            border:4px dotted blue;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            text-align: center;
            margin-left:300px
            
}
 
cs


2. 박스 3의 float 을 none으로 하고 width 를 auto 로 한다.


그리고 박스 3의 margin-left 속성을 300px으로 줘 왼쪽공백을 만들어 준다.

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
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>샘플</title>
<style>
.boxA:after    {content: "";
    display: block;
    clear: both}
.box1    { float:left; width: 50% ;
        height: 200px;
        border:4px dotted green;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        text-align: center;
        
}
    
.box2    {float: left; width: 50% ;
            height: 200px;
        border:4px dotted green;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        text-align: center;
        
}
.box3    {float: left; width: 50%;
                height: 200px;
            border:4px dotted blue;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            text-align: center;
            
}
.box4    { width: 100% ;
            height: 200px;
        border:4px dotted red;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        text-align: center;
        
}
</style>
</head>
<body>
 
<div class="boxA">
<div class="box1">
BOX1
</div>
 
 
<div class="box2">
BOX2
</div>
 
<div class="box3">
BOX3
</div>
</div>
 
<div class="box4">
BOX4
</div>
 
 
</body>
</html>
 
cs








# 1, 2,3, 번째 박스를 그룹화 해서 넓이를 각각 50% 로 주니 .. 3번째 박스가 탈락한다. 


이때 3번째 박스의 넓이를 100%으로 주면 1번째 박스와 2번재 박스를 그룹화 했을 때와 같은 현상 발생한다.








1
2
3
4
5
6
7
8
9
.box1    { float:left; width: 50% ;
        height: 300px;
        border:4px dotted green;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        text-align: center;
        
}
cs


# 이때 1번박스의 높이가 2번 박스의 높이와 다를 경우 3번 박스는 두번째줄 오른 쪽으로 위치하게 된다. 




1
2
3
4
5
6
7
8
9
.box3    {float: left; width: 100%;
                height: 200px;
            border:4px dotted blue;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            text-align: center;
            
}
cs

 이때 


박스 3의 너비가 100이라면 왼쪽 빈공간을 채우고 아래로 개행 할 수 있다. 박스 2번 아래 살짝 빈공간이 남게 된다.






1
2
3
4
5
6
7
8
9
10
.box3    {float: left; width: 50%;
                height: 200px;
            border:4px dotted blue;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            text-align: center;
            clear:both
            
}
cs


# 3번 박스를 왼쪽으로 지정하고 싶다면 3번 박스에 clear 속성을 주면 된다.











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
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>샘플</title>
<style>
.boxA:after    {content: "";
    display: block;
    clear: both}
.box1    { float: left; width: 33.3333% ;
        height: 200px;
        border:4px dotted green;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        text-align: center;
        
}
    
    
    
.box2    {float: left; width: 33.3333% ;
            height: 200px;
        border:4px dotted green;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        text-align: center;
        
}
.box3    {float: left; width: 33.3333%;
                height: 200px;
            border:4px dotted green;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            text-align: center;
            
}
.box4    { width: 100% ;
            height: 200px;
        border:4px dotted red;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        text-align: center;
        
}
</style>
</head>
<body>
 
<div class="boxA">
<div class="box1">
BOX1
</div>
 
 
<div class="box2">
BOX2
</div>
 
<div class="box3">
BOX3
</div>
</div>
 
<div class="box4">
BOX4
</div>
 
 
</body>
</html>
 
cs







2



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
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>샘플</title>
<style>
.boxA:after    {content: "";
    display: block;
    clear: both}
.box1    { width: 100% ;
        height: 200px;
        border:4px dotted red;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        text-align: center;
        
}
    
    
    
.box2    {float: left; width: 70% ;
            height: 200px;
        border:4px dotted green;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        text-align: center;
        
}
.box3    {float: left; width: 30%;
                height: 200px;
            border:4px dotted green;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            text-align: center;
            
}
.box4    { width: 100% ;
            height: 200px;
        border:4px dotted red;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        text-align: center;
        
}
</style>
</head>
<body>
 
 
<div class="box1">
BOX1
</div>
 
<div class="boxA">
<div class="box2">
BOX2
</div>
 
<div class="box3">
BOX3
</div>
</div>
 
<div class="box4">
BOX4
</div>
 
 
</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
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>샘플</title>
<style>
.box1{border:4px solid green; line-height: 200px; float:left; width:32.5%}
.box3{border:4px solid green; line-height: 200px;float:left; width:32.5%}
.box2{border:4px solid green; line-height: 200px; float:left; width:32.5%}
.box4{border:4px solid green; line-height: 200px;}
.boxA:after{border:4px solid RED; line-height: 200px; content:""; display:block; clear:both}
 
</style>
 
</head>
 
<body>
<div class="boxA">
<div class="box1" >
BOX1
</div>
 
 
<div class="box2">
BOX2
</div>
 
<div class="box3">
BOX3
</div>
 
</div>
 
 
<div class="box4">
BOX4
</div>
 
 
</body>
</html>
 
 
 
 
 
 
cs

가로 정렬할 박스의 개수 변경

+ Recent posts

티스토리 툴바