2.HTML&CSS(6)タブの利用
1.タブの概要
2.タブ作成
3つのタブのリスト、タブパネル
タブリスト内のすべての間隔は同じです.
選択したタブのリストは、選択したときに処理され、下部の線が削除されます.
オプションカードパネルボックス領域の最小高さを適用
オプションカードパネル上部の行を削除
オプションカードパネルの内容を選択する際の一括処理
タブリスト-高さ:50 px
ラベルリスト-フォント:16 px/#999、行:1 px/#eee
ラベルリスト(上書き/アクティブ化)-フォント:16 px/bold/#000
オプションカードパネル-高さ(最小):350 px、行:1 px/#eee
オプションカードパネルの内容-フォント:14 px/#333(1行省略)
オプションカードパネルの内容(上書き)-フォント:14 px/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を追加し、box-sizing: border-boxプロパティを適用して、枠と枠の値を350 pxに含めます.Reference
この問題について(2.HTML&CSS(6)タブの利用), 我々は、より多くの情報をここで見つけました https://velog.io/@imyourgenie/2.-HTMLCSS의-활용-6-탭テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol