220822~24 - 반응형 웹 제작 (nike), 적응형 웹 제작
반응형 웹 (nike)
- index.html
<!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>나이키. Just Do It. Nike.com</title>
<!-- xeicon cdn(벡터 그래픽 아이콘 툴킷) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css">
<!-- 폰트 -->
<link rel="stylesheet" href="css/Lato-font.css">
<link rel="stylesheet" href="css/SpoqaHanSans-kr.css">
<!-- 타이틀에 파비콘 넣기 -->
<link rel="shortcut icon" href="images/favicon.png">
<!-- swiper css cdn -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.4.5/css/swiper.css">
<!-- 스타일 가이드 (공통모듈 css) -->
<link rel="stylesheet" href="css/styleGuide.css">
<!-- 인덱스 기본 스타일 -->
<link rel="stylesheet" href="css/indexStyle.css">
<!-- 태블릿용 인덱스 스타일 -->
<link rel="stylesheet" href="css/indexTablet.css">
<!-- 모바일용 인덱스 스타일 -->
<link rel="stylesheet" href="css/indexMobile.css">
<script src="js/jquery-3.6.0.min.js"></script>
<!-- swiper 플러그인 cdn -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.4.5/js/swiper.min.js"></script>
<script src="js/index.js"></script>
</head>
<body>
<!-- 메뉴 영역 시작 -->
<div class="menu-area">
<!-- ★데스크탑- 상단 검정 메뉴 / 태블릿,모바일- 우측 햄버거 메뉴 -->
<div class="h-top">
<div class="jordan-logo">
<a href="#">
<img src="./images/AIR-JORDAN-LOGO.svg">
<span>Jordan</span> <!-- 모바일만 -->
</a>
</div>
<div class="top-menu-area">
<h4 class="top-menu-title">나이키 멤버만을 위한 특별한 혜택을 알아보세요</h4><!--모바일에서만-->
<ul class="top-menu">
<li><a href="#">고객센터</a></li>
<li><a href="#">멤버가입</a></li>
<li><a href="#">로그인</a></li>
</ul>
</div>
<ul class="customer"> <!-- 모바일만 -->
<li><a href="#"><img src="images/shopping-bag.svg" alt="장바구니">장바구니</a></li>
<li><a href="#"><img src="images/truck.svg" alt="주문배송">주문배송</a></li>
<li><a href="#"><img src="images/help-circle.svg" alt="고객센터">고객센터</a></li>
</ul>
</div>
</div>
<!-- 메뉴 영역 끝 -->
<!-- 메인 영역 시작 -->
<div class="index-wrap">
<header>
<h1 class="logo">
<a href="index.html"><img src="images/NIKE-LOGO.svg" alt=""></a>
</h1>
<nav>
<ul class="main-menu">
<!-- 주메뉴1 New Releases -->
<li>
<a href="#">New Releases</a>
<ul class="sub-menu">
<li class="all"> <!-- 모바일만 -->
<a href="#"><i class="xi-angle-left"></i>ALL</a> <!-- xeicon 툴킷 : i class 오타 유의 -->
</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>
</li>
<!-- 주메뉴2 Men -->
<li>
<a href="#">Men</a>
<ul class="sub-menu">
<li class="all"> <!-- 모바일만 -->
<a href="#"><i class="xi-angle-left"></i>ALL</a> <!-- xeicon 툴킷 : i class 오타 유의 -->
</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>
</li>
<!-- 주메뉴3 Women -->
<li>
<a href="#">Women</a>
<ul class="sub-menu">
<li class="all"> <!-- 모바일만 -->
<a href="#"><i class="xi-angle-left"></i>ALL</a> <!-- xeicon 툴킷 : i class 오타 유의 -->
</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>
</li>
<!-- 주메뉴4 Kids -->
<li>
<a href="#">Kids</a>
<ul class="sub-menu">
<li class="all"> <!-- 모바일만 -->
<a href="#"><i class="xi-angle-left"></i>ALL</a> <!-- xeicon 툴킷 : i class 오타 유의 -->
</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>
</li>
<!-- 주메뉴5 Sale -->
<li>
<a href="#">Sale</a>
<ul class="sub-menu">
<li class="all"> <!-- 모바일만 -->
<a href="#"><i class="xi-angle-left"></i>ALL</a> <!-- xeicon 툴킷 : i class 오타 유의 -->
</li>
<li><a href="#">New to Sale</a></li>
<li><a href="#">Men Sale</a></li>
<li><a href="#">Women Sale</a></li>
<li><a href="#">Kids Sale</a></li>
</ul>
</li>
<!-- 이벤트 메뉴 (하위메뉴 없음)-->
<li class="hidden-menu">
<a href="#">브라 & 레깅스 이벤트</a>
</li>
<li class="hidden-menu">
<a href="#">SNKR</a>
</li>
<li class="hidden-menu">
<a href="#">BRAND</a>
</li>
<!-- 주메뉴6 MOVE TO ZERO -->
<li><a href="#">MOVE TO ZERO</a></li>
</ul>
</nav>
<div class="icon-menu">
<ul>
<li><a href="#"><img src="images/search.svg" alt="찾기 아이콘"></a></li>
<!--데스크탑만--><li class="heart-btn"><a href="#"><img src="images/heart.svg" alt="즐겨찾기 아이콘"></a></li>
<li><a href="#"><img src="images/shopping-bag.svg" alt="장바구니 아이콘"></a></li>
<!--모바일만--><li class="menu-btn"><a href="#"><img src="images/menu.svg" alt="메뉴 아이콘"></a></li>
</ul>
</div>
</header>
<!-- 서브 메뉴 배경 -->
<div class="sub-bg">
</div>
<!-- 메인 섹션 -->
<section>
<article class="main-visual">
<div class="main-img main-01">
<img src="images/M-01.png" alt="크레이터 임팩트 이미지">
</div>
<div class="main-text">
<h2 class="title-01">크레이터 임팩트</h2>
<p class="title-01-text">더 가벼워진 탄소 발자국에
볼드한 이미지까지 더한 나이키 크레이터 임팩트-<br>
나이키 멤버가 되어 가장 먼저 만나보세요
</p>
<p class="title-01-text">제로 탄소와 제로 폐기물을 목표로
미래를 보호하기 위한<br>나이키의 여정과 멤버만을 위한
특별한 혜택도 확인해 보세요.
</p>
<div class="btn-area">
<a href="#" class="btn-01">구매하기</a>
<a href="#" class="btn-01">자세히보기</a>
</div>
</div>
</article>
<article class="main-visual">
<div class="main-img main-02">
<img src="images/M-02.png" alt="나이키 에어 베이퍼맥스 이미지">
</div>
<div class="main-text">
<h2 class="title-01">나이키 에어 베이퍼맥스 EVO</h2>
<p class="title-01-text">클래식한 에어맥스 시리즈를 리믹스하여<br>
더욱 볼드해진 나이키 에어 베이퍼맥스 EVO를 만나보세요
</p>
<div class="btn-area">
<a href="#" class="btn-01">구매하기</a>
</div>
</div>
</article>
<article class="main-visual">
<div class="main-img main-03">
<img src="images/M-03.png" alt="나이키 에어맥스 비바 이미지">
</div>
<div class="main-text">
<h2 class="title-01">나이키 에어맥스 비바</h2>
<p class="title-01-text">맥스 에어 유닛과 아이코닉한 디자인의 비바와 함께<br>
시선을 압도하는 세련된 스타일을 연출해보세요
</p>
<div class="btn-area">
<a href="#" class="btn-01">구매하기</a>
</div>
</div>
</article>
<article class="content">
<h3 class="content-title">이번주 스타일링</h3>
<div class="content-img-wrap">
<div class="content-img">
<div class="main-img"> <!-- flex 위해 div로 감쌈 -->
<img src="images/style-01.png" alt="스프링키즈재킷남아">
</div>
<div class="main-img">
<img src="images/style-02.png" alt="스프링키즈재킷">
</div>
<div class="main-img">
<img src="images/style-03.png" alt="스프링키즈재킷">
</div>
</div>
</div>
<div class="main-text">
<h2 class="title-01">스프링 키즈 재킷 스타일</h2>
<p class="title-01-text">봄 시즌을 위한 키즈 재킷 제품과 함께
산뜻한 스타일을 완성해보세요
</p>
<div class="btn-area">
<a href="#" class="btn-01">구매하기</a>
<a href="#" class="btn-01">더 많은 스타일링 보기</a>
</div>
</div>
</article>
<article class="content">
<h3 class="content-title">Trending Now</h3>
<div class="content-img trend">
<div class="trend-img">
<img src="images/trend-01.png" alt="trend">
<div class="main-text trend-text">
<h3 class="content-title c-white">월드투어 컬렉션</h3>
<div class="btn-area">
<a href="#" class="btn-01 b-white">구매하기</a>
</div>
</div>
</div>
<div class="trend-img">
<img src="images/trend-02.png" alt="trend">
<div class="main-text trend-text">
<h3 class="content-title c-white">에어조틱 컬렉션</h3>
<div class="btn-area">
<a href="#" class="btn-01 b-white">구매하기</a>
</div>
</div>
</div>
</div>
</article>
<article class="content swiper-slide">
<h3 class="content-title">Featured Shoes</h3>
<!-- Swiper slide -->
<div class="swiper-container Featured-slide">
<div class="swiper-wrapper">
<div class="swiper-slide">
<a href="#">
<img src="images/shoes-01.png" alt="shoes-01">
<h4 class="featured-title">나이키 데이브레이크</h4>
<p class="featured-text">여성신발 라이프스타일
<br>119,000원
</p>
</a>
</div>
<div class="swiper-slide">
<a href="#">
<img src="images/shoes-02.png" alt="shoes-02">
<h4 class="featured-title">나이키 에어맥스 97</h4>
<p class="featured-text">남성신발 라이프스타일
<br>199,000원
</p>
</a>
</div>
<div class="swiper-slide">
<a href="#">
<img src="images/shoes-03.png" alt="shoes-03">
<h4 class="featured-title">나이키 코드 레거시</h4>
<p class="featured-text">여성 뮬
<br>69,000원
</p>
</a>
</div>
<div class="swiper-slide">
<a href="#">
<img src="images/shoes-04.png" alt="shoes-04">
<h4 class="featured-title">나이키 리액트 인피니티 런 플라이니트 2</h4>
<p class="featured-text">여성신발 러닝
<br>179,000원
</p>
</a>
</div>
<div class="swiper-slide">
<a href="#">
<img src="images/shoes-05.png" alt="shoes-05">
<h4 class="featured-title">나이키 코믹스 유니티</h4>
<p class="featured-text">성인공용 신발 농구
<br>179,000원
</p>
</a>
</div>
<div class="swiper-slide">
<a href="#">
<img src="images/shoes-06.png" alt="shoes-06">
<h4 class="featured-title">나이키 에어 줌 빅토리 투어 2</h4>
<p class="featured-text">성인공용 신발 골프
<br>239,000원
</p>
</a>
</div>
<div class="swiper-slide">
<a href="#">
<img src="images/shoes-07.png" alt="shoes-07">
<h4 class="featured-title">나이키 에어 줌 슈퍼렙 2</h4>
<p class="featured-text">남성신발 트레이닝
<br>129,000원
</p>
</a>
</div>
<div class="swiper-slide">
<a href="#">
<img src="images/shoes-08.png" alt="shoes-08">
<h4 class="featured-title">나이키 머큐리얼 드림 스피드 슈퍼플라이</h4>
<p class="featured-text">성인공용 신발 축구
<br>329,000원
</p>
</a>
</div>
</div>
</div>
<!-- 좌우버튼, 페이저 -->
<div class="featured-control">
<div class="swiper-pagination f-pager">
</div>
<div class="swiper-button-prev f-prev">
</div>
<div class="swiper-button-next f-next">
</div>
</div>
</article>
</section>
<!-- 푸터 영역 시작 -->
<footer>
<div class="f-top">
<ul class="f-mobile"><!-- 모바일만 -->
<li><a href="#">주문배송</a></li>
<li><a href="#">매장안내</a></li>
<li><a href="#">고객센터</a></li>
</ul>
<ul class="f-menu"><!-- 데스크탑만 -->
<li><a href="#">매장안내</a></li>
<li><a href="#">나이키 트레이닝 가이드</a></li>
<li><a href="#">로그인</a></li>
<li><a href="#">멤버가입</a></li>
</ul>
<ul class="f-menu">
<li><a href="#">고객센터</a></li>
<ul class="f-sub">
<li><a href="#">080-022-0182</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="#">1:1 채팅 문의</a></li>
<li><a href="#">1:1 이메일 문의</a></li>
<li><a href="#">이용약관</a></li>
<li><a href="#">개인정보처리방침</a></li>
</ul>
</ul>
<ul class="f-menu">
<li><a href="#">ABOUT NIKE</a></li>
<ul class="f-sub">
<li><a href="#">나이키에 대하여</a></li>
</ul>
</ul>
<ul class="f-menu social">
<li><a href="#">SOCIAL</a></li>
<ul class="f-sub">
<li><a href="#"><i class="xi-twitter"></i></a></li>
<li><a href="#"><i class="xi-facebook"></i></a></li>
<li><a href="#"><i class="xi-youtube"></i></a></li>
<li><a href="#"><i class="xi-instagram"></i></a></li>
</ul>
</ul>
</div>
<div class="f-line">
</div>
<div class="f-bottom">
<ul>
<li><a href="#">이용약관</a></li>
<li><a href="#">개인정보처리방침</a></li>
</ul>
<div class="f-info">
<p>
(유)나이키코리아 대표 KIM MYUNG HEE<br>
서울 강남구 테헤란로 152 강남파이낸스센터 31층<br>
통신판매업신고번호 2011-서울강남-03461<br>
등록번호 220-88-09068 사업자정보확인<br>
고객센터 전화문의 080-022-0182<br>
FAX 02-6744-5880 E-mail service@nike.co.kr<br>
호스팅서비스사업자 브리즈
</p>
<div class="inipay">
<p>안전거래를 위해 현금 등으로 결제시 저희 쇼핑몰에서 가입한
<br>KG 이니시스의 구매안전 서비스(재무지급보증)를 이용하실 수 있습니다.
</p>
<p>
온라인디지털콘텐츠사업발전법에 의한
<a href="#">콘텐츠보호안내 자세히보기</a>
<img src="images/inipay.png" alt="inipay">
</p>
</div>
</div>
<p><i class="xi-maker"></i>대한민국 © 2021
Nike, Inc. All RIghts Reserved</p>
</div>
</footer>
<!-- 푸터 영역 끝 -->
</div>
<!-- 메인 영역 끝 -->
</body>
</html>
- styleGuide.css (헤더, 푸터)
/* 공통 모듈 */
html, body, div, header, nav, section, article, footer, ul, li, h1, h2, h3, h4, p {
margin: 0;
padding: 0;
}
body, html{
height: 100%;
font-family: 'Spoqa Han Sans';
font-weight: 300;
color: #111;
font-size: 16px;
}
li{
list-style: none;
}
a{
text-decoration: none;
color: #111;
}
img{
display: block;
}
/* 헤더 */
header{
height: 64px;
position: relative;
z-index: 10;
display: flex;
}
.logo, nav, .icon-menu{
position: absolute;
}
.logo{
top: 50%; /*헤더 높이의 50% 위치*/
left: 0;
transform: translateY(-50%); /*로고 높이 반만큼 올라감*/
}
nav{
height: 100%;
left: 50%;
transform: translateX(-50%);
top: 0;
}
.main-menu, .icon-menu ul{
display: flex;
}
.icon-menu {
top:50%;
right: 0;
transform: translateY(-50%);
}
.icon-menu ul li{
margin-left: 18px;
}
.menu-btn{
display: none;
}
.hidden-menu{
display: none;
}
.main-menu > li > a{
box-sizing: border-box;
height: 64px;
border-bottom: 2px solid #fff; /*메뉴 흔들리지 않도록 미리 부여*/
display: flex;
align-items: center;
padding: 0 32px;
font-family: 'Lato';
font-size: 1em;
font-weight: 400;
white-space: nowrap; /*글씨 한 줄에*/
}
.main-menu > li:last-child>a{
color: #2ba007;
}
.main-menu > li:last-child:hover>a {
border-bottom: 2px solid #fff;
}
.main-menu > li:hover > a{
border-bottom: 2px solid #111;
}
.sub-menu{
display: none;
text-align: center;
padding-top: 26px;
}
.sub-menu li{
line-height: 26px;
}
.sub-menu li a {
font-size: 0.8125em;
color: #757575;
letter-spacing: -0.2px;
}
.main-menu:hover .sub-menu{
display: block;
}
.all{
display: none;
}
.sub-bg{
width: 100%;
height: 230px;
background-color: #fff;
position: absolute;
top: 64px;
left: 0;
z-index: 5;
display: none;
}
/* 푸터 */
footer{
background-color: #111;
color: #fff;
}
footer a{
color: #fff;
}
.f-top, .f-bottom{
width: 1024px;
margin: 0 auto;
padding: 40px 0;
font-size: 0.6875em;
}
.f-line{
border-top: 1px solid #333;
}
.f-top, .f-info{
display: flex;
justify-content: space-between;
}
.f-mobile{
display: none;
}
.f-menu>li{
line-height: 30px;
}
.f-menu>li>a{
font-size: 0.8125em;
}
.f-sub li{
line-height: 24px;
}
.f-sub a{
color: #aaa;
}
.social .f-sub{
display: flex;
}
.social .f-sub li{
width: 24px;
height: 24px;
border-radius: 12px;
text-align: center;
font-size: 0.8125em;
background-color: #444;
margin-right: 6px;
}
.f-bottom ul{
display: flex;
mask-border: 32px;
}
.f-bottom ul li{
font-size: 0.8125em;
margin-right: 16px;
}
.f-bottom p{
color: #aaa;
letter-spacing: 0.5px;
}
.f-info>p br:nth-child(1),
.f-info>p br:nth-child(3),
.f-info>p br:nth-child(6){ /*데스크탑에서는 넓게*/
display: none;
}
.inipay p:last-child{
display: flex;
align-items: center;
margin-top: 32px;
}
.inipay p:last-child img{
margin-left: 16px;
}
.inipay p:last-child a{
margin-left: 8px;
text-decoration: underline;
}
- indexStyle.css (데스크탑 메인페이지)
/* 데스크탑 스타일 */
.h-top{
height: 36px;
display: flex;
justify-content: space-between;
align-items: center;
background-color: #111;
padding: 0 3%;
}
.jordan-logo span, .customer, .top-menu-title{
display: none;
}
.top-menu{
display: flex;
}
.top-menu li{
margin-left: 24px;
height: 36px;
line-height: 33px;
}
.top-menu li a{
color: #c4c4c4;
font-size: 0.75em;
}
/* index-wrap 영역 */
.index-wrap{
padding: 0 3%;
position: relative;
z-index: 1;
}
.main-visual, .content{
text-align: center;
margin-bottom: 100px;
}
.main-img>img{
width: 100%;
}
.title-01{
font-size: 2.5em;
font-weight: 700;
letter-spacing: -1px;
padding-top: 30px;
}
.title-01-text{
font-size: 1em;
font-weight: 400;
letter-spacing: -0.5px;
padding-top: 14px;
}
.btn-area{
display: flex;
justify-content: center;
}
.btn-01{
display: block;
background-color: #111;
color: #fff;
font-size: 1em;
border-radius: 18px;
padding: 6px 22px 7px 22px;
margin: 24px 4px 0 4px;
}
/* 이번주 스타일링 */
.content-img{
display: flex;
}
.content-img>.main-img{
flex: 1;
margin-right: 24px;
}
.content-img>.main-img:last-child{
margin-right: 0;
}
.content-title{
text-align: left;
font-size: 1.5em;
font-weight: 400;
margin-bottom: 24px;
letter-spacing: -1px;
}
/* Trending Now */
.trend-img{
flex:1;
position: relative;
}
.trend-img:first-child{
margin-right: 24px;
}
.trend-img>img{
width: 100%;
}
.trend-text{
position: absolute;
left: 40px;
bottom: 40px;
}
.c-white{
color: #fff;
margin-bottom: 18px;
}
.b-white{
background-color: #fff;
color: #111;
margin: 0;
}
.trend-img .btn-area{
justify-content: flex-start;
}
/* Featured Shoes */
.swiper-slide{
position: relative;
}
.Featured-slide .swiper-slide>a{
display: block;
width: 100%;
text-align: left;
}
.Featured-slide .swiper-slide>a>img{
width: 100%;
}
.featured-title{
font-size: 1.25em;
color: #111;
font-weight: 400;
margin-top: 18px;
letter-spacing: -1px;
}
.featured-text{
font-size: 1em;
color: #757575;
line-height: 19px;
margin-top: 8px;
letter-spacing: -0.5px;
}
.f-prev{
margin-left: 80%;
}
.f-next, .f-prev{
width: 23px;
height: 23px;
margin-top: 0;
top: 0;
}
.f-prev{
left: 0;
}
.f-next{
right: 0;
}
.f-prev::after, .f-next::after{
font-size: 1.125em;
color: #999;
}
.f-pager{
bottom: 1px;
font-size: 0.9375em;
color: #999;
}
- indexTablet.css (태블릿)
/* 미디어쿼리 1024px 이하에서 적용 (태블릿) */
@media screen and (max-width:1024px) {
.menu-area{
width: 100%;
height: 100vh;
background-color: rgba(0,0,0,0.4);
position: absolute;
left: 0;
top: 0;
z-index: 999;
overflow-x: hidden;
overflow-y: scroll; /*스크롤 기능*/
/* IE, Edge에서 스크롤바 숨기기 */
-ms-overflow-style:none;
/* firefox에서 스크롤바 숨기기 */
scrollbar-width: none;
display: none;
}
/* 크롬, 사파리에서 스크롤바 숨기기 */
.menu-area::-webkit-scrollbar{
display: none;
}
.h-top{
width: 45%;
height: 100vh;
background-color: #fff;
position: absolute;
top: 0;
right: -100%;
padding: 0;
display: block;
}
.hidden-menu{
display: block;
}
.jordan-logo{
width: 100%;
}
.jordan-logo a{
display: flex;
height: 24px;
color: #111;
padding-left: 40px;
margin-bottom: 48px;
}
.jordan-logo span, .customer, .top-menu-title{
display: block;
}
.jordan-logo span{
margin-left: 12px;
}
.customer{
box-sizing: border-box;
width: 100%;
padding: 48px 40px;
background-color: #fff;
}
.customer li{
margin-bottom: 24px;
}
.customer li a{
display: flex;
font-size: 0.8125em;
}
.customer li a img{
margin-right: 15px;
}
.top-menu-area{
margin-top: 30px;
box-sizing: border-box;
width: 100%;
padding: 40px;
background-color: #f4f4f4;
}
.top-menu-title{
font-size: 0.875em;
font-weight: 300;
}
.top-menu{
display: flex;
margin-top: 18px;
}
.top-menu li {
margin-left: 0;
height: 36px;
line-height: 33px;
background-color: #111;
border-radius: 18px;
}
.top-menu li:first-child{
display: none;
}
.top-menu li:last-child{
margin-left: 14px;
background-color: #fff;
box-sizing: border-box;
border: 1px solid #111;
}
.top-menu li a{
color: #fff;
padding: 0 18px;
font-size: 0.875em;
}
.top-menu li:last-child a{
color: #111;
}
/* index-wrap */
.index-wrap{
padding: 0 3.5%;
}
header{
height: 56px;
}
.heart-btn{
display: none;
}
.menu-btn{
display: block;
}
nav{
width: 100%;
height: auto;
position: relative;
}
.main-menu{
flex-direction: column;
padding: 56px 40px 40px 40px;
}
.main-menu>li>a{
border: none;
padding: 0;
height: 48px;
position: relative;
}
.main-menu>li:hover>a{
border-bottom: none;
}
.main-menu>li:nth-child(-n+5)>a::after{
content: "";
position: absolute;
right:0;
top: 50%;
transform: translateY(-50%);
width: 15px;
height: 15px;
background-image: url('../images/chevron-right.svg');
}
.sub-menu{
display: block;
position: absolute;
top: 0;
left: 150%;
z-index: 9999;
height: 100vh;
width: 100%;
background-color: #fff;
text-align: left;
box-sizing: border-box;
padding-top: 56px;
padding-left: 40px;
}
.all{
display: block;
}
.all a{
font-weight: 700;
margin-bottom: 24px;
}
.all a i{
margin-right: 18px;
}
.sub-menu li a{
display: block;
font-size: 1em;
height: 48px;
line-height: 48px;
}
/* 메인 타이틀 */
.main-visual, .content{
margin-bottom: 80px;
}
.title-01{
font-size: 2.25em;
padding-top: 24px;
}
.title-01-text {
font-size: 0.825em;
padding-top: 10px;
}
.btn-01{
font-size: 0.8125em;
padding: 5px 18px 6px 18px;
margin: 20px 4px 0 4px;
border-radius: 18.5px;
}
/* 이번주 스타일링 */
.content-img{
display: flex;
}
.content-img>.main-img{
margin-right: 16px;
}
.content-title{
font-size: 1.375em;
margin-bottom: 18px;
}
/* Trending Now */
.trend-img:first-child{
margin-right: 16px;
}
.trend-text{
bottom: 24px;
left: 24px;
}
.c-white{
margin-bottom: 8px;
}
.b-white{
margin:0;
}
/* swiper 슬라이드 */
.Featured-slide .swiper-slide{
width: 38%;
}
.featured-title{
font-size: 1.125em;
margin-top: 16px;
}
.featured-text{
font-size: 0.9375em;
line-height: 19px;
}
/* 푸터 */
.f-top, .f-bottom{
width: 580px;
margin: 0 auto;
padding: 40px 0;
font-size: 0.6875em;
}
.f-info{
flex-direction: column;
}
.f-bottom ul{
margin-bottom: 24px;
}
.f-bottom p{
margin-bottom: 24px;
}
}/* max-width:1024px */
@media screen and (max-width:581px) { /*세로 모드*/
.f-mobile{
width: 100%;
display: flex;
justify-content: center;
font-size: 0.8125em;
}
.f-mobile li{
padding: 0 6%;
}
.f-menu{
display: none;
}
.f-top, .f-bottom{
width: 100%;
box-sizing: border-box;
padding: 16px;
text-align: center;
}
.f-bottom{
padding: 32px 16px;
}
.f-bottom ul{
justify-content: center;
}
.f-bottom ul li a {
color: #aaa;
}
.f-info>p br:nth-child(1),
.f-info>p br:nth-child(3),
.f-info>p br:nth-child(6){
display: block;
}
.inipay p:last-child{
justify-content: center;
}
.inipay p:last-child img{
display: none;
}
} /* max-width:581px */
- indexMobile.css (모바일)
@media screen and (max-width:480px) {
.h-top{
width: 80%;
height: auto;
background-color: #fff;
}
.main-menu{
padding: 40px 24px 32px 24px;
}
.jordan-logo a{
padding-left: 24px;
margin-bottom: 32px;
}
.top-menu-area, .customer{
padding: 40px 24px;
}
header{
height: 48px;
}
.logo img{
height: 18px;
}
.sub-menu{
padding-top: 40px;
padding-left: 24px;
}
.icon-menu img{
height: 20px;
}
.icon-menu ul li{
margin-left: 14px;
}
.index-wrap{
padding: 0 16px;
}
/* 메인 타이틀 */
.main-visual, .content{
margin-bottom: 48px;
}
.title-01{
font-size: 1.5em;
padding-top: 24px;
}
.title-01-text{
font-size: 0.8125em;
padding: 12px 10px 0 10px;
}
.title-01-text br{
display: none;
}
.btn-01 {
font-size: 0.75em;
padding: 4px 16px;
margin: 18px 4px 0 4px;
border-radius: 13px;
}
/* 이번주 스타일링 */
.content-img-wrap{
width: 100%;
overflow: scroll; /*가로 스크롤 기능*/
/* IE, Edge 스크롤바 숨기기 */
-ms-overflow-style: none;
}
/* 크롬, 사파리 스크롤바 숨기기 */
.content-img-wrap::-webkit-scrollbar{
display: none;
}
.content-img{
width: 622px;
display: block;
}
.content-img>.main-img{
float: left;
margin-right: 8px;
width: 202px;
}
.content-title{
font-size: 1em;
margin-bottom: 12px;
}
/* Trending Now */
.trend{
width: 100%;
display: flex;
flex-flow: row wrap;
}
.trend-img{
width: 100%;
flex: none;
}
.trend-img:first-child{
margin-right: 0;
}
.trend-img>img{
width: 100%;
}
.trend-text{
bottom: 18px;
left: 18px;
}
.c-white{
margin-bottom: 8px;
}
.b-white{
margin: 0;
}
/* swiper 슬라이드 */
.Featured-slide .swiper-slide{
width: 60%;
}
.featured-title{
font-size: 0.8125em;
margin-top: 12px;
}
.featured-text{
font-size: 0.6875em;
line-height: 14px;
margin-top: 4px;
}
.featured-control{
width: 52px;
height: 16px;
top: 3px;
}
.f-prev, .f-next{
width: 16px;
height: 16px;
margin-top: 0;
top: 0;
}
.f-prev::after, .f-next::after{
font-size: 0.75em;
color: #999;
}
.f-pager{
bottom: 1px;
font-size: 0.6875em;
}
/* 푸터 */
.f-bottom p{
box-sizing: border-box;
padding: 0 4%;
}
.inipay br{
display: none;
}
.inipay p:last-child{
flex-direction: column;
}
}
- index.js
window.onload=()=>{
let winWidth;
$(window).resize(()=>{
winWidth=$(this).width();
if(winWidth<=1024){
$('.main-menu').off('mouseenter'); //on 이벤트 삭제
$('.main-menu').off('mouseleave');
$('nav').prependTo('.h-top');
$('.jordan-logo').find('img').attr('src','./images/AIR-JORDAN-LOGO-b.svg');
}else{
$('nav').appendTo('header');
$('.jordan-logo').find('img').attr('src','./images/AIR-JORDAN-LOGO.svg');
$('.main-menu').on({
mouseenter:()=>{
$('.sub-menu, .sub-bg').stop().show();
},
mouseleave:()=>{
$('.sub-menu, .sub-bg').stop().hide();
}
});
}
}); //resize 이벤트 종료
$(window).trigger('resize'); //윈도우 사이즈 변할 때마다 강제 이벤트 발생
$('.menu-btn').click((event)=>{
event.stopPropagation();
$('.index-wrap').css('filter','blur(10px)');
$('body, html').css({
height:'100vh',
overflow:'hidden' /*화면, 높이 고정*/
});
$('.menu-area').show();
$('.h-top').animate({
right:'0%'
},'fast');
}) //태블릿, 모바일 메뉴 종료
//햄버거 메뉴 //오류
$('.main-menu>li>a').click((event)=>{
event.stopPropagation();
$(this).siblings('.sub-menu').animate({left:'0%'},'fast');
});
$('.all>a').click((event)=>{
event.stopPropagation();
$(this).parents('.sub-menu').animate({left:'150%'},'fast');
});
$('.menu-area').click(()=>{
$('.index-wrap').css('filter','blur(0px)');
$('.h-top').animate({
right:'-100%'
},'fast',()=>{
$('.menu-area').hide();
});
});
//모바일용 이미지
if (winWidth<=480){
$('.main-01 img').attr('src','images/M-01-mobile.png');
$('.main-02 img').attr('src','images/M-02-mobile.png');
$('.main-03 img').attr('src','images/M-03-mobile.png');
}else{
$('.main-01 img').attr('src','images/M-01.png');
$('.main-02 img').attr('src','images/M-02.png');
$('.main-03 img').attr('src','images/M-03.png');
}
//swiper 플러그인
let swiperSlide = new Swiper('.Featured-slide',{
//기본: 모바일
slidesPerView:'auto',
spaceBetween:8,
pagination:{
el:'.f-pager',
clickable:true,
type:'fraction' /* < > 화살표 / bullets : 버튼들*/
},
navigation:{
prevEl:'.f-prev',
nextEl:'.f-next'
},
//반응형(화면 넓이에 따라 레이아웃 변경)
breakpoints:{
1025:{
slidesPerView:3,
spaceBetween:24
},
480:{
slidesPerView:'auto',
spaceBetween:16
}
}
});
}
적응형 웹
- 모바일
- mindex.html
<!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>Cafe</title>
</head>
<style>
*{
padding: 0;
margin: 0;
}
body{
background-color: white;
}
a{
text-decoration: none;
}
nav a:link, a:visited{
color: white;
}
nav a:active{
color: yellow;
}
h1{
font-size: 1.8em;
}
h2{
font-size: 1.3em;
}
p{
font-size: 1.3em;
line-height: 2.5;
}
li{
font-size: 1em;
line-height: 2;
}
#container{
width: 100%;
}
header{
width: 100%;
height: 300px;
background: url(imgs/header.jpg) no-repeat center;
background-size: cover;
}
nav{
height: 50px;
background-origin: #000;
}
#main-nav{
list-style: none;
padding: 10px;
}
#main-nav li{
display: inline-block;
color:#fff;
font-size: 0.8em;
margin: 5px 15px;
}
.photo{
width: 100%;
padding: 10px;
text-align: center;
}
.photo img{
width: 100%;
}
.ice{
border: 1px solid white;
border-radius: 50%;
}
ol{
padding-left: 30px;
padding-right: 30px;
}
footer{
background-color: black;
}
footer p{
text-align: center;
color: #fff;
}
</style>
<body>
<div id="container">
<header>
<nav>
<ul id="main-nav">
<li><a href="#intro">카페 소개</a></li>
<li><a href="#choice">이달의 추천</a></li>
<li><a href="#map">오시는 길</a></li>
</ul>
</nav>
</header>
<section id="intro">
<div class="page-title">
<h1>카페 소개</h1>
</div>
<div class="content">
<div class="photo">
<img src="imgs/coffee.jpg" alt="coffee">
</div>
<div class="text">
<p>영업시간 : 오전 9시 ~ 밤 10시</p>
<p>휴무 : 매주 수요일<i><small>(수요일이 공휴일인
경우 수요일 영업, 다음날 휴무)</small></i></p>
</div>
</div>
</section>
<section id="map">
<div class="page-title">
<h1>오시는 길</h1>
</div>
<div class="content">
<div class="photo">
<img src="imgs/map.jpg" alt="사계 포구에서 서쪽 방향으로 150미터">
</div>
<div class="text">
<p>서귀포시 안덕면 사계리 2414-251</p>
<p>제주 올레 10코스 산방산 근처</p>
</div>
</div>
</section>
<section id="choice">
<div class="page-title">
<h1>이달의 추천<h1>
</div>
<div class="content">
<div class="photo">
<img src="imgs/ice.jpg" alt="아이스 커피">
</div>
<div class="text">
<p>핸드드립 아이스커피</p>
<ol>
<li>1인분 기준으로 서버에 각얼음 5조각(한조각 20cc) 넣고 추출을 시작한다</li>
<li>평상시보다 원두의 양은 2배 정도(20g)와 추출액은 얼음 포함해서 200cc까지 내린다</li>
<li>아이스 잔에 얼음 6~7개 섞어서 시원하게 마신다</li>
</ol>
</div>
</div>
</section>
<footer>
<p>My times with Coffee</p>
</footer>
</div>
</body>
</html>