페이지 따라만들어본 사이트
신상 | 짐웨어모아 - 헬창을 위한 짐웨어
짐웨어모아 - 헬창을 위한 짐웨어
gymwearmoa.com
기본 CSS 와 HTML로 구성하였다.
a태그를 이용하여 각 이미지나 카테로리에 해당하는 URL로 이동할 수 있도록 하였고
상단의 헤더부분을 fixed주어 스크롤링 시 상단에 고정되어있도록 하였다.
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<link rel="stylesheet" href="./css/H_page.css">
</head>
<body>
<div class="alldiv">
<div><!--헤더 영역-->
<header>
<h1>
<a href="https://gymwearmoa.com/" target="_blank" style="color: red; font-weight: bold; text-align: center;">짐 웨 어 모 아</a>
</h1>
<div class="headerdiv">
<div class="headerleft">
</div>
<div class="headercenter">
<nav>
<ul>
<li><a href="https://gymwearmoa.com/new">신상</a></li>
<li><a href="https://gymwearmoa.com/1plus1event">1+1</a></li>
<li><a href="https://gymwearmoa.com/all-product">전체상품</a></li>
<li><a href="https://gymwearmoa.com/women">WOMEN</a></li>
<li><a href="https://gymwearmoa.com/j-pants">바지</a></li>
<li><a href="https://gymwearmoa.com/shortpants">반바지</a></li>
<li><a href="https://gymwearmoa.com/sleevelessshirt">나시</a></li>
<li><a href="https://gymwearmoa.com/shortsleeve">반팔</a></li>
<li><a href="https://gymwearmoa.com/lt">긴팔</a></li>
<li><a href="https://gymwearmoa.com/sweatshirt">맨투맨</a></li>
<li><a href="https://gymwearmoa.com/hoodie">후드/집업</a></li>
<li><a href="https://gymwearmoa.com/qa">Q&A</a></li>
<li><a href="https://gymwearmoa.com/review">리뷰</a></li>
<li><a href="https://gymwearmoa.com/untitled-5">공지사항</a></li>
</ul>
</nav>
</div>
<div class="headerright">
<span><a href = #serach><img src="./img/돋보기.png" alt="검색"></a></span>
<span><a href="https://gymwearmoa.com/login?returnUrl=/home"><img src="./img/내정보.png" alt="내 정보"></a></span>
<span><a href="https://gymwearmoa.com/cart/0"><img src="./img/장바구니.png" alt="장바구니"></a></span>
</div>
</div>
</header>
</div>
<div id="mainterritory"><!--중간영역-->
<div style="height: 150px;"></div><!--헤더부분 뒤 안보이는 부분 채우기-->
<div id="subterritory" class="flex">
<section id="itemlist" class="flex">
<article><a href="https://gymwearmoa.com/product/VQLJPV-01"><img src="./img/1.png" alt=""></a></article>
<article><a href="https://gymwearmoa.com/product/VQLBHJ-02"><img src="./img/2.png" alt=""></a></article>
<article><a href="https://gymwearmoa.com/product/VQSFNJP-01"><img src="./img/3.png" alt=""></a></article>
<article><a href="https://gymwearmoa.com/product/VQOMSN"><img src="./img/4.png" alt=""></a></article>
<article><a href="https://gymwearmoa.com/product/VQSHOHD"><img src="./img/5.png" alt=""></a></article>
<article><a href="https://gymwearmoa.com/product/VQLJPV-01"><img src="./img/1.png" alt=""></a></article>
<article><a href="https://gymwearmoa.com/product/VQLBHJ-02"><img src="./img/2.png" alt=""></a></article>
<article><a href="https://gymwearmoa.com/product/VQSFNJP-01"><img src="./img/3.png" alt=""></a></article>
<article><a href="https://gymwearmoa.com/product/VQOMSN"><img src="./img/4.png" alt=""></a></article>
<article><a href="https://gymwearmoa.com/product/VQSHOHD"><img src="./img/5.png" alt=""></a></article>
<article><a href="https://gymwearmoa.com/product/VQLJPV-01"><img src="./img/1.png" alt=""></a></article>
<article><a href="https://gymwearmoa.com/product/VQLBHJ-02"><img src="./img/2.png" alt=""></a></article>
<article><a href="https://gymwearmoa.com/product/VQSFNJP-01"><img src="./img/3.png" alt=""></a></article>
<article><a href="https://gymwearmoa.com/product/VQOMSN"><img src="./img/4.png" alt=""></a></article>
<article><a href="https://gymwearmoa.com/product/VQSHOHD"><img src="./img/5.png" alt=""></a></article>
<article><a href="https://gymwearmoa.com/product/VQLJPV-01"><img src="./img/1.png" alt=""></a></article>
<article><a href="https://gymwearmoa.com/product/VQLBHJ-02"><img src="./img/2.png" alt=""></a></article>
<article><a href="https://gymwearmoa.com/product/VQSFNJP-01"><img src="./img/3.png" alt=""></a></article>
<article><a href="https://gymwearmoa.com/product/VQOMSN"><img src="./img/4.png" alt=""></a></article>
<article><a href="https://gymwearmoa.com/product/VQSHOHD"><img src="./img/5.png" alt=""></a></article>
<article><a href="https://gymwearmoa.com/product/VQLJPV-01"><img src="./img/1.png" alt=""></a></article>
<article><a href="https://gymwearmoa.com/product/VQLBHJ-02"><img src="./img/2.png" alt=""></a></article>
<article><a href="https://gymwearmoa.com/product/VQSFNJP-01"><img src="./img/3.png" alt=""></a></article>
<article><a href="https://gymwearmoa.com/product/VQOMSN"><img src="./img/4.png" alt=""></a></article>
<article><a href="https://gymwearmoa.com/product/VQSHOHD"><img src="./img/5.png" alt=""></a></article>
</section>
</div>
</div>
<footer><!--푸터영역-->
<div id="footerleft"></div>
<div id="footercenter">
<p>상호 : 주식회사 딩동댕 | 대표 : xxx | 개인정보관리책임자 : xxx | 전화 : 070-xxxx-xxxx | 이메일 : health@xxxx.com</p>
<p>주소 : 수도권 어딘가 | 사업자 등록번호 xxx-xxxx-xxxx</p>
<p style="color: aliceblue;">바디프로필 6월 2일 가잣</p>
</div>
<div id="footerright">
<a href="https://gymwearmoa.com/home" style="color: white;">HOME</a>
<a href="#news" style="color: white;">NEWS</a>
</div>
</footer>
</div>
</body>
</html>
CSS
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
a{text-decoration: none;}
ul > li > a:visited{color: white;}
ul > li > a:hover{color: red;}
#alldiv{
width: 100%;
height: 100%;
}
header{
width: 100%;
height: 140px;
background-color: black;
position: fixed;
z-index: 9999;
}
h1{
text-align: center;
line-height: 100px;
}
.headerdiv{
display: flex;
}
.headerleft{
width: 7%;
}
.headercenter{
width: 86%;
}
nav{
text-align: center;
padding: 0 200px;
}
nav > ul {
display: flex;
color: white;
list-style: none;
margin: 0 auto;
/* padding-inline: 100px; */
justify-content: space-between;
}
li{
background: no-repeat center cover;
}
.headerright{
width: 7%;
margin-right: 15px;
}
.headerright > span{
justify-content: space-between;
}
#mainterritory{
width: 1080px;
margin: 0 auto;
padding: 10px;
background-color: white;
}
#subterritory{
justify-content: space-between;
}
.flex{
display: flex;
}
#itemlist{
width: 100%;
height: 100%;
flex-wrap: wrap;
justify-content: space-between;
}
article{
width: 19%;
height: 24%;
margin-bottom: 13px;
background-color: white
}
footer{
width: 100%;
height: 100px;
background-color: black;
display: flex;
}
#footerleft{
width: 10%;
}
#footercenter{
width: 80%;
text-align: left;
}
#footercenter > p{
padding-top: 10px;
color: white;
font-size: 0.8rem;
}
#footerright{
padding-top: 10px;
padding-left: 15px;
width: 10%;
font-size: 0.5rem;
}
결과물
영상 확인 : https://blog.naver.com/jun950617/222771863654
[실습] 페이지 따라 만들기
페이지 따라만들어본 사이트 https://gymwearmoa.com/new 기본 CSS 와 HTML로 구성하였다. a태그를 ...
blog.naver.com
'프로젝트 & 실습 > WEB Project' 카테고리의 다른 글
| 포트폴리오 화면 만들기 (0) | 2023.01.05 |
|---|---|
| [프로젝트] JavaScript를 통한 중고나라 홈페이지 제작 (1) | 2022.12.31 |
| [프로젝트] 전주한옥마을 페이지 퍼블리싱 (0) | 2022.12.31 |
| [실습] table 태그를 이용한 이력서 만들기 (0) | 2022.12.31 |
댓글