한번씩 읽고 가세요.
“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
- Frederick Philips Brooks
Mythical Man-Month 저자
728x90
웹디자인 기능사 E-4 유형
웹디자인 기능사 E-4 유형을 구현해 봤습니다.
<!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>웹디기 E-4유형</title>
<style>
* {
padding: 0;
margin: 0;
}
#wrap
#top {
width: 100%;
height: calc(100vh - 120px);
display: flex;
}
#aside {
width: 200px;
height: inherit;
}
#aside .logo {
width: 200px;
height: 13%;
background-color: #366e46;
}
#aside .nav {
width: 200px;
height: 87%;
background-color: #98a89c;
}
#aside2 {
width: 400px;
height: inherit;
background-color: #16d01f;
}
#aside2 .a1 {
height: 15%;
background-color: #63e3bd;
}
#aside2 .a2 {
height: 30%;
background-color: #1fd74d;
}
#aside2 .a3 {
height: 30%;
background-color: #63e44c;
}
#aside2 .a4 {
height: 25%;
background-color: #9ceb1d;
}
#main {
width: calc(100% - 600px);
background-color: #993636;
}
#footer {
width: 100%;
height: 120px;
display: flex;
}
#footer .foo1 {
background-color: #2be2a5;
width: 200px;
}
#footer .foo2 {
width: calc(100% - 400px);
}
.foo2 .foo2-1 {
width: 100%;
height: 50%;
background-color: #49ef97;
}
.foo2 .foo2-2 {
width: 100%;
background-color: #88106c;
height: 50%;
}
#footer .foo3 {
width: 200px;
height: inherit;
background-color: #fd1c1c;
}
/* 메뉴 영역 */
a {
text-decoration: none;
color: #000;
}
li {
list-style: none;
}
.nav>ul {
width: 80%;
display: inline-block;
margin: 20px;
}
.nav>ul>li {
position: relative;
padding: 5px;
border: 1px solid #93d4da;
background-color: #2c7912;
}
.submenu {
position: absolute;
left: 160px;
top: 0px;
width: 100%;
margin-top: 1px;
background-color: #ccc;
display: none;
}
.nav>ul>li:hover {
background-color: #f58686;
}
.nav>ul>li>ul>li {
padding: 7px;
font-size: 12px;
background-color: #6de914;
}
.nav>ul>li>ul>li>a {
padding: 10px;
display: block;
}
.nav>ul>li>ul>li>a:hover {
background-color: #ddd;
}
</style>
</head>
<body>
<div id="wrap">
<div id="top">
<div id="aside">
<div class="logo"></div>
<div class="nav">
<ul>
<li>
<a href="#">menu1</a>
<ul class="submenu">
<li>서브메뉴1-1</li>
<li>서브메뉴1-2</li>
<li>서브메뉴1-3</li>
<li>서브메뉴1-4</li>
</ul>
</li>
<li>
<a href="#">menu2</a>
<ul class="submenu">
<li>서브메뉴2-1</li>
<li>서브메뉴2-2</li>
<li>서브메뉴2-3</li>
<li>서브메뉴2-4</li>
</ul>
</li>
<li>
<a href="#">menu3</a>
<ul class="submenu">
<li>서브메뉴3-1</li>
<li>서브메뉴3-2</li>
<li>서브메뉴3-3</li>
<li>서브메뉴3-4</li>
</ul>
</li>
<li>
<a href="#">menu4</a>
<ul class="submenu">
<li>서브메뉴4-1</li>
<li>서브메뉴4-2</li>
<li>서브메뉴4-3</li>
<li>서브메뉴4-4</li>
</ul>
</li>
</ul>
</div>
</div>
<div id="aside2">
<div class="a1"></div>
<div class="a2"></div>
<div class="a3"></div>
<div class="a4"></div>
</div>
<div id="main"></div>
</div>
<div id="footer">
<div class="foo1"></div>
<div class="foo2">
<div class="foo2-1"></div>
<div class="foo2-2"></div>
</div>
<div class="foo3"></div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(".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('fast');
});
</script>
</body>
</html>첫번째론 제일 크게 두 개의 구역으로 나눠줍니다.
내용이 들어갈 top박스와 footer 박스로 나눠 줍니다.
footer가 120px로 고정인 반응형 웹으로 만들거라서 footer를 120px로 설정해주고 top height 값을 calc(100vh - (footer의 height값으로 설정해줍니다,))
top박스 안에는 3개의 구역으로 나눠주며 aside 와 aside2 는 각각 200px 400px 고정이기 때문에 200,400으로 고정시켜줍니다. 나머지 구역인 슬라이드가 나올 main영역은 반응형으로
창의 크기가 줄어들면 같이 줄어들게 해줍니다. width값을 calc(100% - (aside+aside2의 width값)으로 설정해줍니다.
그후 각각 구역을 구역 수와 맞게 나눠줍니다.
footer영역은 3개로 나눠 왼쪽과 오른쪽 양끝 섹션들을 위와 값은 방법으로 고정시켜줍니다.
footer의 가운데 영역은 반응형이며, 두개 로 나눠 주기 때문에 코드는 아래와 같은 방식으로 짜줍니다.
<div id="footer">
<div class="foo1"></div>
<div class="foo2">
<div class="foo2-1"></div>
<div class="foo2-2"></div>
</div>
<div class="foo3"></div>
</div>메뉴 구현하기
메뉴영역은 메인 메뉴 4개 그 안 서브 메뉴 4개 씩으로 구성 되어있으며 코드는 아래와 같습니다.
<div class="nav">
<ul>
<li>
<a href="#">menu1</a>
<ul class="submenu">
<li>서브메뉴1-1</li>
<li>서브메뉴1-2</li>
<li>서브메뉴1-3</li>
<li>서브메뉴1-4</li>
</ul>
</li>
<li>
<a href="#">menu2</a>
<ul class="submenu">
<li>서브메뉴2-1</li>
<li>서브메뉴2-2</li>
<li>서브메뉴2-3</li>
<li>서브메뉴2-4</li>
</ul>
</li>
<li>
<a href="#">menu3</a>
<ul class="submenu">
<li>서브메뉴3-1</li>
<li>서브메뉴3-2</li>
<li>서브메뉴3-3</li>
<li>서브메뉴3-4</li>
</ul>
</li>
<li>
<a href="#">menu4</a>
<ul class="submenu">
<li>서브메뉴4-1</li>
<li>서브메뉴4-2</li>
<li>서브메뉴4-3</li>
<li>서브메뉴4-4</li>
</ul>
</li>
</ul>
</div>그 후 각각의 style를 설정해줍니다. 서브메뉴 영역인 .submenu는 display:none을 사용해 숨겨줍니다.
스크립트
그 후 제이쿼리를 사용하여 마우스가 오버하였을때 submenu가 나타날수있게 해주며
아웃 했을때 사라지게 해줍니다.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(".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('fast');
});
</script>라이브러리를 가져와서 설정해줍니다.
그 후 선택자를 정의하고 마우스 오버 효과를 넣어줍니다. 그 안에 함수를 사용하여 선택자에게 .find를 사용하여 .submenu 를 찾게 한 뒤 stop().sliderDown() 메서드를 사용하여 서브메뉴가 아래로 펼쳐지게 설정해줍니다.
slideDown() 함수는 요소를 아래쪽으로 슬라이드하여 해당 요소를 보이게 합니다. 이 함수는 요소가 기본적으로 display:none으로 설정되어 있어도 작동합니다.
$(selector).slideDown(speed, [easing], [callback]);이 함수는 다음과 같이 사용할 수 있습니다:
- selector: 슬라이드다운 효과를 적용할 요소를 선택하는데 사용되는 선택자입니다.
- speed: 슬라이드다운 효과의 속도를 지정하는 데 사용되는 밀리초(ms) 단위의 시간입니다. 선택 사항이며, 생략하면 기본값인 400ms가 사용됩니다.
- easing: 슬라이드다운 효과의 이징(easing)을 지정하는 데 사용되는 문자열입니다. 선택 사항이며, 생략하면 기본값인 "swing"이 사용됩니다.
- callback: 슬라이드다운 효과가 완료된 후 실행할 함수를 지정하는데 사용됩니다. 선택 사항입니다.
stop()은 jQuery에서 제공하는 메서드 중 하나로, 현재 진행 중인 애니메이션을 즉시 중지합니다. 이 메서드는 다음과 같은 방법으로 사용됩니다.
$(selector).stop([clearQueue], [jumpToEnd]);- selector: 중지할 애니메이션을 가진 요소를 선택하는 데 사용되는 선택자입니다.
- clearQueue: 선택 사항으로, 불리언 값입니다. true로 설정하면 현재 요소의 애니메이션 큐에서 모든 애니메이션을 제거합니다. 기본값은 false이며, 애니메이션 큐에 대기 중인 다른 애니메이션은 계속해서 실행됩니다.
- jumpToEnd: 선택 사항으로, 불리언 값입니다. true로 설정하면 애니메이션이 즉시 끝나고 마지막 프레임으로 이동합니다. 기본값은 false이며, 애니메이션이 중지된 지점에서 다시 시작됩니다.
stop() 메서드는 slideDown(), slideUp(), slideToggle(), fadeIn(), fadeOut(), fadeToggle() 등의 메서드와 함께 사용되는 경우 유용합니다. 이러한 메서드는 요소를 애니메이션으로 표시하거나 숨기는 데 사용됩니다. stop() 메서드를 사용하여 사용자가 행동을 취할 때 현재 애니메이션을 중지하거나 대기 중인 다른 애니메이션을 제거할 수 있습니다.
미션:자바스크립트 코드로 바꾸기
const lists = document.querySelectorAll(".nav > ul > li");
lists.forEach(li => {
li.addEventListener("mouseover", () => {
li.querySelector(".submenu").style.display = "block";
});
li.addEventListener("mouseout", () => {
const submenu = li.querySelector(".submenu");
if (!submenu.matches(":hover")) {
submenu.style.display = "none";
}
});
li.querySelector(".submenu").addEventListener("mouseover", () => {
li.querySelector(".submenu").style.display = "block";
});
li.querySelector(".submenu").addEventListener("mouseout", () => {
li.querySelector(".submenu").style.display = "none";
});
});