Post

웹디자인기능사) site A유형 탭메뉴

Posted Updated
Preview Image
By parksohyunnn 9 min read

안녕하세요! 오늘은 웹디자인기능사 사이트 A유형에서 탭메뉴 하는 법에 대해 알아보도록 하겠습니다. 먼저 완성된 이미지부터 보고 오실게요! 스크린샷 2024-05-19 오후 4 41 37 스크린샷 2024-05-19 오후 4 41 31

html 공지사항/갤러리 작업하기

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<section class="info">
    <h3 class="info-menu">
        <a href="#" class="active">공지사항</a> |
        <a href="#">갤러리</a>
    </h3>
    <div class="info-cont">
        <div class="notice">
            <ul>
                <li><a href="#">강원천문대 2023년 휴관일 안내</a><span>2023.05.01</span></li>
                <li><a href="#">강원천문대 2023년 온라인 예매 안내</a><span>2023.05.02</span></li>
                <li><a href="#">강원천문대 휴관일 및 이벤트 안내</a><span>2023.05.03</span></li>
                <li><a href="#">강원천문대 주차장 이용 및 숙박 안내</a><span>2023.05.04</span></li>
            </ul>
        </div>
        <div class="gallery">
            <ul>
                <li><a href="#"><img src="images/gallery01.jpg" alt="독일 천문대"></a></li>
                <li><a href="#"><img src="images/gallery02.jpg" alt="미국 천문대"></a></li>
                <li><a href="#"><img src="images/gallery03.jpg" alt="영국 천문대"></a></li>
            </ul>
        </div>
    </div>
</section>
<!-- //info -->
  • 위의 HTML 코드는 정보 섹션(<section class=”info”>)을 만드는 데 사용됩니다. 이 섹션은 두 가지 주요 부분으로 구성됩니다.
  1. 정보 메뉴(.info-menu): 이 부분은 공지사항과 갤러리로 이동할 수 있는 링크를 포함합니다.
  2. 정보 내용(.info-cont): 이 부분은 선택한 메뉴에 따라 해당하는 내용을 표시합니다. 각 부분에 대한 설명은 다음과 같습니다:

  • 정보 메뉴: <h3 class=”info-menu”> 요소 안에 공지사항과 갤러리로 이동할 수 있는 링크가 포함되어 있습니다. <a> 요소를 사용하여 각 링크를 만들고, .active 클래스는 현재 선택된 메뉴를 강조하기 위해 사용됩니다.

  • 정보 내용: <div class=”info-cont”> 요소 안에는 공지사항과 갤러리 내용이 포함되어 있습니다. 선택된 메뉴에 따라 해당하는 내용이 보여집니다. .notice 클래스는 공지사항을 표시하고, .gallery 클래스는 갤러리 이미지를 표시합니다.

  • 이 HTML 코드를 사용하면 사용자가 정보 섹션에서 공지사항과 갤러리로 쉽게 이동할 수 있습니다. CSS를 추가하여 디자인을 개선하고, JavaScript를 사용하여 메뉴를 클릭할 때마다 해당하는 내용을 표시할 수 있습니다.

css 공지사항/갤러리 작업하기

  • CSS 코드를 사용하면 정보 섹션의 디자인이 향상되며, 사용자가 정보를 쉽게 찾고 볼 수 있게 됩니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

