-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
602 lines (572 loc) · 23.5 KB
/
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
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
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
<!DOCTYPE html>
<html lang="ko">
<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" />
<title>사이트 만들기01</title>
<!-- SEO -->
<meta name="author" content="chanmi" />
<meta name="description" content="사이트 만들기 튜토리얼입니다." />
<meta name="keyword" content="사이트, 만들기, 튜토리얼, 김찬미" />
<meta name="robots" content="all" />
<!-- CSS -->
<link rel="stylesheet" href="assets/css/fonts.css" />
<link rel="stylesheet" href="assets/css/reset.css" />
<link rel="stylesheet" href="assets/css/common.css" />
<!-- CSS(섹션별) -->
<link rel="stylesheet" href="assets/css/header.css" />
<link rel="stylesheet" href="assets/css/slider.css" />
<link rel="stylesheet" href="assets/css/card.css" />
<link rel="stylesheet" href="assets/css/image.css" />
<link rel="stylesheet" href="assets/css/text.css" />
<link rel="stylesheet" href="assets/css/imgText.css" />
<link rel="stylesheet" href="assets/css/banner.css" />
<link rel="stylesheet" href="assets/css/footer.css" />
<!-- CSS -->
<link rel="stylesheet" href="assets/css/swiper.css" />
<style>
.header__menu li.active a {
background: #000;
color: #fff;
border-radius: 20px;
box-sizing: content-box;
}
.header__menu li.active a:hover {
background: #222;
color: #fff;
}
.content__item {
opacity: 0;
transform: translateY(200px);
transition: all 1s 0.1s cubic-bezier(0.09, 0.7, 0.58, 1);
}
.content__item.show {
opacity: 1;
transform: translateY(0);
}
</style>
</head>
<body>
<div id="skip">
<a href="#headerType">헤더 영역 바로가기</a>
<a href="#slider">슬라이드 영역 바로가기</a>
<a href="#imageType">이미지 영역 바로가기</a>
<a href="#imgTextType">이미지/텍스트 영역 바로가기</a>
<a href="#cardType">카드 영역 바로가기</a>
<a href="#bannerType">배너 영역 바로가기</a>
<a href="#textType01">텍스트 영역 바로가기</a>
<a href="#footerType">푸터 영역 바로가기</a>
</div>
<!-- skip -->
<header id="headerType" class="header__wrap nexon">
<div class="header__inner">
<div class="header__logo">
<a href="#">Plant <em>site</em></a>
</div>
<nav class="header__menu">
<ul>
<li class="active"><a href="#slider">MAIN</a></li>
<li><a href="#imageType">반려식물</a></li>
<li><a href="#imgTextType">칼럼/뉴스</a></li>
<li><a href="#cardType">식물성장</a></li>
<li><a href="#bannerType">문의사항</a></li>
<li><a href="#textType01">식물정보</a></li>
</ul>
</nav>
<div class="header__member">
<a href="#">로그인</a>
</div>
<div class="header__ham">
<span></span>
<span></span>
<span></span>
</div>
</div>
</header>
<!-- headerType -->
<main id="mainType">
<section id="slider" class="slider__wrap nexon content__item">
<h2 class="blind">슬라이드 영역</h2>
<div class="slider__inner">
<!-- <div class="slider">
<div class="slider__img">
<div class="desc">
<span>PLANT</span>
<h3>반려식물 키우기</h3>
<p>
반려식물 혼자 키우기 힘드시죠? <br>
우리가 당신과 함께하겠습니다.
</p>
<div class="btn">
<a href="#">자세히 보기</a>
<a href="#" class="black">사이트 보기</a>
</div>
</div>
</div>
<div class="slider__arrow">
<a href="#" class="left"><span class="ir">이전 이미지</span></a>
<a href="#" class="right"><span class="ir">다음 이미지</span></a>
</div>
<div class="slider__dot">
<a href="#" class="dot active"><span class="ir">1</span></a>
<a href="#" class="dot"><span class="ir">2</span></a>
<a href="#" class="dot"><span class="ir">3</span></a>
<a href="#" class="play"><span class="ir">플레이</span></a>
<a href="#" class="stop"><span class="ir">정지</span></a>
</div>
</div> -->
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="desc">
<span>PLANT</span>
<h3>반려식물 키우기</h3>
<p>
반려식물 혼자 키우기 힘드시죠? <br />
우리가 당신과 함께하겠습니다.
</p>
<div class="btn">
<a href="#">자세히 보기</a>
<a href="#" class="black">사이트 보기</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="desc">
<span>PLANT</span>
<h3>반려식물 키우기</h3>
<p>
반려식물 혼자 키우기 힘드시죠? <br />
우리가 당신과 함께하겠습니다.
</p>
<div class="btn">
<a href="#">자세히 보기</a>
<a href="#" class="black">사이트 보기</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="desc">
<span>PLANT</span>
<h3>반려식물 키우기</h3>
<p>
반려식물 혼자 키우기 힘드시죠? <br />
우리가 당신과 함께하겠습니다.
</p>
<div class="btn">
<a href="#">자세히 보기</a>
<a href="#" class="black">사이트 보기</a>
</div>
</div>
</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button">
<div class="swiper-button-play"><span class="ir">play</span></div>
<div class="swiper-button-stop"><span class="ir">stop</span></div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
</div>
</section>
<!-- sliderType -->
<section id="imageType" class="image__wrap nexon section content__item">
<h2>반려식물 키우기</h2>
<p>반려식물을 기르는 분들을 위한 사이트 입니다.</p>
<div class="image__inner container">
<article class="image img1">
<h3 class="image__title">식물의 종류</h3>
<p class="image__desc">
다양한 식물의 종류들을 알아볼 것입니다. 초보자가 기르기 쉬운 식물,
공기정화에 탁월한 식물, 선물하기 좋은 식물 등을 알아볼 예...
</p>
<a class="image__btn" href="#" title="자세히 보기">자세히보기</a>
</article>
<article class="image img2">
<h3 class="image__title">인테리어</h3>
<p class="image__desc">
식물을 이용한 다양한 인테리어들을 알아볼 것입니다. 식물의 크기에
따른 공간, 위치 등등이 있습니다. 많은 예시들이 있으니 구경...
</p>
<a class="image__btn yellow" href="#" title="자세히 보기"
>자세히보기</a
>
</article>
</div>
</section>
<!-- imageType -->
<section
id="imgTextType"
class="imgText__wrap nexon section gray content__item"
>
<h2 class="blind">유용한 사이트 살펴보기</h2>
<div class="imgText__inner container">
<div class="imgText__txt">
<span>Plant</span>
<h3>식물 관련 칼럼 살펴보기</h3>
<p>식물과 관련된 다양한 칼럼과 뉴스들을 살펴보는 공간입니다.</p>
<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="imgText__img img1">
<a href="#">초보자 매뉴얼</a>
</div>
<div class="imgText__img img2">
<a href="#" class="blue">식물 심리테스트</a>
</div>
</div>
</section>
<!-- imgTextType -->
<section id="cardType" class="card__wrap nexon section content__item">
<h2>식물 성장 엿보기</h2>
<p>
식물별 성장과정들을 모아놓았습니다. 어떻게 자라나는지 구경해보세요.
</p>
<div class="card__inner container">
<article class="card">
<figure class="card__header">
<img src="assets/img/card_bg01.jpg" alt="헤더영역" />
</figure>
<div class="card__body">
<h3 class="tit">몬스테라 성장일기</h3>
<p class="desc">
몬스테라를 키우며 기록한 성장일기입니다. 몬스테라가 어떻게
성장하는지 엿볼 수 있습니다. 성장과정에서 어떤 어려움이
있었는지도 확인해 보세요!
</p>
<a class="btn" href="/">
더 자세히 보기
<span aria-hidden="true">
<svg
width="59"
height="8"
viewBox="0 0 59 8"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M58.3536 4.35355C58.5488 4.15829 58.5488 3.84171 58.3536 3.64645L55.1716 0.464466C54.9763 0.269204 54.6597 0.269204 54.4645 0.464466C54.2692 0.659728 54.2692 0.976311 54.4645 1.17157L57.2929 4L54.4645 6.82843C54.2692 7.02369 54.2692 7.34027 54.4645 7.53553C54.6597 7.7308 54.9763 7.7308 55.1716 7.53553L58.3536 4.35355ZM0 4.5H58V3.5H0L0 4.5Z"
fill="black"
/>
</svg>
</span>
</a>
</div>
</article>
<article class="card">
<figure class="card__header">
<img src="assets/img/card_bg02.jpg" alt="리포머 운동" />
</figure>
<div class="card__body">
<h3 class="tit">금황환 선인장 성장일기</h3>
<p class="desc">
금황환 선인장의 성장일기입니다. 황금색을 띠어 금전운을
가져다준다는 의미가 있어 선물하기 좋은 선인장이에요. 성장과정도
확인해 보세요!
</p>
<a class="btn" href="/">
더 자세히 보기
<span aria-hidden="true">
<svg
width="59"
height="8"
viewBox="0 0 59 8"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M58.3536 4.35355C58.5488 4.15829 58.5488 3.84171 58.3536 3.64645L55.1716 0.464466C54.9763 0.269204 54.6597 0.269204 54.4645 0.464466C54.2692 0.659728 54.2692 0.976311 54.4645 1.17157L57.2929 4L54.4645 6.82843C54.2692 7.02369 54.2692 7.34027 54.4645 7.53553C54.6597 7.7308 54.9763 7.7308 55.1716 7.53553L58.3536 4.35355ZM0 4.5H58V3.5H0L0 4.5Z"
fill="black"
/>
</svg>
</span>
</a>
</div>
</article>
<article class="card">
<figure>
<img src="assets/img/card_bg03.jpg" alt="캐딜락 운동" />
</figure>
<div class="card__body">
<h3 class="tit">스위트 바질 성장일기</h3>
<p class="desc">
바질은 허브의 왕이라고도 불려요. 종류가 다양하지만 흔히 키우는
바질은 스위트 바질입니다. 잘 키우면 식탁에서도 만나볼 수 있으니,
성장과정을 확인해 보세요!
</p>
<a class="btn" href="/">
더 자세히 보기
<span aria-hidden="true">
<svg
width="59"
height="8"
viewBox="0 0 59 8"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M58.3536 4.35355C58.5488 4.15829 58.5488 3.84171 58.3536 3.64645L55.1716 0.464466C54.9763 0.269204 54.6597 0.269204 54.4645 0.464466C54.2692 0.659728 54.2692 0.976311 54.4645 1.17157L57.2929 4L54.4645 6.82843C54.2692 7.02369 54.2692 7.34027 54.4645 7.53553C54.6597 7.7308 54.9763 7.7308 55.1716 7.53553L58.3536 4.35355ZM0 4.5H58V3.5H0L0 4.5Z"
fill="black"
/>
</svg>
</span>
</a>
</div>
</article>
</div>
</section>
<!-- cardType -->
<section id="bannerType" class="banner__wrap nexon content__item">
<h2 class="blind">배너 영역</h2>
<div class="banner__inner">
<h3 class="title">반려식물 키우기</h3>
<p class="desc">
어렵지만 함께라면 할 수 있습니다. 다른 문의사항은 아래로 남겨주세요.
<a href="#" title="유투브 페이지로 이동">chanmi1320@gmail.com</a>
</p>
</div>
</section>
<!-- bannerType -->
<section id="textType01" class="text__wrap nexon section content__item">
<span>다양한 꿀Tip!</span>
<h2 class="mb70">반려식물 기르기</h2>
<div class="text__inner container">
<div class="text t1">
<h3 class="text__title">분갈이</h3>
<p class="text__desc">
분갈이 시기와 정확한 방법을 알고 계신가요? 식물에 맞는 화분도 따로
있답니다. 여기서는 분갈이 시기와 정확한 방법을 알...
</p>
<a class="text_btn" href="/">더보기</a>
</div>
<div class="text t2">
<h3 class="text__title">물 주기</h3>
<p class="text__desc">
식물마다 얼마나 자주, 어느 정도의 물을 줘야 하는지 궁금하시죠?
식물에게 물을 주는 정확한 방법을 알려드리겠습니다.
</p>
<a class="text_btn" href="/">더보기</a>
</div>
<div class="text t3">
<h3 class="text__title">인테리어</h3>
<p class="text__desc">
식물을 이용한 다양한 인테리어들이 있습니다. 집의 구조와 환경에
맞는 다양한 인테리어들을 볼 수 있습니다.
</p>
<a class="text_btn" href="/">더보기</a>
</div>
<div class="text t4">
<h3 class="text__title">영양분</h3>
<p class="text__desc">
사람이 영양제를 섭취하듯이 식물들도 영양분이 필요합니다. 식물마다
필요한 영양분에 대해 알아보겠습니다.
</p>
<a class="text_btn" href="/">더보기</a>
</div>
<div class="text t5">
<h3 class="text__title">병충해</h3>
<p class="text__desc">
식물을 키우면 벌레가 생길까봐, 그리고 그 벌레로 인해 식물이
죽을까봐 걱정이 많으시죠? 그 예방법에 대해 알아보겠습니다.
</p>
<a class="text_btn" href="/">더보기</a>
</div>
<div class="text t6">
<h3 class="text__title">계절관리</h3>
<p class="text__desc">
계절의 변화에 따라 온도와 습도가 달라지게 됩니다. 이러한 환경에
식물들은 큰 영향을 받는데요. 계절 변화에 따른 관리법을...
</p>
<a class="text_btn" href="/">더보기</a>
</div>
</div>
</section>
<!-- textType -->
</main>
<!-- main -->
<footer
id="footerType"
class="footer__wrap nexon section gray content__item"
>
<h2 class="blind">푸터 영역</h2>
<div class="footer__inner container">
<div class="footer__menu">
<div>
<h3>사이트</h3>
<ul>
<li><a href="#">웹표준 사이트</a></li>
<li><a href="#">반응형 사이트</a></li>
<li><a href="#">패럴랙스 사이트</a></li>
<li><a href="#">포트폴리오 사이트</a></li>
</ul>
</div>
<div>
<h3>헤더 영역</h3>
<ul>
<li><a href="#">메뉴 유형01</a></li>
<li><a href="#">메뉴 유형02</a></li>
</ul>
</div>
<div>
<h3>슬라이드 영역</h3>
<ul>
<li><a href="#">슬라이드 유형01</a></li>
<li><a href="#">슬라이드 유형02</a></li>
</ul>
</div>
<div>
<h3>이미지 영역</h3>
<ul>
<li><a href="">이미지 유형01</a></li>
<li><a href="">이미지 유형02</a></li>
<li><a href="">이미지/텍스트 유형01</a></li>
<li><a href="">이미지/텍스트 유형02</a></li>
<li><a href="">텍스트 유형01</a></li>
</ul>
</div>
<div>
<h3>컨텍츠 영역</h3>
<ul>
<li><a href="#">카드 유형01</a></li>
<li><a href="#">카드 유형02</a></li>
<li><a href="#">카드 유형03</a></li>
</ul>
</div>
<div>
<h3>푸터 영역</h3>
<ul>
<li><a href="#">푸터 메뉴 유형01</a></li>
<li><a href="#">푸터 컨택트 유형02</a></li>
<li><a href="#">푸터 이메일 유형03</a></li>
</ul>
</div>
</div>
<div class="footer__right">
2022 Chanmi. Portfolio is Power<br />
All rights reserved.
</div>
</div>
</footer>
<!-- footerType -->
<script src="assets/js/swiper-bundle.min.js"></script>
<script>
var swiper = new Swiper(".mySwiper", {
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
autoplay: {
delay: 2000,
disableOnInteraction: false,
},
pagination: {
el: ".swiper-pagination",
type: "bullets",
clickable: true,
},
});
const btnstop = document.querySelector(".swiper-button-stop");
const btnstart = document.querySelector(".swiper-button-play");
const btnham = document.querySelector(".header__ham");
const btnMenu = document.querySelector(".header__menu");
const btnMenuList = btnMenu.querySelectorAll("ul li a");
btnstart.style.display = "none";
btnstop.addEventListener("click", () => {
swiper.autoplay.stop();
btnstart.style.display = "block";
btnstop.style.display = "none";
});
btnstart.addEventListener("click", () => {
swiper.autoplay.start();
btnstart.style.display = "none";
btnstop.style.display = "block";
});
btnham.addEventListener("click", () => {
btnham.classList.toggle("active");
btnMenu.classList.toggle("active");
document.body.classList.toggle("fixed");
});
btnMenuList.forEach((list) => {
list.addEventListener("click", () => {
document.body.classList.remove("fixed");
btnMenu.classList.remove("active");
btnham.classList.remove("active");
});
});
window.addEventListener("resize", () => {
let width = window.innerWidth;
if (width > 1388) {
document.body.classList.remove("fixed");
btnMenu.classList.remove("active");
btnham.classList.remove("active");
}
});
</script>
<script>
window.addEventListener("scroll", () => {
let scrollTop =
window.pageYOffset ||
window.scrollY ||
document.documentElement.scrollTop;
document
.querySelectorAll(".content__item")
.forEach((element, index) => {
if (scrollTop >= element.offsetTop - 400) {
document.querySelectorAll(".header__menu li").forEach((li) => {
li.classList.remove("active");
});
document
.querySelector(
".header__menu li:nth-child(" + (index + 1) + ")"
)
.classList.add("active");
}
});
});
// 스크롤 이동
document
.querySelectorAll("#headerType .header__inner .header__menu li a")
.forEach((li) => {
li.addEventListener("click", (e) => {
e.preventDefault();
document.querySelector(li.getAttribute("href")).scrollIntoView({
behavior: "smooth", // 이동 부드럽게
});
});
});
// // 메뉴 버튼 (반응형)
// const menuBtn = document.querySelector(".header__ham"); // 메뉴 아이콘
// const menu = document.querySelector(".header__menu"); // 메뉴
// menuBtn.addEventListener("mouseover", () => {
// menu.classList.add("show"); // 메뉴 아이콘에 마우스 커서 올려놓으면 메뉴 보이기
// });
// menu.addEventListener("mouseleave", () => {
// menu.classList.remove("show"); // 메뉴 아이콘에 마우스 커서 벗어나면 메뉴 사라지기
// });
</script>
<script>
//재귀함수(자기 자신을 호출)
function scroll() {
let scrollTop =
window.pageYOffset ||
document.documentElement.scrollTop ||
window.screenY;
document.querySelectorAll(".content__item").forEach((item) => {
if (scrollTop > item.offsetTop - window.innerHeight / 2) {
item.classList.add("show");
}
});
requestAnimationFrame(scroll); //브라우저에 최적화.1분에 60번 window.addEventListener("scroll", scrollProgress);
}
scroll();
</script>
</body>
</html>