안녕하세요 😊
저는 미림마이스터고 2학년 소프트웨어과 학생입니다 👩💻
이번에 선택과목으로 PHP 를 선택했는데
반응형 쇼핑몰 웹사이트 제작을 해야 해서 🛍️
제가 평소에 좋아하는 포켓몬 쇼핑몰 웹사이트를 만들게 되었습니다
🐶🦁🐻🐷🐨
제가 만든 포켓몬스터 반응형 웹사이트를 소개해드리겠습니다
메인만 제작하고, 버튼구현도 메인으로 설정해 둔 상태입니다
그냥 메인 겉에만 했어요.. 😝
2학기에 웹사이트 완성할 계획입니다 🔥🔥
이 웹사이트는 부트스트랩(bootstrap)을 사용해서 제작하였습니다
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pokémon Store</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<link rel="icon" href="icon.png" type="image/png">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header class="bg-white shadow-sm">
<div class="container d-flex justify-content-between align-items-center py-2">
<div class="logo" onclick="redirectToNewPage()">
<img src="logo.png" alt="Pokémon Store Logo" height="70">
</div>
<nav class="navbar navbar-expand-lg navbar-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav" onclick="redirectToNewPage()">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="#">BEST</a></li>
<li class="nav-item"><a class="nav-link" href="#">봉제인형</a></li>
<li class="nav-item"><a class="nav-link" href="#">리뷰/게시판</a></li>
<li class="nav-item"><a class="nav-link" href="#">브랜드 소개</a></li>
<li class="nav-item"><a class="nav-link" href="#">마이페이지</a></li>
</ul>
</div>
</nav>
</div>
</header>
<main class="container my-4">
<div id="pokemonCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active" onclick="redirectToNewPage()">
<img src="pokemon1.png" class="d-block w-100" alt="Pokemon 1">
</div>
<div class="carousel-item" onclick="redirectToNewPage()">
<img src="pokemon2.png" class="d-block w-100" alt="Pokemon 2">
</div>
<div class="carousel-item" onclick="redirectToNewPage()">
<img src="pokemon3.png" class="d-block w-100" alt="Pokemon 3">
</div>
<div class="carousel-item" onclick="redirectToNewPage()">
<img src="pokemon4.png" class="d-block w-100" alt="Pokemon 4">
</div>
<div class="carousel-item" onclick="redirectToNewPage()">
<img src="pokemon5.png" class="d-block w-100" alt="Pokemon 5">
</div>
</div>
<a class="carousel-control-prev" href="#pokemonCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#pokemonCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<br>
<br>
<br>
<br>
<div class="section" id="best-item">
<span class="red-text">B</span><span class="black-text">EST ITEM</span><br>
<span class="black-text-s">가장 많이 사랑받은 상품들</span>
<div class="product-list">
<div class="product" onclick="redirectToNewPage()">
<img src="리피아.png" alt="Item 1">
<p class="product-text">포켓몬센터 마스코트 POKEMON DOLLS 리피아</p>
<p class="product-text">18,000원</p>
</div>
<div class="product" onclick="redirectToNewPage()">
<img src="블래키.png" alt="Item 2">
<p class="product-text">포켓몬센터 마스코트 POKEMON DOLLS 블래키</p>
<p class="product-text">18,000원</p>
</div>
<div class="product" onclick="redirectToNewPage()">
<img src="부스터.png" alt="Item 3">
<p class="product-text">포켓몬센터 마스코트 POKEMON DOLLS 부스터</p>
<p class="product-text">18,000원</p>
</div>
<div class="product" onclick="redirectToNewPage()">
<img src="님피아.png" alt="Item 4">
<p class="product-text">포켓몬센터 마스코트 POKEMON DOLLS 님피아</p>
<p class="product-text">18,000원</p>
</div>
<div class="product" onclick="redirectToNewPage()">
<img src="샤미드.png" alt="Item 5">
<p class="product-text">포켓몬센터 마스코트 POKEMON DOLLS 샤미드</p>
<p class="product-text">18,000원</p>
</div>
</div>
</div>
<div class="section" id="new-arrival">
<span class="red-text">N</span><span class="black-text">EW ARRIVAL</span><br>
<span class="black-text-s">새로운 상품들을 만나보세요!</span>
<div class="product-list">
<div class="product" onclick="redirectToNewPage()">
<img src="님피아fit.png" alt="Item 6">
<p class="product-text">포켓몬센터 봉제인형 Pokemon fit 님피아</p>
<p class="product-text">22,000원</p>
</div>
<div class="product" onclick="redirectToNewPage()">
<img src="미끄메라.png" alt="Item 7">
<p class="product-text">포켓몬센터 봉제인형 Pokemon fit 미끄메라</p>
<p class="product-text">20,000원</p>
</div>
<div class="product" onclick="redirectToNewPage()">
<img src="데덴네.png" alt="Item 8">
<p class="product-text">포켓몬센터 봉제인형 Pokemon fit 데덴네</p>
<p class="product-text">20,000원</p>
</div>
<div class="product" onclick="redirectToNewPage()">
<img src="빠르모트.png" alt="Item 9">
<p class="product-text">포켓몬센터 봉제인형 빠르모트</p>
<p class="product-text">55,000원</p>
</div>
<div class="product" onclick="redirectToNewPage()">
<img src="날개치는머리.png" alt="Item 10">
<p class="product-text">포켓몬센터 봉제인형 날개치는머리</p>
<p class="product-text">35,000원</p>
</div>
</div>
</div>
</main>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="scripts.js"></script>
</body>
</html>(main.html)
웹페이지 제목 : Pokémon Store / 아이콘, 커서 ' 포켓몬 볼 ' 설정 / 로고 ' Pokémon Store ' 사진 설정
반응형 웹사이트로 모바일 화면에 된다면 메뉴창이 변함 -> 메뉴를 접고 펼칠 수 있는 버튼 있음
메뉴목록 : BEST, 봉제인형, 리뷰/게시판, 브랜드 소개, 마이페이지
캐러셀 설치 ( 캐러셀 : 사진이 자동으로 넘어가는 사진첩 느낌) / 이전, 다음 버튼 설정
BEST ITEM (가장 많이 사랑받은 상품들) 표현 / NEW ARRIVAL (새로운 상품들을 만나보세요) 표현
body, html {
cursor: url(cursor.gif), auto;
}
a {
cursor: url(cursor.gif), auto;
}
.carousel-inner img {
width: 100%;
height: auto;
}
.user-options .btn-link {
color: gray;
text-decoration: none;
transition: color 0.3s;
}
.user-options .btn-link:hover {
color: black;
}
.user-options .btn-link:focus {
color: black;
outline: none;
}
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.section-title {
text-align: center;
margin: 20px 0;
font-size: 36px;
font-weight: bold;
color: #000000;
}
.section-title2 {
text-align: center;
margin: 5px 0;
}
.red-text {
color: #FF0000;
}
.black-text {
color: #000000;
}
.black-text-s {
color: #000000;
font-size: small;
}
.container {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
}
.logo img {
height: 50px;
}
.navbar {
display: flex;
justify-content: center;
align-items: center;
}
.navbar-nav {
display: flex;
gap: 20px;
}
.nav-item a {
text-decoration: none;
color: #000000;
font-weight: bold;
}
.product-list {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
gap: 20px;
}
.product {
text-align: center;
cursor: pointer;
}
.product img {
width: 150px;
height: auto;
}
.product-text {
margin: 10px 0;
font-size: 14px;
color: #000000;
}(main.css)
커서 이미지 설정 / 커서가 버튼에 가면 색상 변화 설정 (색이 진해짐) / 커서가 상품에 가면 1.1배 확대 설정
모든 글자 색상 / 크기 / 글꼴 설정
캐러셀 이미지 너비 / 높이 / 스타일 / 애니메이션 설정
BEST ITEM, NEW ARRIVAL 글자 색상 / 크기 / 글꼴 설정
let slideIndex = 0;
function moveSlide(n) {
const slides = document.querySelector('.carousel-slide');
const totalSlides = slides.children.length;
slideIndex = (slideIndex + n + totalSlides) % totalSlides;
slides.style.transform = `translateX(-${slideIndex * 100}%)`;
}
function redirectToNewPage() {
window.location.href = 'main.html'; // 특정 요소를 클릭했을 때 'main.html'로 리디렉션
}(main.js)
jquery 라이브러리 / popper.js 라이브러리 / javascript 부트스트랩 설정
슬라이드 인덱스 / 슬라이드 이동시키는 함수 설정
요소 클릭 -> main.html로 이동하게 설정
코드와 사진들은 제 깃허브에 있습니다 !
👩💻🖥️ ❤️🔥
https://github.com/jiy0712/PHP-Project1
GitHub - jiy0712/PHP-Project1
Contribute to jiy0712/PHP-Project1 development by creating an account on GitHub.
github.com
jiy0712 - Overview
jiy0712 has 4 repositories available. Follow their code on GitHub.
github.com
깃허브 맞팔해욥 😀