📌 KEY POINT
💚 웹디자인기능사 실기 기출문제!
💚 메뉴 click 시, data 속성이 일치하는 콘텐츠 노출
💚 html5의 data-* 속성을 통해 사용자 정의 데이터를 HTML 요소에 저장
👉🏻 웹디자인기능사 실기 "탭메뉴" 문제 미리보기
🩵 실제 시험지에 각 탭을 클릭(Click) 시 해당 탭에 대한 내용이 보여야 한다. 라고 명시되어있다.
👉🏻 마크업은 이렇게! (HTML5)
🩵 메뉴 영역과 콘텐츠 영역을 분리하여 마크업
🩵 정확한 매칭을 위해 data-* 속성을 직접적으로 작성
🔹 data-tab=".notice" : tab이라는 이름으로 .notice라는 데이터를 저장 (메뉴 요소에 명시)
🔹 데이터 값을 토대로 콘텐츠 요소의 id/class 속성 부여
🔹 데이터 값 앞에 ./#을 명시하는 이유이기도 함!
<body>
<div class="container">
<!-- 메뉴 --!>
<ul class="menu-list">
<li class="menu-item">
<a href="#" class="link-menu" data-tab=".notice">공지사항</a>
</li>
<li class="menu-item">
<a href="#" class="link-menu" data-tab=".gallery">갤러리</a>
</li>
</ul>
<!-- 콘텐츠 --!>
<div class="notice">
<!-- 중략 --!>
</div>
<div class="gallery">
<!-- 중략 --!>
</div>
</div>
</body>👉🏻 스크립트는 이렇게! (jQuery)
🩵 click() 메서드를 활용한 클릭 이벤트 작성
🔹 .data() : HTML5의 data-* 속성에 저장된 데이터 읽기, 추가, 수정
🔹 JS ES6에서는 dataset이라는 프로퍼티를 사용하여 동일하게 작성할 수 있다.
🩵 if(data) : .notice, .gallery라는 문자열로 반환되며, 해당 값의 존재 여부를 true/false로 반환
🔹 true이면, show 클래스 추가
🔹 false이면, show 클래스 제거
<script>
$(".link-menu").click(function(e){
e.preventDefault(); /* 기본 링크이동 동작 방지*/
$(".link-menu").removeClass('show'); /* 모든 메뉴의 .show 제거(초기값) */
const data = $(this).data('tab'); /* tab 이름의 data를 찾아 변수에 저장*/
if(data){
$(data).addClass('show');
}else{
$(data).removeClass('show');
}
});
</script>👉🏻 스타일은 이렇게! (CSS3)
🩵 콘텐츠 요소에 show 클래스가 추가되면 display:block;
🩵 콘텐츠 요소에 show 클래스가 제거되면 display:none; (기본값)
🥨 한 줄 기록
💜 몇 년전, 국비 교육 받았을 때 index를 매칭시키는 방법으로 배웠었는데 알고보니 이 방법이 제일 비효율적이고 절대 사용해서는 안되는 방법이라는 것을 알게되었다.
이유는 메뉴나 콘텐츠 순서를 직접적으로 매칭시켜야하고, 변경될 경우 html 구조도 수정이 필요하기 때문이다.
가장 효율적인 방법으로 다시 배웠고 숙지했으니 다행바리스타..☆
