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

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

조반짝 2023. 6. 12. 16:41
728x90
반응형

html에 body 셋팅해주기

 

container 안에 div, section, article 상관없이 넣어주어도 된다.

*** 아이디와 클래스를 반드시 구분해서 넣어줘야한다.

기본 레이아웃 만들어주기

탭메뉴 영역 골격 만들어주기

active 클래스 넣어주기

css 영역 클래스 구분해주기

탭박스 만들어주기

active 영역 배경색 변경해주기

탭박스 flot을 띄워주어 옆으로 나란히 보내기

float 띄워 줄 시 clearfix를 넣어줘야하지만 부모(ul)에 overflow:hidden 을 대신 넣어줘도 된다.

div 부분 안 쪽 여백 밑 줄간격 

border-top으로 박스 밑에 선 넣어주기

자바스크립트 스니펫 가져와서 html에 붙여넣기

변수지정

긴 이름을 짧게 지정해주기

 

console.log(index); 로 값이 잘 출력되는지 확인하기

공지사항은 0

갤러리는 1

> 표시는 하나의 탭만 형식이 달라질 경우 반드시 넣어서 형식이 달라지도록한다.

●float 을 넣어 줄 시에 css 에 바로 위 부모에 overflow:hidden;을 넣어주거나 html에 바로 위 부모에 class="clearfix"를 넣어주어야한다.

css

html

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <div id="wrap">
        <div id="header">
            <div class="container">
                <article class="header"></article>
            </div>
        </div>

        <section id="banner">
            <div class="container">
                <article class="banner"></article>
            </div>
        </section>

        <section id="contents">
            <div class="container">
                <article class="contents clearfix">
                    <article class="cont_1">
                        <!-- 탭메뉴 -->
                        <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 class="notice">
                                    0. 공지사항 영역입니다 <br>
                                    0. 공지사항 영역입니다 <br>
                                    0. 공지사항 영역입니다 
                                </div>
                                <div class="gallery">
                                    1. 갤러리 영역입니다 <br>
                                    1. 갤러리 영역입니다 <br>
                                    1. 갤러리 영역입니다 
                                </div>
                            </div>
                        </div>
                    </article>
                    <article class="cont_2">
                        <h3>배너</h3>
                        <ul>
                            <li></li>
                        </ul>
                    </article>
                    <article class="cont_3">
                        <h3>바로가기</h3>
                        <ul>
                            <li></li>
                        </ul>
                    </article>
                </article>
            </div>
        </section>

        <footer id="footer">
            <div class="container">
                <article class="footer"></article>
            </div>
        </footer>

    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

    <script>
        //변수지정: 한번 지정하면 변하지 않는 값
        const tabBtn = $(".tab_btn > ul > li");
        const tabCont = $(".tab_cont > div")
        tabCont.hide().eq(0).show();
        // 탭컨텐츠를 숨겨두었다가 0번째(eq)에 보여줘라

        tabBtn.click(function(){
            let target = $(this);
            let index = target.index();
            // let 변하는 값
            // 타겟에 인덱스값을 찾아서 값을 보여줘라.
            // console.log(index);

            tabBtn.removeClass("active");
            // 액티브 값을 지워라
            target.addClass("active")
            // 액티브 값을 추가해줘라. 탭색상 변경

            tabCont.hide().eq(index).show();
            //탭컨텐츠을 숨겨주고 클릭한 인덱스 번째에 보여줘라
        });
    </script>
</body>
</html>

css

@charset "utf-8";

/* reset */

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-size: 18px;
}

li{
    list-style: none;
}

a{
    text-decoration: none;
    color: #222;
}

img{
    display: block;
}

.clearfix::before,
.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

#wrap{
    width: 100%;
}

#header{
    /* background-color: #099; */
    /* 아이디헤더와 클래스헤더를 반드시 구분을 해주어야한다. */
}
#banner{}
#contents{}
#footer{}

/* container */
.container{
    width: 1200px;
    margin: 0 auto;
    /* 컨테이너 가운데정렬 */
    height: inherit;
    /* 부모의 높이값이 종속됨 */
}

/* header */

.header{
    width: 100%;
    height: 100px;
    background-color: lightblue;
    /* 색들어가는 부분 */
}

/* banner */
.banner{
    height: 300px;
    background-color: lightcoral;
}

/* contents */
.contents{
    /* height: 250px; */
}

.contents>article{
    width: 400px;
    height: 250px;
    float: left;
    /* float을 띄워주면 clearfix를 html에 부모에 반드시 넣어주어야함 */
    padding: 10px;
}

.contents > article > h3{
    /* 배너, 바로가기 탭박스 넣어주기 */
    width: 120px;
    height: 50px;
    background-color: pink;
    font-size: 20px;
    text-align: center;
    line-height: 50px;
}
.contents > article > ul{
    padding-top: 10px;
    border-top: 1px solid pink;

}


.contents .cont_1{
    /* background-color: tomato; */
}

.contents .cont_1 .tab_menu{}
.contents .cont_1 .tab_menu .tab_btn{}
.contents .cont_1 .tab_menu .tab_btn ul{
    overflow: hidden;
}
.contents .cont_1 .tab_menu .tab_btn ul li{
    /* 탭박스 만들어주기 */
    background-color: pink;
    width: 120px;
    font-size: 20px;
    font-weight: bold;
    height: 50px;
    text-align: center;
    line-height: 50px;
    float: left;
}

.contents .cont_1 .tab_menu .tab_btn ul li.active{
    background-color: lightblue;
}
.contents .cont_1 .tab_menu .tab_btn ul li a{}

.contents .cont_1 .tab_menu .tab_cont{}
.contents .cont_1 .tab_menu .tab_cont >div{
    padding-top: 10px;
    line-height: 2;
    /* 줄간격 */
    padding: 10px;
    border-top: 1px solid pink;
    /* 박스 밑 선넣어주기 */
}
.contents .cont_1 .tab_menu .tab_cont .notice{}
.contents .cont_1 .tab_menu .tab_cont .gallery{}



.contents .cont_2{
    /* background-color: orange; */
}
.contents .cont_3{
    /* background-color: lightgreen; */
}

/* footer */
.footer{
    height: 100px;
    background-color: crimson;
}

 

728x90
반응형
저작자표시 비영리 변경금지

'☭DEVELOPER > #2 웹개발(자바기반 풀스택)' 카테고리의 다른 글

비주얼 스튜디오 코드 27_ 태그 명령 줄여서 쓰기 , 반응형  (0) 2023.06.13
비주얼 스튜디오 코드 26 _ 마우스오버 효과④  (0) 2023.06.13
비주얼 스튜디오 코드 24_ 마우스오버 효과③  (2) 2023.06.12
비주얼 스튜디오 코드 23_ 마우스오버 효과②  (0) 2023.06.12
비주얼 스튜디오 코드 22_ 탭 메뉴  (0) 2023.06.09

'☭DEVELOPER/#2 웹개발(자바기반 풀스택)'의 다른글

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

관련글

티스토리툴바