/* contents : info */
#contents .info {
    width: 400px;
    height: 200px;
    background-color: #e5f1ff;
    padding: 20px;
    box-sizing: border-box;
}
#contents .info .info-menu {
    margin-bottom: 10px;
}
#contents .info .info-menu a {
    font-size: 24px;
}
#contents .info .info-menu a.active {
    text-decoration: underline;
}
#contents .info .info-cont .notice {
    display: none;
}
#contents .info .info-cont .notice li {
    display: flex;
}
#contents .info .info-cont .notice li a {
    width: 75%;
    font-size: 16px;
    line-height: 1.8;
}
#contents .info .info-cont .notice li a:hover {
    text-decoration: underline;
}
#contents .info .info-cont .notice li span {
    width: 25%;
    font-size: 16px;
    line-height: 1.8;
    text-align: right;
}
#contents .info .info-cont .gallery ul {
    display: flex;
    justify-content: space-between;
}
#contents .info .info-cont .gallery ul li a {
    border: 2px solid transparent;
    display: block;
}
#contents .info .info-cont .gallery ul li a:hover {
    border-color: #0a4288;
}

  • 정보 섹션의 크기와 배경색 지정: #contents .info 선택자를 사용하여 정보 섹션의 크기를 400px * 200px로 지정하고 배경색을 #e5f1ff(연한 파란색)으로 설정합니다.

  • 정보 메뉴 스타일 지정: .info-menu 클래스에는 정보 메뉴의 스타일이 지정됩니다. 여기서는 메뉴 항목의 여백과 링크의 글꼴 크기가 조정됩니다.

  • 활성 메뉴 스타일 지정: 현재 활성화된 메뉴 항목에는 a.active 선택자를 사용하여 밑줄을 추가합니다.

  • 공지사항 스타일 지정: .notice 클래스에는 공지사항 목록의 스타일이 지정됩니다. 각 항목은 가로로 나열되고, 링크와 날짜가 올바른 위치에 표시됩니다. display: none;은 초기에는 공지사항이 표시되지 않도록 숨겨두는 것입니다.

  • 갤러리 스타일 지정: .gallery 클래스에는 갤러리 이미지의 스타일이 지정됩니다. 이미지 간 간격이 조정되고, 마우스를 올리면 테두리 색이 변경됩니다.

제이쿼리 공지사항/갤러리 스크립트 작업하기

  • CSS 코드를 사용하면 정보 섹션의 디자인이 향상되며, 사용자가 정보를 쉽게 찾고 볼 수 있게 됩니다.
1
2
3
4
5
6
7
8
9
10
11

// 탭 메뉴
const tabBtn = $(".info-menu > a");     //탭 버튼 설정
const tabCont = $(".info-cont > div");  //탭 콘텐츠 설정
tabCont.hide().eq(0).show();        //탭 콘텐츠를 숨기고 첫 번째 콘텐츠만 보여줌

tabBtn.on("click", function(){      //버튼을 클릭하면
    const index = $(this).index();      //클릭한 버튼의 번호를 저장

    $(this).addClass("active").siblings().removeClass("active");    //클릭한 버튼에 클래스를 추가하고 나머지는 제거함
    tabCont.eq(index).show().siblings().hide();             //클릭한 버튼 순서에 맞는 콘텐츠에 클래스를 추가하고 나머지는 숨김
});

  • 탭 버튼 및 탭 콘텐츠 설정: $(“.info-menu > a”)와 $(“.info-cont > div”)를 사용하여 탭 버튼과 탭 콘텐츠를 선택합니다.

  • 첫 번째 탭 콘텐츠만 표시: tabCont.hide().eq(0).show();을 사용하여 모든 탭 콘텐츠를 숨기고 첫 번째 콘텐츠만 표시합니다.

  • 탭 버튼 클릭 이벤트 처리: tabBtn.on(“click”, function(){})을 사용하여 탭 버튼이 클릭되었을 때의 동작을 설정합니다. 클릭한 버튼의 인덱스를 저장하고, 클릭한 버튼에 active 클래스를 추가하고 나머지 버튼에서는 이 클래스를 제거합니다. 그리고 클릭한 버튼과 동일한 인덱스의 탭 콘텐츠를 표시하고, 나머지 콘텐츠는 숨깁니다.

  • 이 JavaScript 코드를 사용하면 사용자가 탭을 클릭할 때마다 해당하는 콘텐츠가 표시되고, 다른 콘텐츠는 숨겨지게 됩니다. 이를 통해 사용자는 원하는 정보에 쉽게 접근할 수 있습니다

웹디자인기능사
git github
This post is licensed under CC BY 4.0 by the author.

Trending Tags

git github