QUOTE THE DAY
“ 당신이 6개월 이상 한 번도 보지 않은 코드는 다른 사람이 다시 만드는 게 훨씬 더 나을 수 있다. ”
-
이글슨 (Eagleson)
반응형
웹디자인 기능사 실기 슬라이드 유형
웹디자인 기능사 슬라이드 좌
코드
<!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>웹디자인 기능사 실기 슬라이드 좌</title>
<link href="https://webfontworld.github.io/gmarket/GmarketSans.css" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
font-family: 'GmarketSans';
}
#wrap {
width: 1200px;
margin: 0 auto;
}
#header {
width: 100%;
height: 100px;
display: flex;
}
.header {
width: 20%;
background-color: #eae4e9;
}
.nav {
width: 80%;
background-color: #fff1e6;
}
#section {
width: 100%;
height: 300px;
background-color: #fde2e4;
}
.slider__wrap {
display: flex;
flex-wrap: wrap;
width: 100%;
overflow: hidden;
}
.slider__inner {
position: relative;
width: 1200px;
height: 300px;
}
.slider__img {
display: flex;
flex-wrap: wrap;
width: 4800px;
height: 300px;
}
.slider img {
width: 1200px;
height: 300px;
}
#article {
width: 100%;
height: 300px;
display: flex;
}
.a1 {
width: 33.333%;
background-color: #f9d4d6;
}
.a2 {
width: 33.333%;
background-color: #e2ece9;
}
.a3 {
width: 33.333%;
background-color: #bee1e6;
}
#footer {
width: 100%;
height: 100px;
display: flex;
}
.f1 {
width: 20%;
background-color: #f0efeb;
}
.f2 {
width: 60%;
background-color: #dfe7fd;
}
.f3 {
width: 20%;
background-color: #cddafd;
}
</style>
</head>
<body>
<div id="wrap">
<header id="header">
<header class="header">로고</header>
<nav class="nav">메뉴</nav>
</header>
<section id="section">
<div class="slider__wrap">
<div class="slider__inner">
<div class="slider__img">
<div class="slider"><img src="../img/banner01.jpg" alt="런칭기념 이벤트"></div>
<div class="slider"><img src="../img/banner01.jpg" alt="런칭기념 이벤트"></div>
<div class="slider"><img src="../img/banner01.jpg" alt="런칭기념 이벤트"></div>
<div class="slider"><img src="../img/banner01.jpg" alt="런칭기념 이벤트"></div>
</div>
</div>
</div>
</section>
<article id="article">
<article class="a1">공지사항</article>
<article class="a2">배너</article>
<article class="a3">바로가기</article>
</article>
<footer id="footer">
<footer class="f1">로고</footer>
<footer class="f2">COPYRIGHT</footer>
<footer class="f3">SNS</footer>
</footer>
</div>
<script>
//선택자
const sliderWrap = document.querySelector(".slider__wrap");
const sliderImg = sliderWrap.querySelector(".slider__img"); //보여지는 영역
const sliderInner = sliderWrap.querySelector(".slider__inner"); //움직이는 영역
const slider = sliderWrap.querySelectorAll(".slider"); //개별 이미지
let currentIndex = 0; //현재 보이는 이미지
let sliderCount = slider.length; //이미지 갯수
let sliderInterval = 2000; //이미지 변경 간격 시간
// 트랜지션 설정 좌
sliderInner.style.transition = "all 0.6s";
setInterval(() => {
currentIndex = (currentIndex + 1) % sliderCount;
sliderInner.style.transform = "translateX("+ -1200 * currentIndex + "px)";
}, sliderInterval);
</script>
</body>
</html>
웹디자인 기능사 슬라이드 아래에서 위로
코드
<!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>웹디자인 기능사 실기 슬라이드 아래에서 위로</title>
<link href="https://webfontworld.github.io/gmarket/GmarketSans.css" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
font-family: 'GmarketSans';
}
#wrap {
width: 1200px;
margin: 0 auto;
}
#header {
width: 100%;
height: 100px;
display: flex;
}
.header {
width: 20%;
background-color: #eae4e9;
}
.nav {
width: 80%;
background-color: #fff1e6;
}
#section {
width: 100%;
height: 300px;
background-color: #fde2e4;
}
.slider__wrap {
width: 100%;
overflow: hidden;
}
.slider__img {
/* display: flex;
flex-wrap: wrap; */
width: 100%;
height: 300px;
}
.slider img {
width: 1200px;
height: 300px;
display: flex;
}
#article {
width: 100%;
height: 300px;
display: flex;
}
.a1 {
width: 33.333%;
background-color: #f9d4d6;
}
.a2 {
width: 33.333%;
background-color: #e2ece9;
}
.a3 {
width: 33.333%;
background-color: #bee1e6;
}
#footer {
width: 100%;
height: 100px;
display: flex;
}
.f1 {
width: 20%;
background-color: #f0efeb;
}
.f2 {
width: 60%;
background-color: #dfe7fd;
}
.f3 {
width: 20%;
background-color: #cddafd;
}
</style>
</head>
<body>
<div id="wrap">
<header id="header">
<header class="header">로고</header>
<nav class="nav">메뉴</nav>
</header>
<section id="section">
<div class="slider__wrap">
<div class="slider__inner">
<div class="slider__img">
<div class="slider"><img src="../img/banner01.jpg" alt="런칭기념 이벤트"></div>
<div class="slider"><img src="../img/banner01.jpg" alt="런칭기념 이벤트"></div>
<div class="slider"><img src="../img/banner01.jpg" alt="런칭기념 이벤트"></div>
<div class="slider"><img src="../img/banner01.jpg" alt="런칭기념 이벤트"></div>
</div>
</div>
</div>
</section>
<article id="article">
<article class="a1">공지사항</article>
<article class="a2">배너</article>
<article class="a3">바로가기</article>
</article>
<footer id="footer">
<footer class="f1">로고</footer>
<footer class="f2">COPYRIGHT</footer>
<footer class="f3">SNS</footer>
</footer>
</div>
<script>
//선택자
const sliderWrap = document.querySelector(".slider__wrap");
const sliderImg = sliderWrap.querySelector(".slider__img"); //보여지는 영역
const sliderInner = sliderWrap.querySelector(".slider__inner"); //움직이는 영역
const slider = sliderWrap.querySelectorAll(".slider"); //개별 이미지
let currentIndex = 0; //현재 보이는 이미지
let sliderCount = slider.length; //이미지 갯수
let sliderInterval = 2000; //이미지 변경 간격 시간
// 트랜지션 설정 상
sliderInner.style.transition = "all 0.6s";
setInterval(() => {
currentIndex = (currentIndex + 1) % sliderCount;
sliderInner.style.transform = "translateY("+ -300 * currentIndex + "px)";
}, sliderInterval);
</script>
</body>
</html>
웹디자인 기능사 슬라이드 위에서 아래로
코드
<!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>웹디자인 기능사 실기 슬라이드 위에서 아래로</title>
<link href="https://webfontworld.github.io/gmarket/GmarketSans.css" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
font-family: 'GmarketSans';
}
#wrap {
width: 1200px;
margin: 0 auto;
}
#header {
width: 100%;
height: 100px;
display: flex;
}
.header {
width: 20%;
background-color: #eae4e9;
}
.nav {
width: 80%;
background-color: #fff1e6;
}
#section {
width: 100%;
height: 300px;
background-color: #fde2e4;
}
.slider__wrap {
width: 100%;
overflow: hidden;
}
.slider__img {
/* display: flex;
flex-wrap: wrap; */
width: 100%;
height: 300px;
}
.slider img {
width: 1200px;
height: 300px;
display: flex;
transform: translateY(-300%);
}
#article {
width: 100%;
height: 300px;
display: flex;
}
.a1 {
width: 33.333%;
background-color: #f9d4d6;
}
.a2 {
width: 33.333%;
background-color: #e2ece9;
}
.a3 {
width: 33.333%;
background-color: #bee1e6;
}
#footer {
width: 100%;
height: 100px;
display: flex;
}
.f1 {
width: 20%;
background-color: #f0efeb;
}
.f2 {
width: 60%;
background-color: #dfe7fd;
}
.f3 {
width: 20%;
background-color: #cddafd;
}
</style>
</head>
<body>
<div id="wrap">
<header id="header">
<header class="header">로고</header>
<nav class="nav">메뉴</nav>
</header>
<section id="section">
<div class="slider__wrap">
<div class="slider__inner">
<div class="slider__img">
<div class="slider"><img src="../img/banner01.jpg" alt="런칭기념 이벤트"></div>
<div class="slider"><img src="../img/banner01.jpg" alt="런칭기념 이벤트"></div>
<div class="slider"><img src="../img/banner01.jpg" alt="런칭기념 이벤트"></div>
<div class="slider"><img src="../img/banner01.jpg" alt="런칭기념 이벤트"></div>
</div>
</div>
</div>
</section>
<article id="article">
<article class="a1">공지사항</article>
<article class="a2">배너</article>
<article class="a3">바로가기</article>
</article>
<footer id="footer">
<footer class="f1">로고</footer>
<footer class="f2">COPYRIGHT</footer>
<footer class="f3">SNS</footer>
</footer>
</div>
<script>
//선택자
const sliderWrap = document.querySelector(".slider__wrap");
const sliderImg = sliderWrap.querySelector(".slider__img"); //보여지는 영역
const sliderInner = sliderWrap.querySelector(".slider__inner"); //움직이는 영역
const slider = sliderWrap.querySelectorAll(".slider"); //개별 이미지
let currentIndex = 0; //현재 보이는 이미지
let sliderCount = slider.length; //이미지 갯수
let sliderInterval = 2000; //이미지 변경 간격 시간
// 트랜지션 설정 상
sliderInner.style.transition = "all 0.6s";
setInterval(() => {
currentIndex = (currentIndex + 1) % sliderCount;
sliderInner.style.transform = "translateY("+ 300 * currentIndex + "px)";
}, sliderInterval);
</script>
</body>
</html>반응형
