비주얼 스튜디오 코드 22

☭DEVELOPER/#2 웹개발(자바기반 풀스택)

비주얼 스튜디오 코드 22_ 탭 메뉴

조반짝 2023. 6. 9. 17:32

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

현재글비주얼 스튜디오 코드 22_ 탭 메뉴

조반짝의 도전일지

공부, 취미, 여행 모두 경험해보고 싶은 조반짝의 도전일지입니다. ✨contact_ looby777@naver.com ✨Instagram_holylovuuu_illust

Parallax, 비주얼스튜디오코드, SQL, 코딩테스트, offset, CSS, HTML, 자바스크립트, float, media, JavaScript, position, 프론트엔드, Java, 이클립스, 웹디자인, For문, if문, ACTIVE, 자바,

Today :
Yesterday :

조반짝의 도전일지