전체페이지 만들기_2022.06.20.MON ~ 2022.06.24.FRI
<!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>2022.06.20. 전체페이지 실습 01</title>
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/slick.css">
<link rel="stylesheet" href="./css/jquery.mb.YTPlayer.min.css">
<link rel="stylesheet" href="./css/main.css">
</head>
<body>
<div class="Wrap">
<!-- { 2020.06.20. lsy topBanner-->
<div class="topBanner">
<div class="inner">
<h2>JEWELLERY COLLECTION EVENT</h2>
<p>모던하면서도 클래식한 디자인들을 완벽하게 표현한 그라프 하우스의 시그너쳐 컬렉션은 다양한 컷, 스톤 그리고 색상들을 멋진 조합으로 선사합니다.
<a href="">more</a>
</p>
<i class="xi-close"></i>
</div>
</div>
<!-- 2020.06.20. lsy topBanner }-->
<header id="header">
<div class="container">
<h1>
<a href="/">
<img src="./img/grafflogo.png" alt="graff">
</a>
</h1>
<nav>
<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>
</ul>
</nav>
<div id="searchForm">
<form action="javascript:searchAction()">
<input type="text" placeholder="검색어를 입력하세요.">
<button>
<i class="xi-search"></i>
</button>
</form>
<script>
function searchAction() {
var searchValue = $('#searchForm input').val();
if (searchValue.length < 5) {
alert('글자 수 부족');
}
else {
alert(searchValue)
}
$('#searchForm input').val('');
$('#searchForm input').focus();
}
</script>
</div>
</div>
</header>
<main id="main">
<section class="mainVisual">
<div class="mainSlider">
<figure class="itm01">
<div class="inner">
<h2>01. JEWELLERY COLLECTION</h2>
<p>모던하면서도 클래식한 디자인들을 완벽하게 표현한 그라프 하우스의 시그너쳐 컬렉션은 다양한 컷, 스톤 그리고 색상들을 멋진 조합으로 선사합니다.
</p>
<a href="">more</a>
</div>
</figure>
<figure class="itm02">
<div class="inner">
<h2>02. JEWELLERY COLLECTION</h2>
<p>모던하면서도 클래식한 디자인들을 완벽하게 표현한 그라프 하우스의 시그너쳐 컬렉션은 다양한 컷, 스톤 그리고 색상들을 멋진 조합으로 선사합니다.
</p>
<a href="">more</a>
</div>
</figure>
<figure class="itm03">
<div class="inner">
<h2>03. JEWELLERY COLLECTION</h2>
<p>모던하면서도 클래식한 디자인들을 완벽하게 표현한 그라프 하우스의 시그너쳐 컬렉션은 다양한 컷, 스톤 그리고 색상들을 멋진 조합으로 선사합니다.
</p>
<a href="">more</a>
</div>
</figure>
</div>
<div class="slideNum">
slideNum
</div>
<div class="mainArrow">
<i class="xi-arrow-left"></i>
<i class="xi-arrow-right"></i>
</div>
</section>
<section class="mainContent">
<h2>JEWELLERY COLLECTION EVENT</h2>
<p>모던하면서도 클래식한 디자인들을 완벽하게 표현한 그라프 하우스의 시그너쳐 컬렉션은 다양한 컷, 스톤 그리고 색상들을 멋진 조합으로 선사합니다.
</p>
<div class="container">
<figure>
<img src="./img/lesedilarona01.jpg" alt="">
<strong>JEWELLERY</strong>
<a href="">구매하기</a>
</figure>
<figure>
<img src="./img/lesedilarona02.jpg" alt="">
<strong>COLLECTION</strong>
<a href="">구매하기</a>
</figure>
<figure>
<img src="./img/lesedilarona03.jpg" alt="">
<strong>EVENT</strong>
<a href="">구매하기</a>
</figure>
</div>
</section>
<section class="mainContent2">
<h2>JEWELLERY COLLECTION EVENT</h2>
<p>모던하면서도 클래식한 디자인들을 완벽하게 표현한 그라프 하우스의 시그너쳐 컬렉션은 다양한 컷, 스톤 그리고 색상들을 멋진 조합으로 선사합니다.
</p>
<div class="container">
<figure>
<img src="./img/lesedilarona01.jpg" alt="">
<strong>JEWELLERY</strong>
<a href="">구매하기</a>
</figure>
<figure>
<img src="./img/lesedilarona02.jpg" alt="">
<strong>COLLECTION</strong>
<a href="">구매하기</a>
</figure>
<figure>
<img src="./img/lesedilarona03.jpg" alt="">
<strong>EVENT</strong>
<a href="">구매하기</a>
</figure>
<figure>
<img src="./img/lesedilarona04.jpg" alt="">
<strong>EVENT</strong>
<a href="">구매하기</a>
</figure>
</div>
</section>
<section class="mainContent3">
<h2>JEWELLERY COLLECTION EVENT</h2>
<p>모던하면서도 클래식한 디자인들을 완벽하게 표현한 그라프 하우스의 시그너쳐 컬렉션은 다양한 컷, 스톤 그리고 색상들을 멋진 조합으로 선사합니다.
</p>
<div class="container">
<figure>
<div class="box">
<img src="./img/lesedilarona01.jpg" alt="">
</div>
<strong>JEWELLERY</strong>
<a href="">구매하기</a>
</figure>
<figure>
<div class="box">
<img src="./img/lesedilarona02.jpg" alt="">
</div>
<strong>COLLECTION</strong>
<a href="">구매하기</a>
</figure>
<figure>
<div class="box">
<img src="./img/lesedilarona03.jpg" alt="">
</div>
<strong>EVENT</strong>
<a href="">구매하기</a>
</figure>
<figure>
<div class="box">
<img src="./img/lesedilarona04.jpg" alt="">
</div>
<strong>EVENT</strong>
<a href="">구매하기</a>
</figure>
</div>
</section>
<section class="fixedBg">
<h2>JEWELLERY COLLECTION EVENT</h2>
<p>모던하면서도 클래식한 디자인들을 완벽하게 표현한 그라프 하우스의 시그너쳐 컬렉션은 다양한 컷, 스톤 그리고 색상들을 멋진 조합으로 선사합니다.
</p>
<a href="">more<i class="xi-arrow-right"></i></a>
</section>
<section class="fixedBg2">
<h2>JEWELLERY COLLECTION EVENT</h2>
<p>모던하면서도 클래식한 디자인들을 완벽하게 표현한 그라프 하우스의 시그너쳐 컬렉션은 다양한 컷, 스톤 그리고 색상들을 멋진 조합으로 선사합니다.
</p>
<a href="">more<i class="xi-arrow-right"></i></a>
</section>
<section class="service">
<div class="container">
<div class="left">
<div class="case">
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/eKe_iw28fM8"
title="ASMR(보길도 뾰쪽산과 보옥리 공룡알해변)자연-쉼-자연의 소리-힐링스페셜. Bogildo Peak Mountain and Bookri Dinosaur Egg Beach"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
</div>
</div>
<div class="right">
<div class="case">
<!-- - * 카카오맵 - 지도퍼가기 -->
<!-- 1. 지도 노드 -->
<div id="daumRoughmapContainer1655857967182"
class="root_daum_roughmap root_daum_roughmap_landing"></div>
<!--
2. 설치 스크립트
* 지도 퍼가기 서비스를 2개 이상 넣을 경우, 설치 스크립트는 하나만 삽입합니다.
-->
<script charset="UTF-8" class="daum_roughmap_loader_script"
src="https://ssl.daumcdn.net/dmaps/map_js_init/roughmapLoader.js"></script>
<!-- 3. 실행 스크립트 -->
<script charset="UTF-8">
new daum.roughmap.Lander({
"timestamp": "1655857967182",
"key": "2ap48",
// "mapWidth": "640",
// "mapHeight": "360"
}).render();
</script>
</div>
</div>
</div>
</section>
<section class="ytb">
<h2>JEWELLERY COLLECTION EVENT</h2>
<p>모던하면서도 클래식한 디자인들을 완벽하게 표현한 그라프 하우스의 시그너쳐 컬렉션은 다양한 컷, 스톤 그리고 색상들을 멋진 조합으로 선사합니다.
</p>
<a href="" class="ZOOM">ZOOM<i class="xi-pacman zoom"></i></a>
<div id="ytb" class="player"></div>
</section>
<section class="scrollMe">
<div class="container scrollme">
<figure class="animateme" data-from="1" data-to="0" data-opacity="0" data-translatey="800">
<img src="./img/20211201_feel_the_glow.jpg" alt="">
</figure>
<figure class="animateme" data-from="1" data-to="0" data-opacity="0" data-translatey="200">
<img src="./img/20220105_final_Radian-C-Cream_main_Best-Seller_pc.jpg" alt="">
</figure>
<figure class="animateme" data-from="1" data-to="0" data-opacity="0" data-translatey="1200">
<img src="./img/20211201_feel_the_glow.jpg" alt="">
</figure>
</div>
</section>
<section class="product">
<h2>JEWELLERY COLLECTION EVENT</h2>
<p>모던하면서도 클래식한 디자인들을 완벽하게 표현한 그라프 하우스의 시그너쳐 컬렉션은 다양한 컷, 스톤 그리고 색상들을 멋진 조합으로 선사합니다.
</p>
<div class="inner">
<div class="productSlider">
<figure>
<div class="inbox">
<img src="./img/lesedilarona01.jpg" alt="">
</div>
<strong>JEWELLERY COLLECTION</strong>
<a href="">구매하기</a>
</figure>
<figure>
<div class="inbox">
<img src="./img/lesedilarona02.jpg" alt="">
</div>
<strong>JEWELLERY COLLECTION</strong>
<a href="">구매하기</a>
</figure>
<figure>
<div class="inbox">
<img src="./img/lesedilarona03.jpg" alt="">
</div>
<strong>JEWELLERY COLLECTION</strong>
<a href="">구매하기</a>
</figure>
<figure>
<div class="inbox">
<img src="./img/lesedilarona04.jpg" alt="">
</div>
<strong>JEWELLERY COLLECTION</strong>
<a href="">구매하기</a>
</figure>
<figure>
<div class="inbox">
<img src="./img/lesedilarona05.jpg" alt="">
</div>
<strong>JEWELLERY COLLECTION</strong>
<a href="">구매하기</a>
</figure>
<figure>
<div class="inbox">
<img src="./img/lesedilarona06.jpg" alt="">
</div>
<strong>JEWELLERY COLLECTION</strong>
<a href="">구매하기</a>
</figure>
</div>
<div class="productArrows">
<i class="xi-arrow-left"></i>
<i class="xi-arrow-right"></i>
</div>
</div>
</section>
<section class="serviceTab">
<div class="container">
<div class="left">
<ul class="tab_menu">
<li class="on"><a href="">MENU01</a></li>
<li><a href="">MENU02</a></li>
<li><a href="">MENU03</a></li>
</ul>
<div class="tab_content">
<div class="on">
<ul class="notice">
<li>
<a href="">
<strong>모던하면서도 클래식한 디자인들을 완벽하게 표현한 그라프 하우스의 시그너쳐 컬렉션은 다양한 컷, 스톤 그리고 색상들을 멋진
조합으로 선사합니다.</strong>
<span>2022.06.23.</span>
</a>
</li>
<li>
<a href="">
<strong>던하면서도 클래식한 디자인들을 완벽하게 표현한 그라프 하우스의 시그너쳐 컬렉션은 다양한 컷, 스톤 그리고 색상들을 멋진
조합으로 선사합니다.</strong>
<span>2022.06.23.</span>
</a>
</li>
<li>
<a href="">
<strong>하면서도 클래식한 디자인들을 완벽하게 표현한 그라프 하우스의 시그너쳐 컬렉션은 다양한 컷, 스톤 그리고 색상들을 멋진
조합으로 선사합니다.</strong>
<span>2022.06.23.</span>
</a>
</li>
<li>
<a href="">
<strong>면서도 클래식한 디자인들을 완벽하게 표현한 그라프 하우스의 시그너쳐 컬렉션은 다양한 컷, 스톤 그리고 색상들을 멋진
조합으로 선사합니다.</strong>
<span>2022.06.23.</span>
</a>
</li>
<li>
<a href="">
<strong>서도 클래식한 디자인들을 완벽하게 표현한 그라프 하우스의 시그너쳐 컬렉션은 다양한 컷, 스톤 그리고 색상들을 멋진
조합으로 선사합니다.</strong>
<span>2022.06.23.</span>
</a>
</li>
<li>
<a href="">
<strong>도 클래식한 디자인들을 완벽하게 표현한 그라프 하우스의 시그너쳐 컬렉션은 다양한 컷, 스톤 그리고 색상들을 멋진
조합으로 선사합니다.</strong>
<span>2022.06.23.</span>
</a>
</li>
</ul>
</div>
<div>
<ul class="notice">
<li>
<a href="">
<strong> 클래식한 디자인들을 완벽하게 표현한 그라프 하우스의 시그너쳐 컬렉션은 다양한 컷, 스톤 그리고 색상들을 멋진
조합으로 선사합니다.</strong>
<span>2022.06.23.</span>
</a>
</li>
<li>
<a href="">
<strong>래식한 디자인들을 완벽하게 표현한 그라프 하우스의 시그너쳐 컬렉션은 다양한 컷, 스톤 그리고 색상들을 멋진
조합으로 선사합니다.</strong>
<span>2022.06.23.</span>
</a>
</li>
<li>
<a href="">
<strong>식한 디자인들을 완벽하게 표현한 그라프 하우스의 시그너쳐 컬렉션은 다양한 컷, 스톤 그리고 색상들을 멋진
조합으로 선사합니다.</strong>
<span>2022.06.23.</span>
</a>
</li>
<li>
<a href="">
<strong>한 디자인들을 완벽하게 표현한 그라프 하우스의 시그너쳐 컬렉션은 다양한 컷, 스톤 그리고 색상들을 멋진
조합으로 선사합니다.</strong>
<span>2022.06.23.</span>
</a>
</li>
<li>
<a href="">
<strong> 
디자인들을 완벽하게 표현한 그라프 하우스의 시그너쳐 컬렉션은 다양한 컷, 스톤 그리고 색상들을 멋진
조합으로 선사합니다.</strong>
<span>2022.06.23.</span>
</a>
</li>
</ul>
</div>
<div>
<ul class="notice">
<li>
<a href="">
<strong>디자인들을 완벽하게 표현한 그라프 하우스의 시그너쳐 컬렉션은 다양한 컷, 스톤 그리고 색상들을 멋진
조합으로 선사합니다.</strong>
<span>2022.06.23.</span>
</a>
</li>
<li>
<a href="">
<strong>자인들을 완벽하게 표현한 그라프 하우스의 시그너쳐 컬렉션은 다양한 컷, 스톤 그리고 색상들을 멋진
조합으로 선사합니다.</strong>
<span>2022.06.23.</span>
</a>
</li>
<li>
<a href="">
<strong>인들을 완벽하게 표현한 그라프 하우스의 시그너쳐 컬렉션은 다양한 컷, 스톤 그리고 색상들을 멋진
조합으로 선사합니다.</strong>
<span>2022.06.23.</span>
</a>
</li>
<li>
<a href="">
<strong>들을 완벽하게 표현한 그라프 하우스의 시그너쳐 컬렉션은 다양한 컷, 스톤 그리고 색상들을 멋진
조합으로 선사합니다.</strong>
<span>2022.06.23.</span>
</a>
</li>
<li>
<a href="">
<strong>을 완벽하게 표현한 그라프 하우스의 시그너쳐 컬렉션은 다양한 컷, 스톤 그리고 색상들을 멋진
조합으로 선사합니다.</strong>
<span>2022.06.23.</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="right">
<ul class="right_content">
<li class="on">
<h2>01. JEWELLERY COLLECTION EVENT</h2>
<p>모던하면서도 클래식한 디자인들을 완벽하게 표현한 그라프 하우스의 시그너쳐 컬렉션은 다양한 컷, 스톤 그리고 색상들을 멋진 조합으로 선사합니다.
</p>
<a href="">more</a>
</li>
<li>
<h2>02. JEWELLERY COLLECTION EVENT</h2>
<p>던하면서도 클래식한 디자인들을 완벽하게 표현한 그라프 하우스의 시그너쳐 컬렉션은 다양한 컷, 스톤 그리고 색상들을 멋진 조합으로 선사합니다.
</p>
<a href="">more</a>
</li>
<li>
<h2>03. JEWELLERY COLLECTION EVENT</h2>
<p>하면서도 클래식한 디자인들을 완벽하게 표현한 그라프 하우스의 시그너쳐 컬렉션은 다양한 컷, 스톤 그리고 색상들을 멋진 조합으로 선사합니다.
</p>
<a href="">more</a>
</li>
<li>
<h2>04. JEWELLERY COLLECTION EVENT</h2>
<p>면서도 클래식한 디자인들을 완벽하게 표현한 그라프 하우스의 시그너쳐 컬렉션은 다양한 컷, 스톤 그리고 색상들을 멋진 조합으로 선사합니다.
</p>
<a href="">more</a>
</li>
<li>
<h2>05. JEWELLERY COLLECTION EVENT</h2>
<p>서도 클래식한 디자인들을 완벽하게 표현한 그라프 하우스의 시그너쳐 컬렉션은 다양한 컷, 스톤 그리고 색상들을 멋진 조합으로 선사합니다.
</p>
<a href="">more</a>
</li>
<li>
<h2>06. JEWELLERY COLLECTION EVENT</h2>
<p>도 클래식한 디자인들을 완벽하게 표현한 그라프 하우스의 시그너쳐 컬렉션은 다양한 컷, 스톤 그리고 색상들을 멋진 조합으로 선사합니다.
</p>
<a href="">more</a>
</li>
</ul>
</div>
</div>
</section>
</main>
<footer id="footer">
<div class="top">
<div class="container">
<dl>
<dd><a href="">이용약관</a></dd>
<dd><a href="">문의하기</a></dd>
<dd><a href="">개인정보 취급방침</a></dd>
<dt><a href="">방문 예약하기</a></dt>
<dd><a href="">사이즈 가이드</a></dd>
<dd><a href="">그라프 하우스 소개</a></dd>
</dl>
<div class="sns">
<a href="http://naver.com" target="_blank"><i class="xi-instagram"></i></a>
<a href="http://daum.net" target="_blank"><i class="xi-kakaotalk"></i></a>
<a href="http://google.com" target="_blank"><i class="xi-twitter"></i></a>
</div>
</div>
</div>
<div class="bottom">
<div class="container">
<address>
전화번호 : <a href="tel:016-123-4567">016-123-4567</a> <a
href="mailto:abcdef@never.com">abcdef@never.com</a> Graff
France
Headquarters
237 rue
Saint-Honore Paris 75001
</address>
<div class="family_link">
<select id="fl">
<option value="">family link</option>
<option value="http://naver.com">instagram</option>
<option value="http://daum.net">twitter</option>
<option value="http://google.com">kakaotalk</option>
</select>
</div>
</div>
</div>
</footer>
<div class="toTop">
<i class="xi-arrow-top"></i>
</div>
</div>
<script src="./js/jquery-1.12.4.min.js"></script>
<script src="./js/slick.min.js"></script>
<script src="./js/jquery.mb.YTPlayer.min.js"></script>
<script src="./js/jquery.scrollme.min.js"></script>
<script src="./js/main.js"></script>
</body>
</html>
<!-- <div class="inner"> display:flex가 안돼도 되는 것들은 inner로 싸줌 -->
<!-- a태그 아래위 마진패딩 안됨.높이 넓이 안됨
그럼, 어째 볼륨감을 주느냐 ==> display: inline-block;을 주고 마진을 주면 이전에 줘던 마진을 늘리기 때문에 그냥 바로 paddig줌-->
<!-- a href="#!" !는 부정
a가 가진 속성(누르면 맨 위로 올라가는)을 빼주는 방법임. 그닥 추천하는 방법은 아님
자바스크립트에서 function (e) {
e.preventDefault(); 이걸 더 추천//기억하고 있을 것 리액트에서 많이 사용--><html>
.Wrap {}
.container {
display: flex;
width: 1200px;
margin: 0 auto;
}
.inner {
width: 1200px;
margin: 0 auto;
}
/* 2020.06.20. lsy topBanner */
.topBanner {
position: sticky;
inset: 0 auto auto 0;
width: 100%;
padding: 30px 0;
background: #f1f1f1;
z-index: 999;
}
.topBanner .inner {
position: relative;
}
.topBanner h2 {
font-size: 30px;
font-weight: 700;
margin: 0 0 10px 0;
}
.topBanner p {
font-size: 15px;
font-weight: 300;
}
.topBanner a {
margin: 0 0 0 10px;
padding: 3px 15px 5px 15px;
/*아래 위로 패딩이 들어간 것처럼 보이는 것! 오해금지 */
background: #333;
color: #fff;
}
.topBanner i {
position: absolute;
inset: 0 0 auto auto;
font-size: 21px;
padding: 5px;
background: #ddd;
border-radius: 3px;
cursor: pointer;
}
#header {
line-height: 100px;
border-bottom: 1px solid #ddd;
}
#header .container {
justify-content: space-between;
}
#header nav>ul {
display: flex;
}
#header nav>ul>li>a {
padding: 0 15px;
font-size: 17px;
}
#header nav>ul>li~li::before {
content: "";
display: inline-block;
width: 1px;
height: 14px;
background: #ddd;
}
#header a {
display: inline-block;
}
#searchForm input[type="text"] {
outline: none;
border: none;
border-bottom: 1px solid #333;
padding: 5px 0;
color: skyblue;
}
#searchForm input[type="text"]::placeholder {
color: skyblue;
}
#searchForm input[type="text"]:focus::placeholder {
opacity: 0;
/* display:none은 안됨 */
}
#searchForm button {
background: transparent;
outline: none;
border: none;
font-size: 21px;
}
.mainVisual {
position: relative;
}
.mainVisual .mainSlider figure {
position: relative;
height: 600px;
}
.mainVisual .mainSlider .itm01 {
background: url(../img/mainvisual01.jpg) no-repeat center center/cover;
}
.mainVisual .mainSlider .itm02 {
background: url(../img/mainvisual02.jpg) no-repeat center center/cover;
}
.mainVisual .mainSlider .itm03 {
background: url(../img/mainvisual03.jpg) no-repeat center center/cover;
}
.mainVisual .mainSlider .inner {
position: absolute;
inset: 50% auto auto 50%;
transform: translate(-50%, -50%);
color: #fff;
text-shadow: 0 0 3px #000;
}
.mainVisual .mainSlider .itm02 .inner {
color: #333;
text-shadow: 0 0 3px #fff;
}
.mainVisual .mainSlider .inner h2 {
font-size: 40px;
font-weight: 700;
margin: 0 0 10px 0;
}
.mainVisual .mainSlider .inner p {
font-size: 15px;
font-weight: 300;
margin: 0 0 10px 0;
}
.mainVisual .mainSlider .inner a {
display: inline-block;
/* 자연스럽게 콘텐츠 사이즈에 맞게 쪼그라든다.
block을 주면 width를 줄 수 있으나, 글자가 늘어나면 width가 유지된 상태에서 글자가 들어가기 때문에 유연성이 없다. 그래서 inline-block을 주고 padding을 주면 됨*/
padding: 5px 20px;
background: #333;
}
.mainVisual .mainSlider figure h2 {
transform: translateY(100px);
opacity: 0;
}
.mainVisual .mainSlider figure.on h2 {
transform: translateY(0);
opacity: 1;
transition: 0.5s;
}
.mainVisual .mainSlider figure p {
transform: translateY(100px);
opacity: 0;
}
.mainVisual .mainSlider figure.on p {
transform: translateY(0);
opacity: 1;
transition: 0.5s 0.5s;
}
.mainVisual .mainSlider figure a {
transform: translateY(100px);
opacity: 0;
}
.mainVisual .mainSlider figure.on a {
transform: translateY(0);
opacity: 1;
transition: 0.5s 1s;
}
.mainVisual .mainSlider .slick-dots {
position: absolute;
inset: auto auto 100px 50%;
transform: translateX(-50%);
}
.mainVisual .mainSlider .slick-dots li {
display: inline-block;
}
.mainVisual .mainSlider .slick-dots button {
border-radius: 50%;
outline: none;
border: none;
width: 22px;
height: 22px;
margin: 0 2px;
}
.mainVisual .mainSlider .slick-dots li.slick-active button {
background: #f00;
color: #fff;
}
.slideNum {
position: absolute;
inset: 50px auto auto 50%;
/* 0을 주면 박스가 이상하게 늘어나기 때문에 auto를 준다 */
margin: 0 0 0 600px;
transform: translateX(-100%);
color: #fff;
text-shadow: 0 0 3px #000;
font-size: 41px;
}
.mainArrow i {
position: absolute;
inset: 50% auto auto 50%;
transform: translate(-50%, -50%);
color: rgba(255, 255, 255, 0.5);
font-size: 100px;
}
.mainArrow i.on {
color: rgba(0, 0, 0, 0.5);
}
.mainArrow i:nth-child(1) {
margin: 0 0 0 -700px;
/* 1200 박스 밖으로 나가야함 */
}
.mainArrow i:nth-child(2) {
margin: 0 0 0 700px;
/* 1200 박스 밖으로 나가야함 */
}
.mainContent {
padding: 100px;
/* 공간 주는 것 패딩!!! */
text-align: center;
/* 부모박스에 text-align줘서 상속받을 수 있게 */
}
.mainContent h2 {
margin: 0 0 10px 0;
font-size: 19px;
font-weight: 700px;
/* em은 폰트사이지의 n배
지금은 폰트사이즈 19px * -0.025
양수가 되면 간격이 벌어지고, 음수는 간격이 붙음.
letter-spacing에서만 주로 사용
rem: r이 루트(최상위) 기본(현재는16픽셀_내가 정할 수 있음)x곱하기 한 것
즉, 1rem=16
html이 기본으로 주는 폰트사이즈를 한 번에 바꿀 수 있어서 각광받고 있음
vh: 현재 실행중인 스크린 크기에 맞춰 상대적 크기를 반환. 뷰포트 높이의 1% 길이와 동일(모바일 꽉 차게 만들 때)
vw: 아주 중요. 뷰포트 사이즈를 계산해서 스크롤 바가 없을 때는 상관 없는데, 아래로내려오는 스크롤바가 있으면 스크롤바를 포함한 사이즐르 계산하기 때문에 아래쪽에 스크롤바가 생김. 100퍼센트와는 다름(부모 상속값). auto는 박스 자체가 신축을 가지는 값. 모바일 환경에서 아주 중요하게 쓰임. 대표적인 사이트가 넷플릭스. 뷰포트에 따라 폰트 사이즈가 변함*/
}
.mainContent p {
margin: 0 0 30px 0;
font-size: 15px;
font-weight: 300px;
letter-spacing: -0.025em;
}
.mainContent .container {
gap: 30px;
}
.mainContent .container figure {
flex: 1;
}
.mainContent .container img {
margin: 0 0 10px 0;
}
.mainContent .container strong {
display: block;
margin: 0 0 10px 0;
font-size: 15px;
}
.mainContent .container a {
display: inline-block;
padding: 5px 15px;
background: #333;
color: #fff;
/* display:block width: 100px;
margin: 0 auto; */
}
.mainContent2 {
padding: 100px 0;
text-align: center;
background: #f9f9f9;
}
.mainContent2 h2 {
margin: 0 0 10px 0;
font-size: 19px;
font-weight: 700px;
}
.mainContent2 p {
margin: 0 0 30px 0;
font-size: 15px;
font-weight: 300px;
letter-spacing: -0.025em;
}
.mainContent2 .container {
gap: 30px;
}
.mainContent2 .container figure {
flex: 1;
}
.mainContent2 .container img {
margin: 0 0 10px 0;
}
.mainContent2 .container strong {
display: block;
margin: 0 0 10px 0;
font-size: 15px;
}
.mainContent2 .container a {
display: inline-block;
padding: 5px 15px;
background: #333;
color: #fff;
/* display:block width: 100px;
margin: 0 auto; */
}
.mainContent3 {
padding: 100px 0;
text-align: center;
}
.mainContent3 h2 {
margin: 0 0 10px 0;
font-size: 19px;
font-weight: 700px;
}
.mainContent3 p {
margin: 0 0 30px 0;
font-size: 15px;
font-weight: 300px;
letter-spacing: -0.025em;
}
.mainContent3 .container {
gap: 30px;
}
.mainContent3 .container figure {
flex: 1;
}
/* .mainContent3 .container img {
/ margin: 0 0 10px 0;
} .mainContent3 .box에 overflow:hidden을 주고, 마진을 같이 줌*/
.mainContent3 .container strong {
display: block;
margin: 0 0 10px 0;
font-size: 15px;
}
.mainContent3 .container a {
display: inline-block;
padding: 5px 15px;
background: #333;
color: #fff;
font-size: 15px;
/* display:block width: 100px;
margin: 0 auto; */
}
/* 이미지가 스케일됐을 때, 옆에 있는 이미지를 침범하는 것을 막기 위해서 div로 감싸줌 */
.mainContent3 figure .box {
overflow: hidden;
margin: 0 0 10px 0;
transition: border-radius 0.5s 0.5s;
}
.mainContent3 figure:hover .box {
border-radius: 50%;
}
/* .mainContent3 figure img {
transition: transform 0.5s;
} */
.mainContent3 figure:hover img {
transform: scale(1.3);
}
.fixedBg {
padding: 100px 0;
text-align: center;
color: #fff;
background: url(../img/mainvisual01.jpg) no-repeat fixed center center/cover;
filter: grayscale(1);
}
.fixedBg h2 {
margin: 0 0 10px 0;
font-size: 19px;
font-weight: 700px;
}
.fixedBg p {
margin: 0 0 30px 0;
font-size: 15px;
font-weight: 300px;
}
.fixedBg i {
padding: 5px;
background: #f00;
vertical-align: -10%;
border-radius: 50%;
}
.fixedBg2 {
padding: 100px 0;
/* margin: 0 0 100vh 0; */
text-align: center;
color: #fff;
background: url(../img/mainvisual01.jpg) no-repeat fixed center center/cover;
}
.fixedBg2 h2 {
margin: 0 0 10px 0;
font-size: 19px;
font-weight: 700px;
}
.fixedBg2 p {
margin: 0 0 30px 0;
font-size: 15px;
font-weight: 300px;
}
.fixedBg2 i {
padding: 5px;
background: #f00;
vertical-align: -10%;
border-radius: 50%;
}
.service {
padding: 100px 0;
}
.service .container {
gap: 30px;
}
.service .container>div {
/* position: relative;
padding-bottom: 56.28%; */
flex: 1;
/* 사이즈가 스트레치됨 유튜브 동영상 자체의 높이를 받은 상태 근데 옆에 map도 absolute로 띄우고, inset을 0으로 다 주면 높이 자체가 없어지기 때문에 사라짐 */
/* flex를 주면 스트레치됨(=늘어남) 그래서 박스로 싸서 스트레치 되는 걸 막는다. */
}
.service .container .case {
position: relative;
padding-bottom: 56.25%;
}
.service .container iframe {
position: absolute;
inset: 0 0 0 0;
}
.service .container .root_daum_roughmap {
position: absolute;
inset: 0 0 0 0;
width: 100%;
}
.service .container .root_daum_roughmap .wrap_map {
height: 100%;
}
.ytb {
padding: 100px 0;
color: #fff;
text-align: center;
filter: grayscale(1);
}
.ytb h2 {
margin: 0 0 10px 0;
font-size: 19px;
font-weight: 700px;
}
.ytb p {
margin: 0 0 30px 0;
font-size: 15px;
font-weight: 300px;
}
.ytb i {
padding: 5px;
background: #333;
vertical-align: 0;
border-radius: 50%;
}
.scrollMe {
padding: 100px 0;
}
.scrollMe .container {
gap: 70px;
}
.scrollMe .container figure {
flex: 1;
}
.product {
position: relative;
padding: 100px 0;
text-align: center;
border-top: 1px solid #ddd;
}
.product h2 {
margin: 0 0 10px 0;
font-size: 19px;
font-weight: 700px;
}
.product h2::after {
content: "";
display: block;
width: 1px;
height: 50px;
background: #f00;
margin: 10px auto;
}
.product p {
margin: 0 0 30px 0;
font-size: 15px;
font-weight: 300px;
letter-spacing: -0.025em;
}
.product .productSlider figure {
padding: 40px 15px 0 15px;
/* flex가 된 상태가 아니라서 gap은 사용 못 함 */
font-size: 13px;
}
/* .product .productSlider .slick-list {
overflow: visible;
overflow-x: hidden;
} */
.product .productSlider figure.slick-center img {
transform: scale(1.25);
transition: transform 0.5s;
border: 2px solid rgba(0, 0, 0, 0.5);
}
.product .productSlider .inbox {
margin: 0 0 10px 0;
/* overflow: hidden; */
}
.product .productSlider strong {
position: relative;
top: -15px;
display: block;
margin: 0 0 10px 0;
}
.product .productSlider a {
display: inline-block;
padding: 5px 15px;
margin: 0 0 10px 0;
background: #333;
color: #fff;
}
.product .productSlider .slick-dots {
padding: 20px 0 0 0;
}
.product .productSlider .slick-dots li {
display: inline-block;
margin: 0 2px;
/* width: 10px;
height: 10px;
background: #333; */
/* 슬릭자체에서 block이 되어 있기 때문에 flex를 주면 안됨(자바스크립트 슬릭의 block을 우선으로 하기 때문에) 그래서 flex가 아닌 inline-block을 줌 */
}
.product .productSlider .slick-dots li button {
/* display: none; */
padding: 0;
font-size: 10px;
vertical-align: top;
border: none;
outline: none;
background: #f00;
color: #fff;
border-radius: 50%;
width: 20px;
height: 20px;
/* 텍스트는 가운데로 가려고 하는 속성이 있고, slick 버튼 자체에 높이가 있는데, 높이/너비를 주니까 글자가 늘어남. 그래서 폰트 사이즈를 줄여서 글자를 가운데로 가게 함 */
}
.product .productSlider .slick-dots li.slick-active button {
background: #333;
}
.product .productArrows i {
position: absolute;
inset: 50% auto auto 50%;
transform: translate(-50%, -50%);
font-size: 40px;
background: rgba(0, 0, 0, 0.5);
color: #fff;
border-radius: 5px;
}
.product .productArrows i:nth-child(1) {
margin: 0 0 0 -600px;
}
.product .productArrows i:nth-child(2) {
margin: 0 0 0 600px;
}
.serviceTab {
padding: 100px 0;
background: #f1f1f1;
}
.serviceTab .container {
gap: 30px;
}
.serviceTab .container>div {
flex: 1;
}
.serviceTab .tab_content>div {
display: none;
}
.serviceTab .tab_content>div.on {
display: block;
}
.serviceTab .tab_menu {
display: flex;
}
.serviceTab .tab_menu li {
flex: 1;
background: #ddd;
color: #333;
}
.serviceTab .tab_menu li.on {
background: peru;
color: #fff;
}
.serviceTab .tab_menu li~li {
border-left: 1px solid #fff;
}
.serviceTab .tab_menu li a {
display: block;
padding: 10px 15px;
}
.serviceTab .tab_content .notice li {
line-height: 25px;
border-bottom: 1px solid #ddd;
}
.serviceTab .tab_content .notice a {
display: flex;
justify-content: space-between;
}
.serviceTab .tab_content .notice strong {
width: 450px;
white-space: nowrap;
text-overflow: ellipsis;
/* white-space 공백처리 */
overflow: hidden;
}
.serviceTab .right_content h2 {
margin: 0 0 10px 0;
font-size: 19px;
font-weight: 700px;
}
.serviceTab .right_content p {
margin: 0 0 30px 0;
font-size: 15px;
font-weight: 300px;
letter-spacing: -0.025em;
line-height: 25px
}
.serviceTab .right_content a {
/* margin: 0 0 0 10px; */
padding: 3px 15px 5px 15px;
background: olive;
color: #fff;
}
.serviceTab .right_content li {
display: none;
}
.serviceTab .right_content li.on {
display: block;
}
.toTop {
display: none;
position: fixed;
inset: auto 50px 50px auto;
z-index: 999;
}
.toTop i {
padding: 10px;
background: rgba(0, 0, 0, 0.5);
color: #fff;
font-size: 15px;
border-radius: 5px;
cursor: pointer;
}
#footer {
background: #333;
color: #fff;
line-height: 80px;
font-size: 15px;
}
#footer .top dt,
#footer .top dd {
display: inline-block;
}
#footer .top {
border-bottom: 1px solid #666;
/* border는 배경색보다 한 톤정도 밝은 색으로 */
}
#footer .top dt::before,
#footer .top dd~dd::before {
content: "";
display: inline-block;
margin: 0 15px;
width: 1px;
height: 10px;
background: #ddd;
}
/* #footer .top dd:nth-child(1) {
padding: 0 15px 0 0;
padding-left: none;으로도 가능
} */
#footer .top i {
font-size: 25px;
}
#footer .container {
justify-content: space-between;
}
#footer .bottom address {
font-style: normal;
}
#footer .bottom select {
font-size: 12px;
text-transform: uppercase;
background: transparent;
color: #ddd;
padding: 5px 15px;
border: 1px solid #666;
}
#footer .bottom option {
color: #fff;
background: #333;
}<css>
$(function () {
//2020.06.20. lsy topBanner
$('.topBanner i ').on('click', function () {
$('.topBanner').slideUp();
})
$('.mainSlider').on('init afterChange', function (e, s, c) {
var current = $('.slick-current');
current.addClass('on').siblings().removeClass('on');
$('.mainArrow i').removeClass('on')
if (c === 1) {
$('.mainArrow i').addClass('on')
}
// if (c) {
// c = c + 1;
// } else {
// c = 1
// }
$('.slideNum').text((c ? (c + 1) : 1) + " / " + s.slideCount);
});
$('.mainSlider').slick({
arrows: false,
//autoplay: true,
dots: true,
pauseOnHover: false,
pauseOnFocus: false,
});
$('.mainArrow i:nth-child(1)').on('click', function () {
$('.mainSlider').slick('slickPrev')
});
$('.mainArrow i:nth-child(2)').on('click', function () {
$('.mainSlider').slick('slickNext')
});
$('#ytb').YTPlayer({
videoURL: 'https://youtu.be/SQgBNoP6EIo',
containment: '.ytb',
autoPlay: true,
mute: true,
startAt: 0,
opacity: 1,
showControls: false,
playOnlyIfVisible: true,
startAt: 5,
});
$('.ytb .zoom ').on('click', function (e) {
e.preventDefault();
$('#ytb').YTPFullscreen()
})
$('.productSlider').slick({
arrows: false,
dots: true,
slidesToShow: 5,
centerMode: true,
});
$('.product .productArrows i:nth-child(1)').on('click', function () {
$('.productSlider').slick('slickPrev')
});
$('.product .productArrows i:nth-child(2)').on('click', function () {
$('.productSlider').slick('slickNext')
});
$('.tab_menu li').on('click', function (event) {
event.preventDefault()
// console.log($(this), $(this).index(), event.target, event.currentTarget);
$('.tab_menu li').removeClass('on')
$(this).addClass('on');
var idx = $(this).index(); //0,1,2
$('.tab_content>div').removeClass('on');
$('.tab_content>div').eq(idx).addClass('on');
})
var ux = "야야야"
$('.tab_content .notice li').on('click', function (event) {
event.preventDefault();
var idx = $(this).index(); //0,1,2
$('.right_content>li').removeClass('on');
$('.right_content>li').eq(idx).addClass('on');
console.log(ux)
});
$('.toTop').on('click', function () {
$('html,body').animate({ scrollTop: 0 }, 200)
});
$(window).on('scroll', function () {
var up = $(window).scrollTop();
if (up > 700) {
$('.toTop').fadeIn(300)
} else {
$('.toTop').fadeOut(1000)
}
});
$('#fl').on('change', function () {
console.log($(this), $(this).val())
var lnk = $(this).val();
lnk && window.open(lnk);
})
})
// $('.tab_content>div').eq(idx).addClass('on').removeClass('on')
// $('html,body').animate({ scrollTop: 0 }, 200<-속도/기본은 400(0.4s))
// if (lnk) {
// window.open(lnk);
// 링크에 공백이 있으면 연결됨<-주의}<js>
topbanner부터 footer까지 전체웹사이트를 만들어보았다.
'수업내용' 카테고리의 다른 글
| [html, css, jquery] 반응형 기초(2) (0) | 2022.07.31 |
|---|---|
| [html, css, jquery] 반응형 (0) | 2022.07.31 |
| [HTML, CSS] 움직이는 라네즈들과 물방울 + iframe, 카카오맵 넣기 (0) | 2022.07.31 |
| [HTML, CSS, jQuery] 탭메뉴 만들어보기 (0) | 2022.07.31 |
| [HTML, CSS] movie 01 & fullpage 01 (0) | 2022.07.31 |