1. 탭 소개
- 여러 문서 또는 패널을 하나의 창에 두고 전환하여 볼 수 있도록 한 인터페이스
- 탭의 경우, 선택한 메뉴의 연관된 콘텐츠가 페이지 이동 없이 내용을 바로 살펴볼 수 있다.
2. 탭 제작
- 주요 기능
3개의 탭 목록, 탭 패널
탭 목록의 간격은 모두 동일
선택된 탭 목록은 선택 시 볼드 처리 및 하단 라인 제거
탭 패널 박스 영역 최소 높이 적용
탭 패널 상단 라인 제거
탭 패널 콘텐츠 선택 시 볼드 처리
- 스타일 정보
탭 목록 - 높이: 50px
탭 목록 - 폰트: 16px/#999, 라인: 1px/#eee
탭 목록 (오버/활성화 시) - 폰트: 16px/bold/#000
탭 패널 - 높이(min): 350px, 라인: 1px/#eee
탭 패널 콘텐츠 - 폰트: 14px/#333 (1줄 말줄임)
탭 패널 콘텐츠(오버 시) - 폰트: 14px/bold
- 주요 태그 및 속성
HTML
div, ul, li, a
CSS
display, position, border, margin, padding
table-layout, box-sizing, text-align, :hover
1) HTML 실습
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="tab.css">
<title>탭 실습</title>
</head>
<body>
<div class="tab_wrap">
<!-- 탭 목록 -->
<ul class="tab">
<!-- 탭 목록 활성화 클래스 active 추가 -->
<li class="tab_item active">
<button type="button" class="tab_btn">인기순</button>
</li>
<li class="tab_item">
<button type="button" class="tab_btn">조회순</button>
</li>
<li class="tab_item">
<button type="button" class="tab_btn">날짜순</button>
</li>
</ul>
<!-- 인기순 탭 패널 wrap -->
<!-- 탭 패널 활성화 클래스 active 추가 -->
<div class="tab_panel_wrap active">
<h3>인기순 콘텐츠</h3>
<!-- 탭 패널 -->
<ol class="tab_panel">
<li class="panel_item"><a href="#" class="item_link">1. 서울~런던 30분 만에 도착…장거리 로켓 여행, 2030년 내 가능</a></li>
<li class="panel_item"><a href="#" class="item_link">2. 웬만해선 안 죽는다는 '물곰'에게서 극한생존 열쇠 찾는다</a></li>
<li class="panel_item"><a href="#" class="item_link">3. 애플, '에어팟 2세대' 발표</a></li>
<li class="panel_item"><a href="#" class="item_link">4. 한국어 지원하는 미승인 성인게임물 범람</a></li>
<li class="panel_item"><a href="#" class="item_link">5. [이슈+] "혁신없는 가격인상"…에어팟2, 애플 충성고객마저 떠난다</a></li>
<li class="panel_item"><a href="#" class="item_link">6. KAIST, 세탁 가능한 입는 디스플레이 개발</a></li>
<li class="panel_item"><a href="#" class="item_link">7. "세계 최초 5G 상용화"…삼성 '갤럭시S10 5G' 다음달 5일 출시</a></li>
<li class="panel_item"><a href="#" class="item_link">8. 중국업체, 국산 배터리 탑재 전기차 5대 형식승인 신청</a></li>
<li class="panel_item"><a href="#" class="item_link">9. 美 마이크론 '이례적' D램·낸드 감산…메모리 업황 회복 기대</a></li>
<li class="panel_item"><a href="#" class="item_link">10. 아흔살 의사의 건강비결은 ‘매일 15분 맨손 운동’</a></li>
</ol>
</div>
<!-- 조회순 탭 패널 wrap -->
<div class="tab_panel_wrap">
<h3>조회순 콘텐츠</h3>
<!-- 탭 패널 -->
<ol class="tab_panel">
<li class="panel_item"><a href="#" class="item_link">1. 서울~런던 30분 만에 도착…장거리 로켓 여행, 2030년 내 가능</a></li>
<li class="panel_item"><a href="#" class="item_link">2. 웬만해선 안 죽는다는 '물곰'에게서 극한생존 열쇠 찾는다</a></li>
<li class="panel_item"><a href="#" class="item_link">3. 애플, '에어팟 2세대' 발표</a></li>
<li class="panel_item"><a href="#" class="item_link">4. 한국어 지원하는 미승인 성인게임물 범람</a></li>
<li class="panel_item"><a href="#" class="item_link">5. [이슈+] "혁신없는 가격인상"…에어팟2, 애플 충성고객마저 떠난다</a></li>
</ol>
</div>
<!-- 날짜순 탭 패널 wrap -->
<div class="tab_panel_wrap">
<h3>날짜순 콘텐츠</h3>
<!-- 탭 패널 -->
<ol class="tab_panel">
<li class="panel_item"><a href="#" class="item_link">1. 서울~런던 30분 만에 도착…장거리 로켓 여행, 2030년 내 가능</a></li>
<li class="panel_item"><a href="#" class="item_link">2. 웬만해선 안 죽는다는 '물곰'에게서 극한생존 열쇠 찾는다</a></li>
<li class="panel_item"><a href="#" class="item_link">3. 애플, '에어팟 2세대' 발표</a></li>
<li class="panel_item"><a href="#" class="item_link">4. 한국어 지원하는 미승인 성인게임물 범람</a></li>
<li class="panel_item"><a href="#" class="item_link">5. [이슈+] "혁신없는 가격인상"…에어팟2, 애플 충성고객마저 떠난다</a></li>
<li class="panel_item"><a href="#" class="item_link">6. KAIST, 세탁 가능한 입는 디스플레이 개발</a></li>
<li class="panel_item"><a href="#" class="item_link">7. "세계 최초 5G 상용화"…삼성 '갤럭시S10 5G' 다음달 5일 출시</a></li>
<li class="panel_item"><a href="#" class="item_link">8. 중국업체, 국산 배터리 탑재 전기차 5대 형식승인 신청</a></li> </ol>
</div>
</div>
</body>
</html>2) CSS 실습
@charset "UTF-8";
/* 기본 스타일 */
body {
font-family: '나눔고딕', NanumGothic, Dotum, '돋움', sans-serif;
font-size: 14px;
line-height: 16px;
}
body, ul, ol, li, div, a, button {
margin:0;
padding:0;
}
ul, ol {
list-style:none;
}
a {
color: inherit;
text-decoration: none;
}
/* 탭 제작 */
.tab_wrap {
width: 300px;
margin: 20px auto 0;
}
/* float 해제 */
.tab:after {
display: block;
content: '';
clear: both;
}
.tab_item {
float: left;
}
.tab_btn {
width: 100px;
height: 50px;
font-size: 16px;
color: #999;
background-color: transparent;
border: 1px solid #eee;
outline: 0;
cursor: pointer;
}
.tab_item + .tab_item .tab_btn {
width: 101px;
margin-left: -1px;
}
/* 탭 목록 오버 시, 활성화 시 효과 */
.tab_item .tab_btn:hover,
.tab_item.active .tab_btn {
font-weight: bold;
color: #000;
border-bottom: 0; /* 하단 라인 감추기 */
}
.tab_panel_wrap {
display: none; /* 탭 패널은 기본 비노출 처리 */
}
.tab_panel_wrap.active {
display: block; /* 활성화 시 탭 패널 노출 처리 */
}
.tab_panel_wrap {
min-height: 350px;
padding: 20px;
border: 1px solid #eee;
border-top: 0; /* 상단 라인 감추기 */
box-sizing: border-box;
}
.tab_panel_wrap h3 {
/* 요소 감추기 속성은 blind 클래스로 대체 가능(HTML&CSS 활용>IR기법 강좌 참고) */
position: absolute;
z-index: -1;
color: transparent;
}
.item_link {
display: block;
overflow: hidden;
font-size: 14px;
line-height: 30px;
color: #333;
white-space: nowrap;
text-overflow: ellipsis;
}
.panel_item:hover .item_link {
font-weight: bold;
}-
외곽선 감추기 :
border: 0을 사용하여 외곽선을 감출 수 있다. -
텍스트 말줄임 : 한 줄 말줄임 처리를 하기 위해 고정 너비 값을 입력한 후 text-overflow, overflow, white-space 속성을 사용한다.
-
박스 높이 고정 : 탭 패널 박스의 최소 높이를 유지하기 위해
min-height: 350px를 추가하고, 여백과 보더의 값이 모두 350px 안에 포함될 수 있도록box-sizing: border-box속성을 적용한다.
I can be your Genie🧞♀️ How ‘bout Aladdin? 🧞♂️