728x90
웹 사이트 제작 01
그동안 올렸던 유형들을 한 곳에 모아 한 가지 주제를 정하고 실전 사이트를 만들었습니다. 이번 사이트는 식물키우기와 관련된 사이트입니다.
01. Figma
Figma를 이용해 레이아웃을 만들었습니다.
02. HTML
웹표준 준수를 위해 시맨틱 태그를 사용합니다. 또한, 스킵네비게이션을 사용하였습니다. 스킵네비게이션은 웹접근성을 위한 가장 기본적인 버튼으로, 키보드의 TAB 키를 눌렀을 때 해당 영역으로 갈 수 있는 메뉴 바로가기를 나타냅니다.
소스보기
<div id="skip">
<a href="#">헤더 영역 바로가기</a>
<a href="#">슬라이드 영역 바로가기</a>
<a href="#">이미지 영역 바로가기</a>
<a href="#">이미지/텍스트 영역 바로가기</a>
<a href="#">카드 영역 바로가기</a>
<a href="#">배너 영역 바로가기</a>
<a href="#">텍스트 영역 바로가기</a>
<a href="#">푸터 영역 바로가기</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-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>
<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 -->
03. CSS
CSS는 유형별로 따로 파일을 만들어 작업하여 본문에는 링크로 넣었습니다. 자세한 코드는 원본 소스 보기를 참고해 주시면 감사하겠습니다.
<!-- 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" />
04. JAVASCRIPT
스크롤 이동 시 메뉴에 active를 넣어주는 것과, 메뉴를 클릭했을 때 부드럽게 이동하는 효과, 반응형 메뉴를 위한 자바스크립트입니다.
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"); //슬라이드 stop버튼
const btnstart = document.querySelector(".swiper-button-play"); //슬라이드 play버튼
const btnham = document.querySelector(".header__ham"); //햄버거메뉴
const btnMenu = document.querySelector(".header__menu"); //메뉴
const btnMenuList = btnMenu.querySelectorAll("ul li a"); //메뉴 리스트
btnstart.style.display = "none"; //play버튼 없애기
btnstop.addEventListener("click", () => { //stop버튼 클릭하면
swiper.autoplay.stop(); //움직임 stop
btnstart.style.display = "block"; //start버튼 나타나게
btnstop.style.display = "none"; //stop버튼 없애기
});
btnstart.addEventListener("click", () => { //start버튼 클릭하면
swiper.autoplay.start(); //움직임 strat
btnstart.style.display = "none"; //play버튼 없애기
btnstop.style.display = "block"; //stop버튼 나타나게
});
btnham.addEventListener("click", () => { //햄버거메뉴 클릭하면
btnham.classList.toggle("active"); //.header__ham에 active 추가
btnMenu.classList.toggle("active"); //.header__menu에 active 추가
document.body.classList.toggle("fixed"); //body에 fixed 추가
});
btnMenuList.forEach((list) => {
list.addEventListener("click", () => { //메뉴리스트 클릭하면
document.body.classList.remove("fixed"); //body에 있는 fixed 없애기
btnMenu.classList.remove("active"); //.header__menu에 active 없애기
btnham.classList.remove("active"); //.header__ham에 active 없애기
});
});
window.addEventListener("resize", () => {
let width = window.innerWidth; //현재 보이는 화면 너비 구하기
if (width > 1388) { //화면 너비가 1388보다 크면
document.body.classList.remove("fixed");
btnMenu.classList.remove("active");
btnham.classList.remove("active");
}
});
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" // 이동 부드럽게
});
});
});
05. 최종 결과
728x90
반응형
'웹 사이트 제작' 카테고리의 다른 글
| [웹 사이트 제작]푸터유형 01 (4) | 2022.09.05 |
|---|---|
| [웹 사이트 제작]배너유형 01 (3) | 2022.09.05 |
| [웹 사이트 제작]슬라이드유형 01 (3) | 2022.09.05 |
| [웹 사이트 제작]이미지/텍스트 유형 01 (5) | 2022.09.01 |
| [웹 사이트 제작]헤더유형 01 (4) | 2022.09.01 |
댓글