고통이 남기고 간 뒤를 보라! 고난이 지나면 반드시 기쁨이 스며든다.
- 괴테
반응형
웹디자인 기능사 실기 메뉴, 슬라이드 유형!
웹디자인 기능사 실기 A~E 유형의 메뉴와 슬라이드를 만들어봤습니다.
단일메뉴, 전체메뉴
<!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>메뉴 버튼 기능 1번</title>
<style>
* {
margin: 0;
padding: 0;
}
#wrap {
width: 1200px;
margin: 0 auto;
}
#header {
height: 100px;
display: flex;
}
#header h1{
width: 20%;
height: inherit;
background-color: #555;
}
#header nav {
width: 80%;
height: inherit;
background-color: #FF7D7D;
}
#nav {
width: 100%;
height: 300px;
background-color: #b18f8f;
}
#main {
width: 100%;
height: 200px;
display: flex;
}
.m1 {
width: 33.333%;
background-color: #FF6161;
}
.m2 {
width: 33.333%;
background-color: #910000;
}
.m3 {
width: 33.333%;
background-color: #EEFF52;
}
#footer {
width: 100%;
height: 100px;
display: flex;
}
#footer .f1 {
width: 20%;
background-color: #ee90da;
}
#footer .f2 {
width: 80%;
background-color: #fc70fc;
}
#footer .f3 {
width: 20%;
background-color: #ff00d4;
}
a {
text-decoration: none;
color: #000000;
}
li {
list-style: none;
}
.nav {
}
.nav > ul {
display: flex;
justify-content: right;
padding: 30px 40px;
}
.nav > ul > li {
position: relative;
}
.nav > ul > li > a {
background-color: #cacaca;
padding: 10px 40px;
}
.nav > ul > li > a:hover {
background-color: #9c9c9c;
}
.nav > ul > li > ul {
/* display: none; */
position: absolute;
width: 100%;
text-align: center;
left: 0;
top: 30px ;
background-color: #ddd;
display: none;
}
.nav > ul > li > ul > li {}
.nav > ul > li > ul > li > a {
padding: 10px;
display: block;
}
.nav > ul > li > ul > li > a:hover {
background-color: #b3b3b3;
}
</style>
</head>
<body>
<div id="wrap">
<header id="header">
<h1></h1>
<nav class="nav">
<ul>
<li>
<a href="#">메뉴1</a>
<ul class="submenu">
<li><a href="#">서브메뉴1-1</a></li>
<li><a href="#">서브메뉴1-2</a></li>
<li><a href="#">서브메뉴1-3</a></li>
<li><a href="#">서브메뉴1-4</a></li>
</ul>
</li>
<li>
<a href="#">메뉴2</a>
<ul class="submenu">
<li><a href="#">서브메뉴2-1</a></li>
<li><a href="#">서브메뉴2-2</a></li>
<li><a href="#">서브메뉴2-3</a></li>
<li><a href="#">서브메뉴2-4</a></li>
</ul>
</li>
<li>
<a href="#">메뉴3</a>
<ul class="submenu">
<li><a href="#">서브메뉴3-1</a></li>
<li><a href="#">서브메뉴3-2</a></li>
<li><a href="#">서브메뉴3-3</a></li>
<li><a href="#">서브메뉴3-4</a></li>
</ul>
</li>
<li>
<a href="#">메뉴4</a>
<ul class="submenu">
<li><a href="#">서브메뉴4-1</a></li>
<li><a href="#">서브메뉴4-2</a></li>
<li><a href="#">서브메뉴4-3</a></li>
<li><a href="#">서브메뉴4-4</a></li>
</ul>
</li>
</ul>
</nav>
</header>
<nav id="nav"></nav>
<main id="main">
<div class="m1"></div>
<div class="m2"></div>
<div class="m3"></div>
</main>
<footer id="footer">
<div class="f1"></div>
<div class="f2"></div>
<div class="f3"></div>
</footer>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
//Jquery 메뉴 컨트롤
// $(".nav > ul > li").mouseover(function(){
// $(".nav > ul > li").find(".submenu").stop().slideDown(); //메뉴 전체가 나오게
// // $(this).find(".submenu").stop().slideDown(); //메뉴 하나만 나오게.
// });
// $(".nav > ul > li").mouseout(function(){
// $(".nav > ul > li").find(".submenu").stop().slideUp();
// });
//스크립트 메뉴 단일 컨트롤
// document.querySelectorAll(".nav > ul > li").forEach(li => {
// li.addEventListener("mouseover", e => {
// li.querySelector("ul").style.display = "block";
// });
// li.addEventListener("mouseout", e => {
// li.querySelector("ul").style.display = "none";
// });
// });
//스크립트 메뉴 전체 컨트롤
document.querySelectorAll(".nav > ul > li").forEach(li => {
li.addEventListener("mouseover", e => {
document.querySelectorAll(".nav > ul > li > ul").forEach(ul => {
ul.style.display = "block";
});
});
li.addEventListener("mouseout", e => {
document.querySelectorAll(".nav > ul > li > ul").forEach(ul => {
ul.style.display = "none";
});
});
});
</script>
</body>
</html>//스크립트 메뉴 단일 컨트롤
document.querySelectorAll(".nav > ul > li").forEach(li => {
li.addEventListener("mouseover", e => {
li.querySelector("ul").style.display = "block";
});
li.addEventListener("mouseout", e => {
li.querySelector("ul").style.display = "none";
});
});
첫 번째 줄은 .nav > ul > li 선택자에 해당하는 모든 요소에 대해 forEach 함수를 호출합니다.
이 함수는 선택한 모든 요소에 대해 콜백 함수를 실행합니다.
mouseover 이벤트가 발생하면, document.querySelectorAll(".nav > ul > li > ul") 선택자에 해당하는 모든 요소에 대해 forEach 함수를 호출합니다. 이 함수는 선택한 모든 요소에 대해 display 속성 값을 "block"으로 변경하여 드롭다운 메뉴를 표시합니다.
mouseout 이벤트가 발생하면, document.querySelectorAll(".nav > ul > li > ul") 선택자에 해당하는 모든 요소에 대해 forEach 함수를 호출합니다. 이 함수는 선택한 모든 요소에 대해 display 속성 값을 "none"으로 변경하여 드롭다운 메뉴를 숨깁니다.
일자 서브메뉴, 오른쪽 서브메뉴
<!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>메뉴 버튼 기능 3번</title>
<style>
*{
padding: 0;
margin: 0;
}
#wrap {
display: flex;
}
#aside h1 {
width: 200px;
height: 100px;
background-color: #fd2020;
}
#aside nav {
width: 200px;
height: 550px;
background-color: #930808;
}
#main {
width: 800px;
height: 650px;
}
#slider {
width: 100%;
height: 350px;
background-color: #ffae00;
}
#banner {
display: flex;
width: 100%;
height: 200px;
/* background-color: #fff; */
}
.banner1 {
width: 33.3333%;
height: 200px;
background-color: #96ff7b;
}
.banner2 {
width: 33.3333%;
height: 200px;
background-color: #28fc4f;
}
.banner3 {
width: 33.3333%;
height: 200px;
background-color: #00ff91;
}
#footer {
width: 100%;
height: 100px;
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
.footer1 {
width: 20%;
height: 100px;
background-color: #b905f0;
}
.footer2 {
width: 80%;
height: 50px;
background-color: #ff0055;
}
.footer3 {
width: 80%;
height: 50px;
background-color: #970636;
}
a {
text-decoration: none;
color: #000000;
}
li {
list-style: none;
}
.nav {
padding-top: 30px;
box-sizing: border-box;
}
.nav > ul {
text-align: center;
}
.nav > ul > li {
margin-top: -1px;
display: inline-block;
justify-content: center;
align-items: center;
}
.nav > ul > li > a {
display: block;
width: 120px;
height: 30px;
border: 1px solid #000;
background-color: #cacaca;
}
.nav > ul > li > a:hover {
background-color: #9c9c9c;
}
.nav > ul > li > ul {
width: 100%;
text-align: center;
background-color: #ddd;
display: none;
}
.nav > ul > li > ul > li {}
.nav > ul > li > ul > li > a {
padding: 10px;
display: block;
}
.nav > ul > li > ul > li > a:hover {
background-color: #b3b3b3;
}
</style>
</head>
<body>
<div id="wrap">
<div id="aside">
<h1>로고</h1>
<nav class="nav">
<ul>
<li>
<a href="#">메뉴1</a>
<ul class="submenu">
<li><a href="#">서브메뉴1-1</a></li>
<li><a href="#">서브메뉴1-2</a></li>
<li><a href="#">서브메뉴1-3</a></li>
<li><a href="#">서브메뉴1-4</a></li>
</ul>
</li>
<li>
<a href="#">메뉴2</a>
<ul class="submenu">
<li><a href="#">서브메뉴2-1</a></li>
<li><a href="#">서브메뉴2-2</a></li>
<li><a href="#">서브메뉴2-3</a></li>
<li><a href="#">서브메뉴2-4</a></li>
</ul>
</li>
<li>
<a href="#">메뉴3</a>
<ul class="submenu">
<li><a href="#">서브메뉴3-1</a></li>
<li><a href="#">서브메뉴3-2</a></li>
<li><a href="#">서브메뉴3-3</a></li>
<li><a href="#">서브메뉴3-4</a></li>
</ul>
</li>
<li>
<a href="#">메뉴4</a>
<ul class="submenu">
<li><a href="#">서브메뉴4-1</a></li>
<li><a href="#">서브메뉴4-2</a></li>
<li><a href="#">서브메뉴4-3</a></li>
<li><a href="#">서브메뉴4-4</a></li>
</ul>
</li>
</ul>
</nav>
</div>
<div id="main">
<div id="slider">이미지 슬라이드</div>
<div id="banner">
<div class="banner1">공지사항/갤러리</div>
<div class="banner2">배너</div>
<div class="banner3">바로가기</div>
</div>
<div id="footer">
<div class="footer1">로고</div>
<div class="footer2">하단메뉴</div>
<div class="footer3">COPYRIGHT</div>
</div>
</div>
</div>
<script>
//스크립트 메뉴 단일 컨트롤
document.querySelectorAll(".nav > ul > li").forEach(li => {
li.addEventListener("mouseover", e => {
li.querySelector("ul").style.display = "block";
});
li.addEventListener("mouseout", e => {
li.querySelector("ul").style.display = "none";
});
});
</script>
</body>
</html>
document.querySelectorAll(".nav > ul > li")을 사용하여 HTML 문서 내에서 클래스가 "nav"인 요소의 자식 중에서 ul 태그를 가지고 있고, 그 자식 요소 중에서 li 태그인 모든 요소를 찾아옵니다. 그리고 이 요소들 각각에 대해서 forEach를 사용하여 반복문을 실행합니다.
forEach 반복문 안에서는 각 li 요소에 대해 이벤트 리스너를 등록합니다.
마우스가 해당 li 요소 위에 올라가면(mouseover 이벤트) li 요소의 자식 요소 중에서 ul 태그를 찾아서 해당 ul 태그의 style.display 속성을 "block"으로 변경합니다. 이렇게 함으로써 해당 li 요소의 하위 메뉴가 보이게 됩니다.
마우스가 해당 li 요소에서 벗어나면(mouseout 이벤트) 이전과 같이 해당 ul 태그의 style.display 속성을 "none"으로 변경하여 하위 메뉴를 숨깁니다.
슬라이드 반짝, 상하, 좌우
<!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>슬라이더 기능 1번 (같은 자리에서 바뀌기)</title>
<style>
*{
padding: 0;
margin: 0 auto;
}
.header {
display: flex;
width: 1200px;
height: 100px;
}
.header__1 {
width: 20%;
background-color: #ad0000;
}
.header__2 {
width: 80%;
background-color: #ff2d2d;
}
.slider__wrap {
width: 1200px;
height: 300px;
overflow: hidden;
}
.slider__inner {
position: relative;
}
.slider {
transition: all 0.3s;
position: absolute;
left: 0;
top: 0;
}
.banner {
width: 1200px;
height: 200px;
background-color: #d16666;
display: flex;
}
.banner__1 {
width: 33.3333%;
background-color: #d0ff00;
}
.banner__2 {
width: 33.3333%;
background-color: #04ff19;
}
.banner__3 {
width: 33.3333%;
background-color: #00f195;
}
.footer {
width: 1200px;
height: 100px;
display: flex;
}
.footer1 {
width: 20%;
background-color: #2f00ff;
}
.footer2 {
width: 60%;
background-color: #ea00ff;
}
.footer3 {
width: 20%;
background-color: #ff096f;
}
.slider:nth-child(1) {z-index: 5;}
.slider:nth-child(2) {z-index: 4;}
.slider:nth-child(3) {z-index: 3;}
.slider:nth-child(4) {z-index: 2;}
.slider:nth-child(5) {z-index: 1;}
</style>
</head>
<body>
<div id="wrap">
<div class="header">
<div class="header__1">로고</div>
<div class="header__2"></div>
</div>
<div class="slider__wrap">
<div class="slider__inner">
<div class="slider"><img src="../img/slider_img01.jpg" alt="이미지1"></div>
<div class="slider"><img src="../img/slider_img02.jpg" alt="이미지2"></div>
<div class="slider"><img src="../img/slider_img03.jpg" alt="이미지3"></div>
<div class="slider"><img src="../img/slider_img04.jpg" alt="이미지4"></div>
</div>
</div>
<div class="banner">
<div class="banner__1">공지사항/갤러리</div>
<div class="banner__2">배너</div>
<div class="banner__3">바로가기</div>
</div>
<div class="footer">
<div class="footer1">로고</div>
<div class="footer2">COPYRIGHT</div>
<div class="footer3">SNS</div>
</div>
</div>
</body>
<script>
let imgIndex = -1;
let nextIndex = 0;
let imgSlider = document.querySelectorAll(".slider");
let imgCount = document.querySelectorAll(".slider").length;
setInterval(()=>{
imgIndex = (imgIndex + 1) % imgCount;
nextIndex = (nextIndex + 1) % imgCount;
imgSlider[imgIndex].style.opacity = "0";
imgSlider[nextIndex].style.opacity = "1";
console.log("imgIndex: "+imgIndex)
console.log("nextIndex: "+nextIndex)
}, 1000)
</script>
</html>setInterval 함수를 사용하여 이미지가 일정한 시간 간격으로 자동으로 전환되도록 설정합니다. setInterval 함수는 지정된 시간(밀리초 단위)마다 콜백 함수를 실행합니다. 여기서는 1초마다 콜백 함수가 실행됩니다.
콜백 함수에서는 imgIndex 변수를 (imgIndex + 1) % imgCount로 갱신합니다.
이렇게 함으로써 imgIndex 변수의 값이 0~3 의 범위를 유지합니다.
또한, nextIndex 변수도 (nextIndex + 1) % imgCount로 갱신합니다.
imgSlider[imgIndex].style.opacity = "0"; 코드를 사용하여 현재 표시되고 있는 이미지의 투명도를 0으로 변경하고, imgSlider[nextIndex].style.opacity = "1"; 코드를 사용하여 다음에 표시될 이미지의 투명도를 1로 변경합니다.
웹디자인 기능사 실기 유형별 레이아웃도 보고싶다면?
https://ehcjswo.tistory.com/95
웹디자인 기능사 실기 유형별 레이아웃 정리!
웹디자인 기능사 실기 유형별 레이아웃 정리! 웹디자인 기능사 실기 A~E 유형별로 레이아웃을 만들어봤습니다. 웹디자인 기능사 실기 A유형 1번 레이아웃 로고 이미지 슬라이드 공지사항/갤러리
ehcjswo.tistory.com