728x90
- 오늘은 웹디자인 시험을 준비 했습니다.
- 웹디자인시험에서 중요한 것은 스크립트 부분이라고 생각합니다.
- 꼬였을 때 고치기가 막막하다는 부분에서 말이죠
- 그 부분들을 집중적으로 보겠습니다.
- 여기는 두가지 기능이 들어갔습니다.
- 탭메뉴 부분과 슬라이드 부분이죠
- 코드를 보시죠
<div id="slider">
<div class="container">
<div class="sliderWrap">
<div class="slider s1">
<img src="images/slider01.jpg" alt="미래를 이끄는 열정">
<div class="text">
<h2>미래를 이끄는 <strong>열정</strong></h2>
<p>산업대학교</p>
</div>
</div>
<div class="slider s2">
<img src="images/slider02.jpg" alt="미래를 이끄는 열정">
<div class="text">
<h2>당신이 원하는 <strong>교육</strong></h2>
<p>산업대학교</p>
</div>
</div>
<div class="slider s3">
<img src="images/slider03.jpg" alt="미래를 이끄는 열정">
<div class="text">
<h2>미래를 향한 우리의 <strong>도전</strong></h2>
<p>산업대학교</p>
</div>
</div>
</div>
</div>
</div> // 슬라이더
let currentIndex = 0;
const $sliderWrap = $(".sliderWrap"); //이미지 부모 : 움직이는 영역
const $slider = $(".slider"); //각각의 이미지
const $sliderWidth = $slider.width(); //이미지 가로값
$sliderWrap.append($slider.first().clone(true)); //첫 번재 이미지를 복사 마지막에 추가
setInterval(function(){
currentIndex++; //현재 이미지를 1씩 증가
$sliderWrap.animate({marginLeft: -$sliderWidth * currentIndex}, 600);
if(currentIndex === $slider.length){
setTimeout(function(){
$sliderWrap.animate({ marginLeft: 0},0);
currentIndex = 0;
}, 700);
}
}, 3000)/* slider */
#slider {
width: 100%;
height: 300px;
}
#slider .container {
overflow: hidden;
}
#slider .sliderWrap {
display: flex;
width: 400%;
}
#slider .sliderWrap .slider {
position: relative;
width: 1200px;
}
#slider .sliderWrap .slider .text {
position: absolute;
left: 15%;
top: 50%;
transform: translate(-50%, -50%);
background-color: #00000050;
padding: 20px 40px;
}
#slider .sliderWrap .slider .text h2 {
color: #fff;
font-size: 24px;
margin-bottom: 4px;
}
#slider .sliderWrap .slider .text h2 strong {
color: orange;
}
#slider .sliderWrap .slider .text p {
color: #fff;
font-size: 16px;
}- 슬라이더 부분입니다.
- 슬라이드는 구조를 잘 짜는 것이 중요합니다. 화면에 보이는 부분 즉 옆에 사진들을 가려주는 박스가 가장 밖에 있고
- 움직일 부분들 즉 사진들을 정렬시켜 놓을 박스가 하나 필요합니다.
- 그리고 각각의 장면을 구성하는 슬라이드 부분이 있는 것이죠
- 저는 각각 .container, .sliderWrap, .slider라고 이름을 지어주었습니다.
- sliderWrap부분이 옆으로 넘어가면서 container에 slider를 보여주는 형식인 것이죠
<nav class="nav">
<ul>
<li><a href="#">대학소개</a>
<ul class="submenu">
<li><a href="#">총장인사말</a></li>
<li><a href="#">학교소개</a></li>
<li><a href="#">홍보관</a></li>
<li><a href="#">캠퍼스안내</a></li>
</ul>
</li>
<li><a href="#">입학안내</a>
<ul class="submenu">
<li><a href="#">수시모집</a></li>
<li><a href="#">정시모집</a></li>
<li><a href="#">편입학</a></li>
<li><a href="#">재외국민</a></li>
</ul>
</li>
<li><a href="#">정보서비스</a>
<ul class="submenu">
<li><a href="#">대학정보알림</a></li>
<li><a href="#">정보공개</a></li>
<li><a href="#">정보서비스안내</a></li>
</ul>
</li>
<li><a href="#">커뮤니티</a>
<ul class="submenu">
<li><a href="#">공지사항</a></li>
<li><a href="#">참여개시판</a></li>
<li><a href="#">자료실</a></li>
</ul>
</li>
</ul>
</nav> $(".nav > ul > li").mouseover(function(){
$(".nav > ul > li > ul").stop().fadeIn(400);
$("#header .container").addClass("on");
})
$(".nav > ul > li").mouseout(function(){
$(".nav > ul > li > ul").stop().fadeOut(100);
$("#header .container").removeClass("on");
})#header .container::after {
content: '';
width: 100%;
height: 0px;
background-color: rgba(0,0,0,0.8);
position: absolute;
left: 0;
top: 100px;
z-index: -1;
}
#header .container.on::after {
height: 160px;
}
#header .container .logo {
width: 20%;
padding: 30px 0;
}
#header .container .nav {
width: 80%;
text-align: right;
}
#header .container .nav > ul {
display: flex;
justify-content: right;
}
#header .container .nav > ul > li {
position: relative;
}
#header .container .nav > ul > li > a {
display: block;
padding: 15px 40px;
background-color: #FFE194;
}
#header .container .nav > ul > li > a:hover {
background-color: #FFD66F;
}
#header .container .nav > ul > li > ul {
display: none;
position: absolute;
left: 0;
top: 50px;
text-align: center;
width: 100%;
}
#header .container .nav > ul > li > ul > li > a {
padding: 10px;
box-sizing: border-box;
display: inline-block;
width: 100%;
text-align: center;
color: #fff;
}
#header .container .nav > ul > li > ul > li > a:hover {
background-color: #D9B352;
}- 탭메뉴 부분입니다.
- 리스트 안에 리스트가 또 들어가 있는 부분인 것이죠
- 마우스가 들어가면 탭메뉴가 보임과 동시에 헤드에 있는 컨테이너에 on이라는 클라스가 붙습니다.
- 그 온이라는 클라스가 붙으면 색이 내려오는 효과를 주어 마치 전체가 내려오는 듯한 느낌을 주었습니다.
- 스크립트는 Jquery로 짰습니다.
- 익숙하지는 않지만 확실히 javascript보다는 편한 느낌입니다.
- 요즘엔 리액트를 배우고 있고 NextJs도 배울 예정입니다.
- 소소한 희망사항은 끝까지 다 배울 수 있으면 좋겠네요
- 끝!