홈페이지 구현 실습
- 기본 레이아웃 완성
- index.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
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
|
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/index.css">
<title>DD 베이커리</title>
</head>
<body>
<!-- 헤더 영역 시작-->
<header>
<div class="logo">
<a href="#"><img src="images/LOGO.jpg" alt=""></a>
</div>
<nav>
<ul>
<li class="dropdown"><a href="#">DD 소개</a></li>
<li class="dropdown"><a href="#" class="dropbtn">빵 만들기</a>
<ul class="dropdown_content">
<li><a href="#">제빵 재료</a></li>
<li><a href="#">제빵 도구</a></li>
<li><a href="#">제빵 포장재료</a></li>
</ul>
</li>
<li class="dropdown"><a href="#" class="dropbtn">커뮤니티</a>
<ul class="dropdown_content">
<li><a href="#">나만의 레시피</a></li>
<li><a href="#">내가 만든 빵</a></li>
<li><a href="#">제빵 노하우</a></li>
</ul>
</li>
</ul>
</nav>
</header>
<!-- 헤더 영역 종료 -->
<!-- 메인 이미지 영역 시작 -->
<div id="main_image">
<div class="imgs">
<img src="images/images(1).jpg" alt="">
</div>
<div class="welcome">
<h1>베이커리 카페</h1>
<h2>세상에 하나뿐인 베이커리</h2>
</div>
</div>
<!-- 메인 이미지 영역 끝 -->
<!-- 메인 콘텐츠 영역 시작 -->
<div id="contents">
<!-- 공지사항 영역 시작 -->
<div class="notice">
<h2>공지사항</h2>
<table>
<tr>
<th>내용</th><th>날짜</th>
</tr>
<tr>
<td>제1회 DD 베이커리 워크숍에 초대합니다(서울권)</td><td>2017-12-12</td>
</tr>
<tr>
<td>올림픽공원 카페 초보 여성 창업을 추천받습니다.</td><td>2017-12-10</td>
</tr>
<tr>
<td>맛과 영양, 환경문제까지 생각하는 베이커리!</td><td>2018-03-09</td>
</tr>
<tr>
<td>고품질 크림으로 만든 디저트로 달콤하게 겨울나기</td><td>2018-03-07</td>
</tr>
<tr>
<td>온가족이 함께 즐기는 베이킹 체험 교실</td><td>2018-03-05</td>
</tr>
</table>
</div>
<!-- 공지사항 영역 끝 -->
<!-- Partner 영역 시작 -->
<div class="partner">
<h2>Partner</h2>
<div class="partner_info">
<img src="images/PARTNER.jpg" alt="">
<img src="images/PARTNER_UP.png" alt="">
</div>
</div>
<!-- Partner 영역 종료 -->
<!-- 아이콘 제작 콘텐츠 영역 시작 -->
<div class="icons">
<div class="icon">
<img src="images/icon1.png" alt="">
<button>고수의 레시피</button>
</div>
<div class="icon">
<img src="images/icon2.png" alt="">
<button>모임 일정</button>
</div>
<div class="icon">
<img src="images/icon3.png" alt="">
<button>식품안전관리</button>
</div>
</div>
<!-- 아이콘 제작 콘텐츠 영역 끝 -->
</div>
<!-- 메인 콘텐츠 영역 끝 -->
<!-- 푸터 영역 시작-->
<footer>
<ul>
<li><a href="#">법적고지</a></li>
<li><a href="#">개인정보취급방침</a></li>
<li><a href="#">개인정보처리방침</a></li>
</ul>
<address>
사업자번호:228-81-03754<br>
상호명:(주)디디베이커리<br>
대표자:다진<br>
개인정보관리책임자:윤준우<br>
상담전화:1588-0789<br>
사업장주소:서울특별시 금천구 가산동 가산디지털2로<br>
E-mail : master@ddbb.com
</address>
</footer>
<!-- 푸터 영역 끝 -->
</body>
|
cs |
- index.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
|
@charset "utf-8";
/* 초기화 */
*{
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
a {
text-decoration: none;
}
body{
font-family: "맑은 고딕",sans-serif;
width: 960px;
margin: 0 auto;;
}
/* 헤더 영역 - 로고, 메뉴 */
header{
height: 150px;
overflow: hidden;
}
header>.logo{ /*로고는 화면 왼쪽*/
float: left;
padding-top: 20px;
}
header>.logo img{
width: 250px;
}
header>nav{ /*메뉴는 화면 오른쪽*/
float: right;
padding-top: 70px;
}
nav>ul{
width:600px; /*세 메뉴 너비 합 설정*/
}
nav li.dropdown{
float: left;
width: 200px; /*세 메뉴 너비 똑같게*/
}
nav li.dropdown > a{
display: block;
padding: 14px 16px; /*클릭 범위 넓힘*/
text-align: center;
}
nav li.dropdown>a:hover, nav li.dropdown:hover .dropbtn {
/*상위 메뉴에 호버 + 상하위 메뉴 호버 시 상위메뉴에 적용*/ background-color: #a56d46;
color: #fff;
}
nav li.dropdown:hover ul.dropdown_content {
/*상위메뉴 호버하면 하위메뉴가 대상이 됨 => 띄어쓰기 선택자므로 대상은 후손만 가능*/
display: block; /*하위 메뉴 펼치기*/
}
nav ul.dropdown_content{
display: none;
width: 200px;
background-color: rgba(255, 255, 255, 0.8);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /*우 하 흐림 색*/
position: absolute; /*position 있어야 z-index 부여 가능*/
z-index: 10;
}
nav ul.dropdown_content a {
display: block;
padding: 14px 16px;
text-align: center;
}
nav ul.dropdown_content a:hover {
background-color: #cc8553;
color: #fff;
}
/* 메인 이미지 영역 */
#main_image{
height: 400px;
position: relative;
}
#main_image>.imgs{
height: 400px;
position: absolute;
}
#main_image>.welcome{
position: absolute;
left: 50%;
top: 50%;
width: 300px;
height: 100px;
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
margin: -50px 0 0 -150px; /*박스 크기 반만큼 이동*/
line-height: 50px;
border-radius: 10px;
}
#main_image>.welcome>h1{
color: #cc8553;
}
#main_image>.welcome>h2{
color: #6a6a6a;
font-size: 1.3em;
}
/* 메인 콘텐츠 영역 (=본문) */
#contents{
min-height: 500px;
}
/* 1공지사항 */
#contents>.notice{
float: left;
width: 480px;
margin-top: 20px;
text-align: center;
}
#contents>.notice>h2{
text-align: center;
border-bottom: 1px solid #6a6a6a;
padding-bottom: 10px;
}
#contents>.notice table{
font-size: 0.9em;
color: #6a6a6a;
width: 430px;
margin-left: 20px;
border-collapse: collapse; /*-> td 테두리 띄워진 부분 배경색 적용X 문제 해결*/
}
#contents>.notice>table tr>th{ /*table 자식 = tbody*/
padding: 5px 0;
}
#contents>.notice>table tr>td{
padding: 5px;
}
#contents>.notice>table tr:nth-child(2n){
background-color: rgba(153, 153, 102, 0.5);
}
/* 2Partner */
#contents>.partner{
float: right;
width: 480px;
margin-top: 20px;
}
#contents>.partner>h2{
text-align: center;
margin-bottom: 20px;
}
#contents>.partner>.partner_info{
margin-top: 10px;
margin-left: 30px;
}
/* 3아이콘 제작 콘텐츠 */
#contents>.icons{
clear: both;
padding-top: 20px;
text-align: center; /*자식을 가운데 정렬*/
}
#contents .icon{
width: 160px;
display: inline-block;
margin: 0 30px;
}
#contents .icon>img{
width: 150px;
}
#contents .icon>button{
padding: 10px;
border: none;
border-radius: 10px;
background-color: #cc8553;
color: #fff;
font-size: 1.1em;
cursor: pointer;
}
#contents .icon button:hover{
background-color: #99cc66;
}
/* 푸터 영역 */
feComponentTransfer{
height: 150px;
}
footer{
height: 150px;
margin-top: 30px;
background-color: #cc8553;
color: #fff;
padding: 20px;
}
footer>ul{
float: left;
}
footer li{
float: left;
padding-top: 30px;
padding-right: 20px;
}
footer a {
color: #fff;
}
footer>address{
float: right;
width: 480px;
font-style: normal;
font-size: 0.9em;
margin-right: 30px;
}
|
cs |
- 자바스크립트 팝업창 추가
- index.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
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
|
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/index.css">
<script src="js/popup.js"></script>
<title>DD 베이커리</title>
</head>
<body>
<!-- 헤더 영역 시작-->
<header>
<div class="logo">
<a href="#"><img src="images/LOGO.jpg" alt=""></a>
</div>
<nav>
<ul>
<li class="dropdown"><a href="#">DD 소개</a></li>
<li class="dropdown">
<a href="#" class="dropbtn">빵 만들기</a>
<ul class="dropdown_content">
<li><a href="#">제빵 재료</a></li>
<li><a href="#">제빵 도구</a></li>
<li><a href="#">제빵 포장재료</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropbtn">커뮤니티</a>
<ul class="dropdown_content">
<li><a href="#">나만의 레시피</a></li>
<li><a href="#">내가 만든 빵</a></li>
<li><a href="#">제빵 노하우</a></li>
</ul>
</li>
</ul>
</nav>
</header>
<!-- 헤더 영역 종료 -->
<!-- 메인 이미지 영역 시작 -->
<div id="main_image">
<div class="imgs">
<img src="images/images(1).jpg" alt="">
</div>
<div class="welcome">
<h1>베이커리 카페</h1>
<h2>세상에 하나뿐인 베이커리</h2>
</div>
</div>
<!-- 메인 이미지 영역 끝 -->
<!-- 메인 콘텐츠 영역 시작 -->
<div id="contents">
<!-- 공지사항 영역 시작 -->
<div class="notice">
<h2>공지사항</h2>
<table>
<tr>
<th>내용</th><th>날짜</th>
</tr>
<tr>
<td>제1회 DD 베이커리 워크숍에 초대합니다(서울권)</td><td>2017-12-12</td>
</tr>
<tr>
<td>올림픽공원 카페 초보 여성 창업을 추천받습니다.</td><td>2017-12-10</td>
</tr>
<tr>
<td>맛과 영양, 환경문제까지 생각하는 베이커리!</td><td>2018-03-09</td>
</tr>
<tr>
<td>고품질 크림으로 만든 디저트로 달콤하게 겨울나기</td><td>2018-03-07</td>
</tr>
<tr>
<td>온가족이 함께 즐기는 베이킹 체험 교실</td><td>2018-03-05</td>
</tr>
</table>
</div>
<!-- 공지사항 영역 끝 -->
<!-- Partner 영역 시작 -->
<div class="partner">
<h2>Partner</h2>
<div class="partner_info" onclick="partpopup()">
<img src="images/PARTNER.jpg" alt="">
<img src="images/PARTNER_UP.png" alt="">
</div>
</div>
<!-- Partner 영역 종료 -->
<!-- 아이콘 제작 콘텐츠 영역 시작 -->
<div class="icons">
<div class="icon">
<img src="images/icon1.png" alt="">
<button>고수의 레시피</button>
</div>
<div class="icon">
<img src="images/icon2.png" alt="">
<button>모임 일정</button>
</div>
<div class="icon">
<img src="images/icon3.png" alt="">
<button>식품안전관리</button>
</div>
</div>
<!-- 아이콘 제작 콘텐츠 영역 끝 -->
</div>
<!-- 메인 콘텐츠 영역 끝 -->
<!-- 푸터 영역 시작-->
<footer>
<ul>
<li><a href="#">법적고지</a></li>
<li><a href="#">개인정보취급방침</a></li>
<li><a href="#">개인정보처리방침</a></li>
</ul>
<address>
사업자번호:228-81-03754<br>
상호명:(주)디디베이커리<br>
대표자:다진<br>
개인정보관리책임자:윤준우<br>
상담전화:1588-0789<br>
사업장주소:서울특별시 금천구 가산동 가산디지털2로<br>
E-mail : master@ddbb.com
</address>
</footer>
<!-- 푸터 영역 끝 -->
</body>
|
cs |
- popup.html
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>파트너 광고</title>
</head>
<body>
<h2>소자본 카페 창업</h2>
<ol>
<li>카페 창업을 위한 기본 소양 습득</li>
<li>사전 준비 (매장 입지 분석, 점포 계약)</li>
<li>등록 및 인,허가 등록 신청</li>
<li>카페 운영</li>
</ol>
<div id="partner">
<img src="images/PARTNER.jpg" alt="partner">
<img src="images/PARTNER_UP.png" alt="partner_up">
</div>
</body>
</html>
|
cs |
- popup.js
function partpopup(){
window.open("popup.html","popup", "width=800, height=400");
window.open("popup.html","popup", "width=800, height=400");
//띄울 창, 창 이름 지정, 크기 지정
}
}
- 팝업창 내 닫기 버튼 추가
- popup.js
function partpopup(){
window.open("popup.html","popup", "width=500, height=600");
}
function popupclose(){
window.close("popup.html");
}
window.open("popup.html","popup", "width=500, height=600");
}
function popupclose(){
window.close("popup.html");
}
- popup.html
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>파트너 광고</title>
<link rel="stylesheet" href="css/popup.css">
<script src="js/popup.js"></script>
</head>
<body>
<h2>소자본 카페 창업</h2>
<ol>
<li>카페 창업을 위한 기본 소양 습득</li>
<li>사전 준비 (매장 입지 분석, 점포 계약)</li>
<li>등록 및 인,허가 등록 신청</li>
<li>카페 운영</li>
</ol>
<div id="partner">
<img src="images/PARTNER.jpg" alt="partner">
<img src="images/PARTNER_UP.png" alt="partner_up">
</div>
<div id="close" >
<button class="btn_close" onclick="popupclose()">닫기</button>
</div>
</body>
|
cs |
- popup.css
|
1
2
3
4
5
6
7
8
9
10
|
@charset "utf-8";
#close{
position: relative;
height: 40px;
}
#close>.btn_close{
position: absolute;
right:10px;
bottom:0
}
|
cs |
- 사이트 방문 알림창 추가
- popup.js
function partpopup(){
window.open("popup.html","popup", "width=450, height=480"); //띄울 창, 창 이름 지정, 크기 지정
}
function popupclose(){
window.close("popup.html");
}
function info(){
alert("DD 베이커리 홈페이지를 찾아주셔서 고맙습니다.\n종로에 4호점이 오픈되었습니다.\n많이 이용해주세요");
}
setTimeout(function(){
info();
},3000);
//setTimeout => 내장 함수, function => 익명 함수(아무 함수나 넣으면 3초 후에 실행)
=> js 작성 시 바로 실행됨 (홈페이지 방문)
=> but popup 창에도 실행됨
=>
- popup.html (<script> 태그 삭제)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>파트너 광고</title>
<link rel="stylesheet" href="css/popup.css">
</head>
<body>
<h2>소자본 카페 창업</h2>
<ol>
<li>카페 창업을 위한 기본 소양 습득</li>
<li>사전 준비 (매장 입지 분석, 점포 계약)</li>
<li>등록 및 인,허가 등록 신청</li>
<li>카페 운영</li>
</ol>
<div id="partner">
<img src="images/PARTNER.jpg" alt="partner">
<img src="images/PARTNER_UP.png" alt="partner_up">
</div>
<div id="close">
<button class="btn_close" onclick="window.close()">닫기</button>
</div>
</body>
|
cs |
'Programming > 국비학원' 카테고리의 다른 글
| 220622 - 그리드, 웹페이지 구현 (0) | 2022.06.23 |
|---|---|
| 220621 - 반응형 웹(고정/가변 그리드, 미디어 쿼리, flex box) (0) | 2022.06.22 |
| 220617 - css (position, table 관련, filter, transition 문제), 홈페이지 구현 (0) | 2022.06.18 |
| 220616 - css (box-sizing, float, column, transition, transform, animation) (0) | 2022.06.17 |
| 220615 - css - 그라데이션, 레이아웃, 테두리 (0) | 2022.06.16 |
