본문 바로가기
매일코딩/HTML&CSS3

10.웹페이지제작 - 컨텐츠 페이지

by 인생여희 2016. 11. 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
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
9.웹페이지제작 - 준비2  (0) 2016.11.02
8.웹페이지제작 - 준비1  (0) 2016.11.02
7.레이아웃 - 박스 겹치기  (2) 2016.11.02
6.레이아웃 - 박스 정렬 순서  (0) 2016.11.02

관련글

댓글

티스토리툴바