웹퍼블리셔) 탭메뉴 만들기

 

위 사진처럼 탭 메뉴를 만들라고 한다.

 

피그마로 가로 1920 디자인 시안과 가로 360 디자인 시안을 받으면 만들기 시작하는데.... 중간 단계는 내가 알아서 만들어야 한다.....

 

다 쓸려니 내용이 쓸 때 없이 길어져서 그냥 내용물이 2개일 때만 있는걸로 적었다.더 추가해봤자 어차피 의미없는 반복일 뿐이니까.

html

<section class="main_sect_course">
    <div class="inner">
        <div class="swiper category_slider pc_">
            <ul class="swiper-wrapper">
                <li class="swiper-slide active">
                    <div class="imgbox">
                        <img src="/assets/front/img/main/main_plan_img.png" alt="">
                    </div>
                    <p>게임 기획</p>
                </li>
                <li class="swiper-slide">
                    <div class="imgbox">
                        <img src="/assets/front/img/main/main_gameprog_img.png" alt="">
                    </div>
                    <p>게임 프로그래밍</p>
                </li>
            </ul>
        </div>
        <ul class="category mo_">
            <li id="category_pl" class="category_item">
                <div class="imgbox">
                    <img src="/assets/front/img/main/main_plan_img.png" alt="">
                </div>
                <p>게임 기획</p>
            </li>
            <li id="category_pr" class="category_item">
                <div class="imgbox">
                    <img src="/assets/front/img/main/main_gameprog_img.png" alt="">
                </div>
                <p>게임 프로그래밍</p>
            </li>
        </ul>
        <ul class="content">
            <li class="content_box active">
                <h3>게임 기획</h3>
                <div class="comment">
                    <p>기획의 이해부터 게임을 제작하고 론칭까지</p>
                    <ul>
                        <li>#Unity</li>
                        <li>#시스템</li>
                        <li>#C＃</li>
                    </ul>
                </div>
                <a class="item_link" href="" target="_blank">자세히 보기</a>
            </li>
            <li class="content_box">
                <h3>게임 프로그래밍</h3>
                <div class="comment">
                    <p>상상만 했던 게임을 내 손으로 제작하는 과정</p>
                    <ul>
                        <li>#Unity 3D</li>
                        <li>#C++/C＃</li>
                        <li>#WinAPI</li>
                    </ul>
                </div>
                <a class="item_link" href="" target="_blank">자세히 보기</a>
            </li>
        </ul>
    </div>
</section>

css

.main_sect_course {
	height: 930px;
	padding: 93px 0px 179px;
	background: #F0F3FF;
}
.main_sect_course small{
	color: var(--v-26842-ff, #6842FF);
	text-align: center;
	font-family: "Pretendard Variable";
	font-size: 20px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	text-transform: uppercase;
	margin-bottom: 15px;
	display: block;
}
.main_sect_course h2{
	color: #333;
	text-align: center;
	font-family: "Pretendard Variable";
	font-size: 48px;
	font-style: normal;
	font-weight: 700;
	line-height: 100%; 
	margin-bottom: 64px;
}
.main_sect_course .a_box{
	display: flex;
	justify-content: right;
	margin-bottom: 14px;
	
}
.main_sect_course a{
	color: #FFF;
	font-family: "Pretendard Variable";
	font-size: 20px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	letter-spacing: -0.6px;
	text-transform: uppercase;
	border-radius: 15px;
	background: #6842FF;
	padding: 3px 15px;
}
.category_slider {
	width: auto;
	margin-bottom: 51px;
}
.category_slider .swiper-slide{
	width: 180px;
}
.category_slider .swiper-slide.active{
	border-bottom: 2px solid #6842FF;
}
.category_slider .swiper-slide .imgbox{
	height: 200px;
	background-color: #FFFFFF;
	border-radius: 15px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.category_slider .swiper-slide p{
	height: 29px;
	color: #6842FF;
	text-align: center;
	font-family: "Pretendard Variable";
	font-size: 24px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	letter-spacing: -0.72px;
	margin: 14px 0px 5px;
}

.main_sect_course .inner .content .content_box{
	display: flex;
	border-radius: 20px;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	background: #FFF;
	box-shadow: 10px 10px 30px 0px rgba(0, 0, 0, 0.10);
	padding: 25px 0px 22px;
	
}

.main_sect_course .inner .content .content_box h3{
	color: #6842FF;
	text-align: center;
	font-family: "Pretendard Variable";
	font-size: 32px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	letter-spacing: -0.96px;
	width: 27%;
}

.main_sect_course .inner .content .content_box .comment {
	width: 50%; 
}
.main_sect_course .inner .content .content_box .comment p{
	color: #000;
	font-family: "Pretendard Variable";
	font-size: 24px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	letter-spacing: -0.72px;
	margin-bottom: 10px;
}
.main_sect_course .inner .content .content_box .comment ul{
	display: flex;
	flex-direction: row;
	gap: 5px;
}

.main_sect_course .inner .content .content_box .comment ul li{

	border-radius: 15.5px;
	border: 1.632px solid #6842FF;
	color: #6842FF;
	text-align: center;
	font-family: SUIT;
	font-size: 18px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	letter-spacing: -0.54px;
	padding: 3px 17px;
}
.main_sect_course .inner .content .content_box .item_link{
	color: #FFF;
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: SUIT;
	font-size: 24px;
	font-style: normal;
	font-weight: 700;
	line-height: 100%;
	letter-spacing: -0.72px;
	border-radius: 33.21px;
	background: #6842FF;
	width: 17%;
	height: 52px;
	margin-right: 6%;
}

js

$('.content_box').hide().eq(0).show();
    $('.swiper-slide').click(function(){
        $('.swiper-slide').removeClass('active');
        $(this).addClass('active');
        var index = $(this).index();
        $('.content_box').hide().eq(index).show();
    });

 

탭메뉴의 경우 인터넷에 치면 자료가 엄청나게 많이 나온다.

그냥 복붙할까 하다가 이상한 오기가 생겨서 chatGPT로 내가 원하는 동작을 하는 함수를 물으면서 코드를 짰다.

index() 함수를 이용하여 만들었다.

물론 내가 짠 것보다 더 효율적인 코드들은 많겠지...