2023년 웹디자인 기능사 탭메뉴 : T-1
소개
안녕하세요! 웹스토리보이입니다. 탭메뉴 스크립트를 작업해보겠습니다. 그렇게 어렵지 않으니 하나씩 따라오세요! 그럼 바로 시작해보겠습니다.
1. 구조 잡기
이번에는 A-2 유형의 레이아웃을 사용하였습니다. 소스는 그대로 복사하셔서 사용하셔도 상관없습니다.
<div id="wrap">
<header id="header">
<h1 class="logo"></h1>
<nav class="nav"></nav>
</header>
<!-- //header -->
<article id="slider">
</article>
<!-- //slider -->
<main id="contents">
<section class="content1"></section>
<section class="content2"></section>
<section class="content3"></section>
</main>
<!-- //contents -->
<footer id="footer">
<div class="footer1"></div>
<div class="footer2"></div>
<div class="footer3"></div>
</footer>
<!-- //footer -->
</div>
<!-- //wrap -->
</body>
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: #000;
}
#wrap {
width: 1200px;
margin: 0 auto;
}
#header {
width: 100%;
display: flex;
}
#header .logo {
width: 20%;
height: 100px;
background-color: #efefef;
}
#header .nav {
width: 80%;
height: 100px;
background-color: #e3e3e3;
}
#slider {
width: 100%;
height: 300px;
background-color: #d9d9d9;
}
#contents {
width: 100%;
display: flex;
}
#contents .content1 {
width: 33.3333%;
height: 200px;
background-color: #d1d1d1;
}
#contents .content2 {
width: 33.3333%;
height: 200px;
background-color: #c7c7c7;
}
#contents .content3 {
width: 33.3333%;
height: 200px;
background-color: #bcbcbc;
}
#footer {
width: 100%;
display: flex;
}
#footer .footer1 {
width: 20%;
height: 100px;
background-color: #b1b1b1;
}
#footer .footer2 {
width: 60%;
height: 100px;
background-color: #a3a3a3;
}
#footer .footer3 {
width: 20%;
height: 100px;
background-color: #9d9d9d;
}
컨텐츠 첫 번째 영역에 탭메뉴 코딩을 작업하였습니다. 버튼과 컨텐츠 부분을 따로 표현했습니다.
<section class="content1">
<div class="tab-menu">
<div class="tab-btn">
<ul>
<li class="active"><a href="#">탭메뉴1</a></li>
<li><a href="#">탭메뉴2</a></li>
</ul>
</div>
<div class="tab-cont">
<div>
탭메뉴1 내용<br>탭메뉴1 내용<br>탭메뉴1 내용<br>탭메뉴1 내용
</div>
<div>
탭메뉴2 내용<br>탭메뉴2 내용<br>탭메뉴2 내용<br>탭메뉴2 내용
</div>
</div>
</div>
<!-- //tab-menu -->
</section>
/* tab-menu */
.tab-menu {
padding: 20px;
}
.tab-menu .tab-btn ul {
display: flex;
}
.tab-menu .tab-btn li {
list-style: none;
}
.tab-menu .tab-btn li.active a {
text-decoration: underline;
}
.tab-menu .tab-btn li a {
display: block;
padding: 10px;
background-color: #6b6b6b;
}
.tab-menu .tab-cont > div {
padding: 10px;
background-color: #b0b0b0;
line-height: 1.6;
}
/* .tab-menu .tab-cont > div:nth-child(2){
display: none;
} */
2. 스크립트 작업 : 제이쿼리
라이브러리를 설정하고 버튼과 내용을 변수에 저장하였습니다.
변수명을 설정할 때 var를 설정했습니다.
요즘에는 let을 사용하지만 시험볼때에는 어떤것을 써도 상관은 없습니다.
var 자바스크립트 문법이 개정되기 전부터 사용했던 것이고 자바스크립트 es6 버전 이후부터는 let이라는 변수를 사용합니다.
차이점은 있지만 거기까지 알 필요는 없고 나중에 시험이 아닌 공부할 때 보시면 될 것 같습니다.
그래도 궁금하시면 GPT한테 물어보세요! 잘 알려줍니다.
이번에는 var를 사용해 봤구요!
탭 콘텐츠를 모두 숨기고 첫번째 콘텐츠만 보이도록 설정했습니다.
버튼을 클릭하면, 내가 클릭한 버튼을 알아야 하기 때문에 $(this)를 이용하여 index 변수에 저장을 하였습니다.
그리고 클릭한 버튼에 active 클래스를 추가하고 형제들을 선택해서 active를 지워주었습니다.
또한 내가 클릭한 버튼의 번호를 알아내기 위해 index()를 사요하여, index번째 콘텐츠를 보이도록 하고 나머지 콘텐츠는 보이지 않도록 설정했습니다.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
let tabBtn = $(".tab-btn > ul > li"); //버튼 설정
let tabCont = $(".tab-cont > div"); //콘텐츠 설정
tabCont.hide().eq(0).show(); //첫번째 콘텐츠만 보이게 설정
tabBtn.click(function(){
const index = $(this).index(); //클릭한 번호를 저장
// alert(index);
$(this).addClass("active").siblings().removeClass("active"); //내가 클릭한 버튼에 클래스를 추가하고 나머지 버튼은 삭제
tabCont.eq(index).show().siblings().hide(); //내가 클릭한 버튼의 콘텐츠는 보여주고 나머지는 숨김
});
});
</script>
3. 스크립트 작업 : 자바스크립트
자바스크립트도 한번 해보겠습니다.
버튼들을 선택해서 변수에 저장하고, 콘텐츠도 선택해서 저장하겠습니다.
모든 콘텐츠를 설정하기 위해 forEach를 사용하여 안보이도록 설정하고
첫 번째 콘텐츠만 보이도록 하겠습니다.
여러개 버튼중에 하나를 클릭하면, 클래스를 지우고 해당 버튼만 클랙스를 추가했습니다.
콘텐츠도 모두 안보이도록 설정하고, 클릭한 버튼에 해당하는 콘텐츠만 보이도록 설정했습니다.
window.onload = function(){
const tabBtn = document.querySelectorAll(".tab-btn > ul > li"); //버튼 설정
const tabCont = document.querySelectorAll(".tab-cont > div"); //콘텐츠 설정
tabCont.forEach(el => el.style.display = "none"); //모든 콘텐츠를 숨김
tabCont[0].style.display = "block"; //첫 번째 콘텐츠를 보이게 설정
tabBtn.forEach((tab, index) => {
tab.addEventListener("click", () => {
tabBtn.forEach(tab => tab.classList.remove("active")); //모든 버튼 클래스 삭제
tab.classList.add("active"); //클릭한 버튼만 클래스 추가
tabCont.forEach(cont => cont.style.display = "none"); //모든 콘텐츠를 숨기
tabCont[index].style.display = "block"; //클릭한 버튼의 콘텐츠 내용을 보여줌
});
});
};
3. 마무리
이번 스크립트도 두가지 버전으로 해봤습니다. 자바스크립트가 더 어렵긴 하죠! 그래도 자격증을 따기 위함이 아니라, 코딩을 직업으로 하실 분은 자바스크립트를 꼭 알아두셔야 합니다. 오늘도 수고하셨습니다. 이제 거의 끝나갑니다. 마무리 잘하자!!! <- 나한테 하는 소리임 ㅎㅎ
PDF 샘플
레이아웃
- A1 유형
- A2 유형
- A3 유형
- A4 유형
- B1 유형
- B2 유형
- B3 유형
- B4 유형
- C1 유형
- C2 유형
- C3 유형
- C4 유형
- D1 유형
- D2 유형
- D3 유형
- D4 유형
- E1 유형
- E2 유형
- E3 유형
- E4 유형
댓글