[웹 UI 개발] 탭

2023. 3. 21. 15:27

본문

 

탭은 메인 영역 또는 aside 영역에서 많이 사용되고 있는 UI 요소 중 하나이다.

탭과 내비게이션은 서로 비슷하지만 차이가 있다.

사용자가 탭 또는 내비게이션 메뉴를 클릭했을 때 내비게이션의 경우 다른 페이지로 이동한다.

하지만 탭의 경우에는 선택한 메뉴와 연관된 콘텐츠가 페이지 이동 없이 나타나게 된다.

 

예시

실습

 

아래 조건에 맞는 탭을 제작.

  • 3개의 탭 목록, 탭 패널
  • 탭 목록의 간격은 모두 동일
  • 선택된 탭 목록은 선택 시 볼드 처리 및 하단 라인 제거
  • 탭 패널 박스 영역 최소 높이 적용
  • 탭 패널 상단 라인 제거
  • 탭 패널 콘텐츠 선택 시 볼드 처리

 

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8">
        <title>탭</title>
        <link rel="stylesheet" href="css/tab.css">
    </head>
    <body>
        <div class="tab_wrap">
            <ul class="tab">
                <li class="tab_item active">
                    <button type="button" name="button" class="tab_btn">인기순</button>
                </li>
                <li class="tab_item">
                    <button type="button" name="button" class="tab_btn">조회순</button>
                </li>
                <li class="tab_item">
                    <button type="button" name="button" class="tab_btn">날짜순</button>
                </li>
            </ul>
            <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>
            <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>
            <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>

 

/*tab.css*/

@charset "UTF-8";

body {
    font-family: '나눔고딕', NanumGothic, Dotum, '돋움', sans-serif;
}

body, ul, ol, li, div, a {
    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_itme .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 {
    position: absolute;
    z-index: -1;
    color: transparent;
}

.panel_item .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;
}

 

브라우저 화면

 

탭 메뉴는 클릭 시 페이지 이동이 필요없기 때문에 <a> 태그가 아닌 <button> 태그로 구현한다.

제목 태그인 <h3> 태그는 웹 접근성을 위해 추가한다.

 

tab_item 클래스의 요소를 "float: left;"로 설정해서 가로로 표현되도록 한다. 그 후 tab_wrap 클래스 요소에 가상요소 after를 추가하여 다른 요소들이 float의 영향을 받지 않도록 한다("clear: both;").

 

tab_btn 클래스의 요소들에 border를 주게 되면 서로 겹치지 않아 중간 테두리가 굵어 보인다.

.tab_item + .tab_item .tab_btn {margin: -1px;}로 서로 겹치게 수정한다.

이렇게 되면 탭 버튼들의 총 width가 298px이 되기 때문에 "width: 101px;"을 추가해서 총 300px이 되게끔 수정한다.

 

tab_panel_wrap은 최소 길이 350px을 맞추기 위해 "box-sizing: border-box;"로 수정한다.

이 속성을 추가하면 border와 padding이 요소의 길이에 영향을 주지 않게된다.

 

웹 접근성을 위해 추가한 <h3> 태그는 숨겨준다.

참고 https://cheolyong.tistory.com/230

 

[웹 UI 개발] IR 기법

IR은 Image Replacement의 약자이며, 이미지를 볼 수 없는 사용자에게 적절한 텍스트를 제공하는 것을 의미한다. 태그의 alt 속성 값이 너무 길거나 CSS background 속성을 사용하여 처리한 의미있는 이미

cheolyong.tistory.com

 

텍스트 말줄임을 위해 overflow, white-space, text-overflow 속성을 사용한다.

"text-overflow: ellipsis;"는 말줄임 표시(...)이 나오도록 하는 속성이다.

"overflow: hidden;"는 요소를 벗어난 텍스트가 보이지 않도록 하는 속성이다.

"white-space: nowrap;"은 텍스트가 요소를 벗어났을 때 자동 말줄임이 되는 것을 방지하기 위한 속성이다.

부스트코스의 강의 내용을 정리한 포스트입니다.

https://www.boostcourse.org/web344

 

웹 UI 개발

부스트코스 무료 강의

www.boostcourse.org

'공부 > 웹 UI 개발' 카테고리의 다른 글

[웹 UI 개발] 이미지 리스트 - 1 / 이미지 리스트 정렬  (0) 2023.03.22
[웹 UI 개발] 이미지 리스트 - 0  (0) 2023.03.22
[웹 UI 개발] 메뉴 - 2 / 2단 메뉴  (1) 2023.03.21
[웹 UI 개발] 메뉴 - 1 / 1단 메뉴  (0) 2023.03.21
[웹 UI 개발] 메뉴 - 0  (0) 2023.03.21

BELATED ARTICLES

more

티스토리툴바