jQuery를 이용한 탭 및 컨텐츠 애니메이션 03

안녕하세요. 오늘은 필자가 웹디자인기능사 실기를 준비하면서 쓰는 jQuery를 이용한 슬라이드 애니메이션 글 두번째입니다.

포스팅에 앞서 필자도 부족한 부분이 많으니 양해 부탁드립니다.

아래의 코드는 HTML, CSS 및 JavaScript(jQuery)로 구성되어 있으며, 각 부분은 서로 다양한 방식으로 상호작용하여 탭 기능을 구현합니다. 각 코드가 어떻게 서로 연관되어 작용하는지 살펴보겠습니다.

HTML 구조

<section class="notice">
    <div class="title">
        <ul>
            <li class="active"><a href="#">공지사항</a></li>
            <li><a href="#">갤러리</a></li>
        </ul>
    </div>
    <div class="cont">
        <div>
            <ul>
                <li><a href="#">박물관 쌈뽕한 오픈일</a><span>2024.04.11</span></li>
                <li><a href="#">박물관 오르나민 씨</a><span>2024.04.12</span></li>
                <li><a href="#">박물관 알파</a><span>2024.04.13</span></li>
                <li><a href="#">박물관 오메가</a><span>2024.04.14</span></li>
                <li><a href="#">박물관 쓰근하게 오픈</a><span>2024.04.15</span></li>
            </ul>
        </div>
        <div>
            <ul>
                <li><a href="#"><img src="assets/img/gallery01.jpg" alt="쌈봉한 사진 1"></a></li>
                <li><a href="#"><img src="assets/img/gallery02.jpg" alt="쌈뽕한 사진 2"></a></li>
                <li><a href="#"><img src="assets/img/gallery03.jpg" alt="쌈뽕한 사진 3"></a></li>
            </ul>
        </div>
    </div>
</section>

• HTML 구조: section 요소로 공지사항과 갤러리 탭을 포함하고 있습니다.
• 공지사항 탭: 해당 탭을 클릭하면 공지사항 목록이 보여집니다.
• 갤러리 탭: 해당 탭을 클릭하면 이미지 갤러리가 보여집니다.

CSS 스타일링

#main .notice {
    height: 300px;
    padding: 40px;
    background-color: #31e3dd;
    box-sizing: border-box;
}

/* 스타일링을 통해 섹션과 탭, 컨텐츠의 모양과 배치를 지정합니다. */

• CSS 스타일링: 섹션의 모양과 탭, 컨텐츠의 스타일을 지정합니다.

JavaScript (jQuery)

$(function () {
    const tabBtn = $(".title ul li");
    const tabCont = $(".cont > div");

    tabCont.hide().eq(0).show(); // 초기에 첫 번째 컨텐츠 보이기

    tabBtn.click(function (e) {
        e.preventDefault();
        const index = $(this).index();

        tabCont.hide().eq(index).show(); // 클릭한 탭 컨텐츠 보이기
        $(this).addClass("active").siblings().removeClass("active"); // 활성 탭 스타일 적용
    });
});

• JavaScript(jQuery): 탭 동작을 구현합니다.
  • tabBtn은 탭 버튼 요소들을 나타내며, tabCont는 컨텐츠 요소들을 나타냅니다.
  • tabCont.hide().eq(0).show();는 초기에 첫 번째 컨텐츠를 보여줍니다.
  • tabBtn.click(...)은 탭 버튼을 클릭했을 때의 동작을 정의합니다.
    • 클릭한 탭에 해당하는 컨텐츠를 보여주고, 다른 탭은 숨깁니다.
    • 클릭한 탭에 active 클래스를 추가하여 활성 탭 스타일을 적용하고, 다른 탭에서는 active 클래스를 제거합니다.

상호작용

• 사용자가 탭을 클릭하면 tabBtn.click(...)에 의해 클릭한 탭에 해당하는 컨텐츠가 보여지고, 활성 탭 스타일이 적용됩니다.
• tabBtn과 tabCont를 통해 각 탭과 컨텐츠를 제어하고, 이를 jQuery의 click 이벤트를 통해 상호작용합니다.
• HTML의 구조와 CSS의 스타일링을 통해 디자인된 요소들이 JavaScript(jQuery)를 통해 동적으로 제어되어 사용자와 상호작용합니다.

이렇게 HTML, CSS, JavaScript(jQuery)가 서로 협력하여 탭 기능을 완성하고 사용자와의 인터랙션을 제공합니다.

이렇게 간단하게 jQuery를 이용해서 상호작용 애니메이션을 구현했습니다.

오늘도 필자의 부족한 글 읽어주셔서 감사합니다.