💛[부스트코스_웹 UI 개발] 15. 탭

👾·2021년 1월 29일

UI boostcourse frontend

HTML & CSS

목록 보기

15/20

탭 소개

탭 : 사전적 의미로 색인표, 식별표라는 뜻
색인은 목록과 같은 의미로 쓰인다

데이터를 기록할 경우 그 데이터의 이름, 크기 등의 속성과 그 기록 장소등을 표시하는것

즉 참조용의 데이터를 색인표 또는 인덱스라고도 부른다.

탭 UI의 특징

여러 문서 또는 패널을 하나의 창에 두고 전환하여 볼 수 있도록 한 인터페이스.
= 같은 페이지 내에서 탭 메뉴와 그에 연관된 내용을 한정된 영역에서 그에 해당되는 콘텐츠 내용들을 한정된 영역에서 모두 제공을 할 수 있는 장점을 가지고 있는 UI

탭과 내비게이션은 UI가 유사하여 사용시 기능을 헷갈릴 수있다.

탭과 내비게이션의 차이

사용자가 탭 또는 내비게이션을 클릭했을때

내비게이션: 페이지 전환이 되어서 다른 페이지로 이동
탭 : 화면 이동 없이 선택된 탭과 연관된 콘텐츠가 가까운 영역에서 보이게 된다.
따라서 탭의 경우는 한정된 영역에서 여러가지 색인에 맞는 데이터를 같이 한꺼번에 보여줄 수 있는 장점을 갖고 있다.

사용 예시

네이버 뉴스 사이트 -> 가장 많이 본 뉴스
네이버 만화 사이트 -> 인기 급상승 만화, 20대 실시간 인기 만화
네이버 호텔 페이지

탭은 페이지 이동없이 같은 화면 내에서 콘텐츠를 확인할 수 있는 장점이 있기 때문에 네비게이션과 탭 두 UI에 대한 차이를 구분해서 이해하자

탭은 다양한 웹 사이트에서 자주 사용되고 있는 UI이다.

탭 제작

탭의 주요 기능

탭은 탭 목록과 패널 영역으로 구성되어 있다.

탭 목록은 총 3개의 아이템 가짐
탭 목록이 선택되거나 마우스 오버했을때 그에 대한 활성화 표시.
탭 패널 영역에서는 해당 콘텐츠에 해당되는 내용이 최대 10개까지 보여짐
텍스트들은 마우스 오버했을때 효과 적용
다른 목록을 선택했을때도 탭 패널 안에 해당되는 목록의 콘텐츠 정보가 탭 패널 영역 안에서 보여줘야 한다.

스타일 정보

탭 목록
높이 50px
폰트 16px #999
라인 1px #eee
오버/활성화 시 폰트 16px bold #000
탭 패널
높이 최소 350px
라인 1px #eee
콘텐츠 폰트 14px #333 1줄 말줄임
콘텐츠 오버 시 폰트 14px bold

주요 태그 및 스타일

HTML
div, ul, li, a, span
CSS
display, position, border, margin, padding, table-layout, box-sizing, text-align, :hover

<!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>
  <!--tab UI를 감싸는 최상위 부모-->
    <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>

네비게이션은 마우스 클릭 이벤트를 사용하기 위해 앵커로 구조를 만들어서 작업했다면 탭은 버튼 구조 이용.

앵커는 다른 페이지로 이전하는 시맨틱적인 마크업 구조이고, 현재는 같은 페이지 내에서 콘텐츠를 확인하기 위한 용도로 사용하기 때문에 탭에서는 버튼을 쓰는게 시맨틱 마크업 구조에서 더 적합하다.

탭 패널의 타이틀(h3)은 결과물에서는 노출되지 않는 타이틀.
써주는 이유는 접근성 측면에서 탭 목록과 탭 패널이 연결되었다는 의미로 타이틀을 탭 패널안에 넣어주게 된다. 안넣어줘도 결과물에서는 큰 영향을 주진 않지만 좀 더 시맨틱한 마크업 구조에서는 타이틀을 넣는것이 더 좋은 코드 방법.
또한 보통 탭 영역같은 경우는 콘텐츠 내부나 aside 영역에 들어가기 때문에, 보통 h1이나 h2가 사용되는 경우는 드물어서 h3로 타이틀을 넣어준것.

@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; /*전체 탭 UI의 너비를 300px로 고정*/
    margin: 20px auto 0; /*가운데 정렬*/
}
.tab:after { /*float 해제*/
    display: block;
    content: '';
    clear: both;
    /*부모가 자식의 높이값을 인지할 수 있게 만듦*/
}
.tab_item {
    float: left; /*버튼이 하단으로 떨어지는 현상 해결*/
    /*float 선언 -> 반드시 해제하는 습관 들이기*/
}
.tab_btn {
    width: 100px;
    height: 50px;
    font-size: 16px;
    color: #999;
    background-color: transparent; /*기본 버튼 스타일 초기화*/
    border: 1px solid #eee;
    outline: 0; /*기본 버튼 스타일 초기화*/
    cursor: pointer; /*마우스 오버 시 손가락 모양*/
    
    /*원래 border의 값이 너비와 높이에 영향을 미치는데, button의 기본적인 스타일에 box-sizing:border-box가 선언이 되어있으므로 border를 추가해도 전체 너비와 높이값 변하지 않는다.*/
}

.tab_item + .tab_item .tab_btn { 
    width: 101px; /*왼쪽으로 1px씩 이동 -> 우측에 여백 2px 비어보이는 문제 해결*/
    margin-left: -1px; /*border 겹침 현상 해결*/
}

/* 탭 목록 오버 시, 활성화 시 효과 */
.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; /* 상단 라인 감추기. border 겹침 현상 해결 */
    box-sizing: border-box; /* 높이에 border, padding 포함하지 않기 위해*/
}

.tab_panel_wrap h3 {
    /* 요소 감추기 속성은 blind 클래스로 대체 가능(HTML&CSS 활용>IR기법 강좌 참고)  */
    position: absolute;
    z-index: -1;
    color: transparent;
}

.item_link {
    display: block; /*item_link를 감싸고있는 li 영역에 꽉 차게끔 잡기 위해*/
    font-size: 14px;
    line-height: 30px;
    color: #333;
    /*말줄임 처리*/
    overflow: hidden; 
    white-space: nowrap;
    text-overflow: ellipsis;
}

.panel_item:hover .item_link {
    font-weight: bold;
}

한줄 말줄임 처리는 overflow:hidden, white-space:nowrap, text-overflow:ellipsis, display:block 꼭 들어가야함

실무에서는 active클래스를 자바스크립트로 제어함

정리

탭 목록 외곽선 감춤 border:0
텍스트 말줄임
- text-overflow:ellipsis
  ...처리
- overflow:hidden
  텍스트가 넘어가는 경우 해당 영역을 벗어난 텍스트는 보이지 않게끔 처리
- white-space:nowrap
  텍스트가 영역을 넘어갈때 자동 말줄임이 되는 부분 방지

텍스트 말줄임은 공식처럼 사용되므로 3가지 부분 모두 외우기