728x90
탭
탭은 사전적 의미로 색인표 또는 식별표라는 뜻을 가지고 있다
참조용 데이터를 색인표 또는 인덱스라고도 부릅니다.
탭 UI는 인덱스카드와 유사하게 여러 문서 또는 패널을 하나의 창에 두고 전환하여 볼 수 있도록 한 인터페이스
탭과 네비게이션은 비슷하지만 다르다.
네비게이션은 탭을 누르면 다른 화면으로 이동 하는 역할이지만 탭은 화면이동 없이 선택한 탭과 연관된 콘텐츠가 보이는 형식이다.
위 사진과 같은 모양을 많이 보았을 것이다. 각 탭의 제목이 있고 그 제목에 해당하는 내용들이 아래에 나오는 형식이다.
홈페이지를 만들다보면 굉장히 자주나오는 부분이고, 메뉴와 더불어 은근히 만들기 쉬우면서도 어렵다(?)
거기에 접근성까지 +가 된다면 더더욱 어려워지는 것들 중 하나다.
먼저 스스로 작성한 코드를 보자.
html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="11. 0820-tab.css">
<title>Tab 메뉴 실습</title>
</head>
<body>
<div class="wrap">
<ul class="tab">
<!-- 인기순 탭 -->
<li class="tab-list active">
<a href="#none" class="tab-link">인기순</a>
<ol class="tab-panel active">
<li class="tab-panel-list">
<a href="#none" class="tab-panel-link">1. 서울~런던 30분 만에 도착…장거리 로켓 여행, 2030년 내 가능</a>
</li>
<li class="tab-panel-list">
<a href="#none" class="tab-panel-link">2. 웬만해선 안 죽는다는 '물곰'에게서 극한생존 열쇠 찾는다</a>
</li>
<li class="tab-panel-list">
<a href="#none" class="tab-panel-link">3. 애플, '에어팟 2세대' 발표</a>
</li>
<li class="tab-panel-list">
<a href="#none" class="tab-panel-link">4. 한국어 지원하는 미승인 성인게임물 범람</a>
</li>
<li class="tab-panel-list">
<a href="#none" class="tab-panel-link">5. [이슈+] "혁신없는 가격인상"…에어팟2, 애플 충성고객마저 떠난다</a>
</li>
<li class="tab-panel-list">
<a href="#none" class="tab-panel-link">6. KAIST, 세탁 가능한 입는 디스플레이 개발</a>
</li>
<li class="tab-panel-list">
<a href="#none" class="tab-panel-link">7. "세계 최초 5G 상용화"…삼성 '갤럭시S10 5G' 다음달 5일 출시</a>
</li>
<li class="tab-panel-list">
<a href="#none" class="tab-panel-link">8. 중국업체, 국산 배터리 탑재 전기차 5대 형식승인 신청</a>
</li>
<li class="tab-panel-list">
<a href="#none" class="tab-panel-link">9. 美 마이크론 '이례적' D램·낸드 감산…메모리 업황 회복 기대</a>
</li>
<li class="tab-panel-list">
<a href="#none" class="tab-panel-link">10. 아흔살 의사의 건강비결은 ‘매일 15분 맨손 운동’</a>
</li>
</ol>
</li>
<!-- 조회순 탭 -->
<li class="tab-list">
<a href="#none" class="tab-link">조회순</a>
<ol class="tab-panel">
<li class="tab-panel-list">
<a href="#none" class="tab-panel-link">5. [이슈+] "혁신없는 가격인상"…에어팟2, 애플 충성고객마저 떠난다</a>
</li>
<li class="tab-panel-list">
<a href="#none" class="tab-panel-link">5. [이슈+] "혁신없는 가격인상"…에어팟2, 애플 충성고객마저 떠난다</a>
</li>
<li class="tab-panel-list">
<a href="#none" class="tab-panel-link">5. [이슈+] "혁신없는 가격인상"…에어팟2, 애플 충성고객마저 떠난다</a>
</li>
<li class="tab-panel-list">
<a href="#none" class="tab-panel-link">5. [이슈+] "혁신없는 가격인상"…에어팟2, 애플 충성고객마저 떠난다</a>
</li>
<li class="tab-panel-list">
<a href="#none" class="tab-panel-link">5. [이슈+] "혁신없는 가격인상"…에어팟2, 애플 충성고객마저 떠난다</a>
</li>
<li class="tab-panel-list">
<a href="#none" class="tab-panel-link">5. [이슈+] "혁신없는 가격인상"…에어팟2, 애플 충성고객마저 떠난다</a>
</li>
<li class="tab-panel-list">
<a href="#none" class="tab-panel-link">5. [이슈+] "혁신없는 가격인상"…에어팟2, 애플 충성고객마저 떠난다</a>
</li>
<li class="tab-panel-list">
<a href="#none" class="tab-panel-link">5. [이슈+] "혁신없는 가격인상"…에어팟2, 애플 충성고객마저 떠난다</a>
</li>
<li class="tab-panel-list">
<a href="#none" class="tab-panel-link">5. [이슈+] "혁신없는 가격인상"…에어팟2, 애플 충성고객마저 떠난다</a>
</li>
<li class="tab-panel-list">
<a href="#none" class="tab-panel-link">5. [이슈+] "혁신없는 가격인상"…에어팟2, 애플 충성고객마저 떠난다</a>
</li>
<li class="tab-panel-list">
<a href="#none" class="tab-panel-link">5. [이슈+] "혁신없는 가격인상"…에어팟2, 애플 충성고객마저 떠난다</a>
</li>
<li class="tab-panel-list">
<a href="#none" class="tab-panel-link">5. [이슈+] "혁신없는 가격인상"…에어팟2, 애플 충성고객마저 떠난다</a>
</li>
<li class="tab-panel-list">
<a href="#none" class="tab-panel-link">5. [이슈+] "혁신없는 가격인상"…에어팟2, 애플 충성고객마저 떠난다</a>
</li>
<li class="tab-panel-list">
<a href="#none" class="tab-panel-link">5. [이슈+] "혁신없는 가격인상"…에어팟2, 애플 충성고객마저 떠난다</a>
</li>
<li class="tab-panel-list">
<a href="#none" class="tab-panel-link">5. [이슈+] "혁신없는 가격인상"…에어팟2, 애플 충성고객마저 떠난다</a>
</li>
<li class="tab-panel-list">
<a href="#none" class="tab-panel-link">5. [이슈+] "혁신없는 가격인상"…에어팟2, 애플 충성고객마저 떠난다</a>
</li>
</ol>
</li>
<!-- 날짜순 탭 -->
<li class="tab-list">
<a href="#none" class="tab-link">날짜순</a>
<ol class="tab-panel">
<li class="tab-panel-list">
<a href="#none" class="tab-panel-link">7. "세계 최초 5G 상용화"…삼성 '갤럭시S10 5G' 다음달 5일 출시</a>
</li>
<li class="tab-panel-list">
<a href="#none" class="tab-panel-link">7. "세계 최초 5G 상용화"…삼성 '갤럭시S10 5G' 다음달 5일 출시</a>
</li>
<li class="tab-panel-list">
<a href="#none" class="tab-panel-link">7. "세계 최초 5G 상용화"…삼성 '갤럭시S10 5G' 다음달 5일 출시</a>
</li>
</ol>
</li>
</ul>
</div>
</body>
</html>css
@charset "utf-8";
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
a{
text-decoration: none;
color: #000;
}
/* reset.css End */
/* start */
/* 전체 tap 영역 */
.tab{
width: 300px;
margin: 50px auto 0;
display: table;
table-layout: fixed;
position: relative;
}
/* tap의 제목 영역 */
.tab-list{
display: table-cell;
text-align: center;
height: 50px;
line-height: 50px;
}
/* active가 있는 tap 제목영역 */
.tab-list.active .tab-link{
font-weight: bold;
color: #000;
/* border-bottom: 0; */
border-bottom: 1px solid #fff;
}
/* a태그 스타일 */
.tab-link{
display: block;
font-size: 16px;
color: #999;
border: 1px solid #eee;
}
/* border값 중복제거 */
.tab-list + .tab-list .tab-link{
margin-left: -1px;
}
/* 마우스오버시 스타일 */
.tab-link:hover{
font-weight: bold;
color: #000;
}
/* 각 탭에 해당하는 내용들, 기본 display : none;으로 선언 */
.tab-panel{
display: none;
min-height: 350px;
text-align: left;
position: absolute;
box-sizing: border-box;
padding: 25px;
border: 1px solid #eee;
border-top: none;
left: 0;
right: 0;
}
/* active 를 가진 내용만 블럭 */
.tab-panel.active{
display: block;
}
/* 각 내용의 높이값 조절 */
.tab-panel-list{
height: 30px;
line-height: 30px;
}
/* 글 줄임 처리를 위한 코드 */
.tab-panel-link{
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
display: block;
font-size: 14px;
color: #333;
}
/* 마우스오버시 스타일 */
.tab-panel-link:hover{
font-weight: bold;
}스스로 짠 코드는 접근성을 고려해서 만들었다. 키보드 tab키로 모든 영역의 포커스를 잡을 수 있고 이동할 수 있어야 하기 때문에 논리적 순서대로 탭의 제목 -> 그 탭의 내용 -> 다음 탭의 제목 순으로 마크업 하였다.
순서가 예를 들면 인기순 -> 인기순 내용 -> 조회순 -> 조회순 내용 -> 날짜순 ~ 이런 순서이다.
그리고 부스트코스의 코드를 살펴보자
html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="11.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>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;
}
.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;
}버튼으로 tap의 제목 부분을 마크업 한 후 , 내용 부분은 따로 제작하였고 접근성을 위해 h3 태그로 설명을 작성하였다.
깔끔한 코드이나 접근성 기준에 논리적이동 및 모든 부분은 포커스가 잡혀야 한다는 기준이 있는데 , 탭의 제목 부분에 outline : 0; 을 준 부분과 탭 제목을 모두 포커스 후 내용을 알려주는 부분이 접근성기준에 위배되지않는지 궁금한다.
문의는 해놓은 상황이니 답변이 나온다면 포스팅해야겠다.
결과는 동일하게 나온다.
아참 , 부스트코스의 코드는 각 탭의 제목 (인기순,조회순,날짜순)에 마우스 오버시 border-bottom: 0; 임으로 아래 border가 사라진다. 옥의 티 인것같다 !
* 부스트코스 UI 교육을 듣고 개인적으로 정리한 내용입니다.
728x90
'HMTL & CSS' 카테고리의 다른 글
| 썸네일 이미지 목록 (0) | 2020.08.22 |
|---|---|
| 2단 배열 메뉴 (0) | 2020.08.21 |
| 기본 메뉴바 만들기 (0) | 2020.08.19 |
| fixed layout / 따라오는 메뉴 (0) | 2020.08.19 |
| 레이아웃 - 2단 레이아웃 ( layout ) (0) | 2020.08.19 |