728x90
반응형
html 내용 넣기
컨테이너는 각 아이디안에 들어가기 때문에 반드시 클래스로 넣어야한다.
.container
# wrap 안에
아이디 헤더 > 클래스 컨테이너 > 클래스 헤더
아이디 배너 > 클래스 컨테이너 > 클래스 배너
아이디 컨텐츠 > 클래스 컨테이너 > 클래스 컨텐츠
아이디 푸터 > 클래스 컨테이너 > 클래스푸터
바디 기본 틀 잡아주기
[css 기본 reset 코드 ]
css 각 아이디별 영역 잡아주기
.container 에 background color 를
부모(아이디)의 높이값을 종속 받는다.
[탭 메뉴 넣기]
탭 안에서 구분할 부분이 버튼이고, 보여지는 부분이 컨텐츠로 1번,2번 구분해서 숨기기 효과 사용한다.
active: active 이름을 가진 클래스가 색깔이 다르게 들어갈 수 있음
css 에도 li.active 에 백그라운드 컬러에 컬러를 다르게 줌
제이쿼리 > 스크립트설정
제이쿼리 스니펫 복사해서 html 에 붙여넣기
const: 상수값 즉, 변하지 않는 값
이름이 너무 길 경우에 지정된 이름으로 설정하여 한번 설정되면 다른 이름들을 받지 않는다.
const tabBn = .tab_btn>ul>li
taCont.hide().
모두 숨겨주어라
taCont.hide().eq.show()
코딩은 0번부터 순서를 매김 >> index값
0번째만 찾아서 보여주고 나머지는 숨겨주어라
탭을 클릭했을 때 이벤트가 발생해야한다.
var : 변수
tabBtn.click(function(){
var target = $(this);
var index = target.index();
//타겟의 인덱스 값을 찾아서 var index에 넣으라는 의미
console.log(index);
// 인덱스값 확인, 검사에서 console 공지사항 클릭하면 0 / 갤러리 클릭하면 1 이 나와야함
});
console.log 는 결과값 확인용으로 사용함
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 rel="stylesheet" href="./css/style.css">
</head>
<body>
<div id="wrap">
<header id="header">
<div class="container">
<div class="header clearfix">
<!-- 헤더 클리어픽스 -->
<h1 class="logo">로고</h1>
<nav class="nav">네비게이션</nav>
</div>
</div>
</header>
<section id="banner">
<div class="container">
<div class="banner">
<h2>탭메뉴를 잘하는 방법</h2>
<img src="./img/banner2.png" alt="배너이미지">
</div>
</div>
</section>
<section id="contents">
<div class="container">
<div class="contents clearfix">
<!-- 플롯 사용후 부모인 컨텐츠에 클리어픽스 넣어줘야 레이어를 채워줌 -->
<div class="cont1">
<div class="tab_menu">
<!-- 탭메뉴 -->
<div class="tab_btn">
<ul>
<li class="active"><a href="#">공지사항</a></li>
<li><a href="#">갤러리</a></li>
</ul>
</div>
<div class="tab_cont">
<div>
<!-- 공지사항 -->
1. Tab_menu DESC<br>
1. Tab_menu DESC<br>
1. Tab_menu DESC<br>
</div>
<div>
<!-- 갤러리 -->
2. Tab_menu DESC<br>
2. Tab_menu DESC<br>
2. Tab_menu DESC<br>
</div>
</div>
</div>
</div>
<div class="cont2"></div>
<div class="cont3"></div>
</div>
</div>
</section>
<footer id="footer">
<div class="container">
<div class="footer">
<div class="foot1">Copyright</div>
<div class="foot2">패밀리사이트</div>
<div class="foot3">SNS</div>
</div>
</div>
</footer>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
// 탭메뉴
$(document).ready(function(){
const tabBtn = $(".tab_btn>ul>li");
//한번 설정되면 다른 외의 이름을 받지않음 > 변수지정(이름이 너무 길어서 지정된 이름으로 설정해줌) 변하지 않는 값, 즉 상수값(const)
const tabCont = $(".tab_cont>div");
tabCont.hide().eq(0).show();
// 0번째만 찾아서 보여줘라. 나머지는 숨겨주어라
// tabCont.hide() : $(".tab_cont>div"); 감추는 명령어
// .eq(0) : 선택자중 0번째 선택
// show() : 보여주는 메서드
tabBtn.click(function(){
var target = $(this);
// $(this) : 공지사항, 갤러리 버튼 중 선택된 버튼
// var target = $(this); : 선택된 값을 변수 target에 넣어주는 명령어
var index = target.index();
// 타겟의 인덱스 번호를 찾아서 변수 index에 넣어주는 메서드(공지사항 : 0 / 갤러리 : 1)
//타겟의 인덱스 값(프로그램에서 자동으로 0부터 매겨진 값)을 찾아서 var index에 넣으라는 의미
console.log(index);
// 인덱스값 확인, 검사에서 console 공지사항 클릭하면 0 / 갤러리 클릭하면 1 이 나와야함
tabBtn.removeClass("active");
// 탭버튼에 액티브(액티브가 가지고 있는 배경색)를 지운다.
// .removeClass() : 클래스 값을 삭제할 때 사용하는 메서드
target.addClass("active");
// 타겟에 액티브값(액티브가 가지고 있는 배경색)을 추가해준다.
tabCont.hide();
// tabCont 가지고 잇는 div 2개 다 삭제
tabCont.eq(index).show();
// eq(찾는 명령어)에 index를 클릭했을때 보여준다.
// tabCont가 가지고 있는 2개 중에서 index번째 div를 보여주는 명령어
});
});
</script>
</body>
</html>css
@charset "utf-8";
/* reset */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-size: 24px;
}
li{
list-style: none;
}
img{
display: block;
/*이미지가 블럭이안되서 여백이생김*/
}
.clearfix::after,
.clearfix::before{
content: "";
display: block;
clear: both;
}
a{
color: #222;
text-decoration: none;
}
#wrap{
width: 100%;
}
#header{
width: 100%;
/* height: 100px; */
/*높이값 없애줘야함*/
/* background-color: lightpink; */
}
#banner{
width: 100%;
/* height: 300px; */
/*잘리기 때문에 높이값을 주지말자*/
/* background-color: lightblue; */
}
#contents{
width: 100%;
/* height: 247px; */
/* background-color: lightskyblue; */
}
#footer{
width: 100%;
height: 100px;
/* background-color: lightgray; */
}
.container{
width: 1200px;
height: inherit;
/*부모의 높이값을 종속 받음*/
margin: 0 auto;
/* background-color: rgba(255, 255, 255, 0.3); */
}
/*header*/
.header{}
.header .logo{
width: 200px;
height: 100px;
background-color: #f3e5f5;
float: left;
}
.header .nav{
width: 600px;
height: 40px;
background-color: #e1bee7;
float: right;
margin-top: 60px;
}
/*banner*/
.banner{
position: relative;
}
.banner h2{
position: absolute;
bottom: 30px;
left: 30px;
font-size: 35px;
color: #fff;
padding: 10px;
}
.banner img{}
/*contents */
.contents{}
.contents > div{
height: 247px;
width: 400px;
float: left;
padding: 10px;
}
.contents .cont1{
/* background-color: #ce93c8; */
}
.contents .cont1 .tab_menu{}
.contents .cont1 .tab_menu .tab_btn{}
.contents .cont1 .tab_menu .tab_btn ul{
overflow: hidden;
/*li에 플롯줬기때문에 클리어픽스(overflow)를 줘야한다.*/
}
.contents .cont1 .tab_menu .tab_btn ul li{
float: left;
background-color: #4a148c;
width: 120px;
height: 50px;
text-align: center;
line-height: 50px;
}
.contents .cont1 .tab_menu .tab_btn ul li.active{
background-color: #ba68c8;
}
.contents .cont1 .tab_menu .tab_btn ul li a{
color: #fff;
}
.contents .cont1 .tab_menu .tab_cont{
padding: 20px;
line-height: 1.7;
}
.contents .cont1 .tab_menu .tab_cont div{}
.contents .cont2{
background-color: #ba68c8;
}
.contents .cont3{
background-color: #e1bee7;
}
/*footer*/
.footer{
overflow: hidden;
color: #fff;
text-align: center;
}
.footer > div{
width: 200px;
height: 50px;
float: left;
line-height: 50px;
padding: 10px;
}
.footer .foot1{
width: 1000px;
height: 100px;
background-color: indigo;
}
.footer .foot2{
background-color: antiquewhite;
}
.footer .foot3{
background-color: violet;
}
<다른 방법>
//탭메뉴
const tabBtn = $(".tab_btn>ul>li")
const tabCont = $(".tab_cont>div")
tabCont.hide().eq(0).show();
tabBtn.click(function(e){
e.preventDefault(); //원래 가지고 있는 명령어를 못하게 막는 명령어
// ex) a태그 #은 임시주소로 맨위에 올라가는성질이 있는데 올라가지 못하게 막는것
target = $(this);
let index = target.index();
// console.log(index);
tabBtn.removeClass("active");
target.addClass("active")
tabCont.hide().eq(index).show();
});
728x90
반응형
'☭DEVELOPER > #2 웹개발(자바기반 풀스택)' 카테고리의 다른 글
| 비주얼 스튜디오 코드 24_ 마우스오버 효과③ (2) | 2023.06.12 |
|---|---|
| 비주얼 스튜디오 코드 23_ 마우스오버 효과② (0) | 2023.06.12 |
| 비주얼 스튜디오 코드 21 _ 연꽃축제 예제 _ 팝업창 만들기 (0) | 2023.06.09 |
| 비주얼 스튜디오 코드 20_ 연꽃축제 예제 _ footer (0) | 2023.06.09 |
| 비주얼 스튜디오 코드 19_ 연꽃축제 예제_banner, contents 넣기 (0) | 2023.06.08 |
