목업 웹사이트 예제



html

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
    <!-- css 파일 임포트 -->
    <link rel="stylesheet" href="04-9.css" />
    <title>Insert title here</title>
</head>
 
<body>
<div id="wrap">
    <!-- 헤더영역 -->
    <header class="header">
        <h1></h1><!-- 제목 -->
        <nav></nav><!-- 메뉴 -->
    </header>
    <!--// 헤더영역 -->
 
    <!-- 슬라이드영역 -->    
    <section class="slider_section"></section>
    <!--// 슬라이드영역 -->
    
    <!-- 갤러리영역 -->
    <section class="gallery_section"></section>
    <!--// 갤러리영역 -->
    
    <!-- 인기검색어영역 -->
    <section class="rankup_section"></section>
    <!--// 인기검색어영역 -->
    
    <!-- 최근글영역 -->
    <section class="latest_post_section"></section>
    <!--// 최근글영역 -->
    
    <!-- 인기글영역 -->
    <section class="popular_post_section"></section>
    <!--// 인기글영역 -->
 
    <!-- 배너영역 -->
    <section class="banner_section">
        <div class="banner_box_01"></div>
        <div class="banner_box_02"></div>
    </section>
    <!--// 배너영역 -->
    
    <!-- 소셜영역 -->
    <section class="social_section"></section>
    <!--// 소셜영역 -->
    
    <!-- 푸터영역 -->
    <footer class="footer"></footer>
    <!--// 푸터영역 -->
    
</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
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
@charset "utf-8";
* {
    margin: 0;
    padding: 0;
}
/* 전체박스 */
#wrap {
    display: flex;
    /* 왼쪽에서 오른쪽으로 여러줄 배치 */
    flex-flow: row wrap;
    width: 90%;
    margin: 0 auto;
}
/* 헤더영역 */
.header {
    display: flex;
    /* 끝점부터 플렉스 아이템 배치 */
    justify-content: flex-end;
    order: 1;
    position: relative;
    width: 100%;
}
/* 헤더영역 > 제목 */
.header h1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 12.5%;
    height: 142px;
    background: #ff6b57;
}
/* 헤더영역 > 메뉴 */
.header nav {
    width: 87.5%;
    min-height: 80px;
    background: #de4f4f;
}
/* 슬라이드영역 */
.slider_section {
    order: 2;
    width: 50%;
    background: #3c90be;
}
/* 갤러리영역 */
.gallery_section {
    order: 3;
    width: 27%;
    height: 440px;
    background: #f8de73;
}
/* 인기검색어영역 */
.rankup_section {
    order: 4;
    width: 23%;
    background: #00d2a5;
}
/* 최근글영역 */
.latest_post_section {
    order: 5;
    width: 30%;
    background: #9cabe4;
}
/* 인기글영역 */
.popular_post_section {
    order: 6;
    width: 30%;
    background: #d76817;
}
/* 배너영역 */
.banner_section {
    display: flex;
    /* 위에서 아래로 배치 */
    flex-flow: column;
    order: 7;
    width: 23%;
}
.banner_section div {
    /* 1:1 같은 비율로 크기 조절 */
    flex: 1 1 0;    
}
.banner_section div.banner_box_01 {
    background: #0175bb;
}
.banner_section div.banner_box_02 {
    background: #12619c;
}
/* 푸터영역 */
.footer {
    order: 9;
    width: 100%;
    height: 94px;
    background: #474747;
}
/* 소셜영역 */
.social_section {
    order: 8;
    width: 17%;
    height: 270px;
    background: #fe6eda;    
}
 
cs



결과



저작자표시

'IT > - 프로그래밍' 카테고리의 다른 글

안드로이드 모델명, 제조사명, IMEI 정보 가져오기  (0) 2016.08.31
안드로이드 화면 가로, 세로 구하기(pixcel, dpi, inch)  (0) 2016.08.29
반응형웹 플렉스 아이템을 비율대로 늘이거나 줄이기  (0) 2016.08.28
반응형웹 플렉스 아이템 배치 순서 바꾸기  (0) 2016.08.28
반응형웹 여러줄 플렉스 아이템을 교차축 방향으로 다양하게 배치하기  (0) 2016.08.28

+ Recent posts

티스토리툴바