CSS 탭은 탐색하기 쉬운 한 곳에서 관련 정보를 표시하는 데 정말 좋습니다. 본질적으로 레시피 상자나 바인더에서 볼 수 있는 탭 구분선처럼 보입니다. 다음은 탭 탐색을 사용하는 웹사이트의 몇 가지 예입니다.
- Southwest Airlines는 탭 탐색을 사용하여 사용자가 항공편 체크인, 항공편 예약 또는 예약에 호텔 추가 사이를 탐색할 수 있도록 합니다.
- Enterprise는 탐색에 탭을 사용하여 사용자가 임대 또는 구매를 결정하고 다른 서비스에 대해 알아볼 수 있도록 합니다.
이 두 사이트를 관찰하면서 사이트에서 이러한 UI 구성 요소를 사용하는 장점이 무엇인지 생각해 보십시오. 어떤 문제를 해결합니까? 탭 탐색은 어떤 유형의 정보에 적합합니까?
텍스트나 정보를 의미 있는 구성 요소로 구성하고 너무 많은 공간을 차지하지 않고 화면에 표시하는 UI 구조에 도달해야 하는 경우 탭 탐색이 현명한 선택입니다. JavaScript, jQuery 및/또는 Bootstrap을 사용하면서 탭 탐색에 대해 더 자세히 이야기할 것이지만 HTML과 순수 CSS만 있으면 사용할 수 있는 구현도 있습니다. 설정을 살펴보겠습니다.
HTML 설정:
계속해서 프로젝트의 기본 컨테이너 역할을 할 본문 내부의 컨테이너로 상용구 HTML을 설정하십시오. class 속성에서 원하는 대로 부를 수 있지만 저는 class=”tabs”라고 부를 것입니다. . 지금까지 HTML은 다음과 같아야 합니다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS Tabs</title> <style> /* No CSS to display yet */ </style> </head> <body> <div class="tabs"></div> <body> </html>
“tabs” <div> 내부 , 또 다른 4개의
를 삽입하고 각각을
tab 클래스로 호출합니다. . 이것은 우리가 오늘 작성할 4개의 탭 각각을 나타냅니다. 여기에는 입력, 탭 레이블 및 탭 콘텐츠가 포함됩니다. 이들 모두를 위한 빈 컨테이너를 만들어 봅시다:<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Tabs</title>
<style> /* No CSS to display yet */ </style>
</head>
<body>
<div class="tabs">
<div class="tab">
/* THIS IS OUR PLAN IN ACTION*/
/*input */
<input type="radio" id="tab-1" name="tab-group-1" checked/>
/*label for input */
<label for="tab-1">Label 1</label>
/* content */
<div class="content">Our content will go here</div>
</div>
<div class="tab">
<input type="radio" id="tab-2" name="tab-group-1" checked/>
<label for="tab-2">Label 2</label>
<div class="content gryffindor">Our content will go here</div>
</div>
<div class="tab">Try these two on your own! Follow the same convention as above for your class names and ids - I am using a HP theme, but name them whatever you'd like!</div>
<div class="tab"></div>
</div>
<body>
</html>
콘텐츠 클래스 이름 안에는 콘텐츠가 있습니다. 원하는 콘텐츠를 사용할 수 있지만 하나의 탭에서 관련 콘텐츠를 사용하는 것이 일반적입니다.
CSS 시작 시간:
CSS를 작성할 때 가장 큰 컨테이너에서 시작하여 가장 작은 컨테이너로 이동합니다. 다음은 작동하도록 하기 위해 수행해야 하는 최소 작업입니다.
참가자의 81%는 부트캠프에 참석한 후 기술 직업 전망에 대해 더 자신감을 느꼈다고 말했습니다. 지금 부트캠프에 참여하십시오.
부트캠프 졸업생은 부트캠프 시작부터 첫 직장을 찾는 데까지 6개월도 채 걸리지 않았습니다.
- 와일드 카드 선택기를 box-sizing:border-box로 설정합니다.
- 메인 컨테이너에서 display 속성을 flex로 설정하고 position을 relative로 설정해야 합니다. 표시:flex를 사용하면 탭이 한 줄로 나란히 놓일 수 있으며 상대적 위치는 기본적으로 탭의 내용을 포함하는 경계 또는 울타리 역할을 합니다.
이 시점에서 라디오 버튼과 일부 콘텐츠가 있는 4개의 텍스트 블록으로 보이는 것을 볼 수 있습니다. 다음으로 체크된 블록을 표시하고 다른 블록을 숨길 수 있는 방법을 찾아야 합니다.
- .tab 컨테이너에서 레이블의 스타일을 설정합니다.
- 원하는 색상의 1px 단색 테두리
- 패딩:5px, 10px – 레이블 텍스트 주위에 공간을 추가합니다.
- Border-radius 10px, 10px, 0px, 0px – 이렇게 하면 레이블이 기존 탭처럼 보이게 됩니다.
지금 작업을 확인하면 레이블 왼쪽에 원형 라디오 버튼이 있는 것을 볼 수 있습니다. 따라서 전통적인 탭처럼 보이지만 여전히 버튼의 checked 속성을 유지하려면 라디오 버튼의 원형 부분을 숨겨야 합니다.
- 실제로 버튼을 선택하기 위해 .tab [type='radio']를 사용합니다. 숨기기 위해 표시를 없음으로 설정했습니다.
다음으로, 한 번에 하나의 탭만 표시하도록 실제 콘텐츠를 처리해야 합니다.
- 콘텐츠 div를 선택한 다음 위치를 절대로 설정합니다. 절대 위치가 설정되면 div는 상대 부모 내부의 아무 곳에서나 설정할 수 있습니다. 위, 오른쪽, 왼쪽, 아래를 사용하여 상위 div 내부에 원하는 내용을 설정할 수 있습니다. 이 경우 왼쪽 및 오른쪽 속성을 0으로 설정합니다. 또한 테두리를 만들고 배경색을 불투명한 색으로 설정하려고 합니다.
- 선택한 탭의 Z-색인을 설정하면 해당 탭의 패널이 맨 위에 놓입니다. 그렇게 하려면 선택된 버튼과 그 내용을 선택하십시오. 이를 위해 [type='radio']:checked ~ label ~ .content를 사용합니다. CSS의 요소 사이에 있는 "~"는 선택된 라디오 버튼 다음에 발생하는 레이블 요소 다음에 발생하는 콘텐츠 클래스를 원한다는 것을 알려줍니다.
- 활성화된 탭을 표시하려면 [type='radio']:checked ~ label을 다른 배경색으로 설정하세요.
이제 사용자가 각 탭을 클릭하면 다른 패널의 내용을 보지 않고도 성공적으로 한 탭에서 다른 탭으로 이동할 수 있습니다. 이것은 탭 탐색이 작동하도록 하는 데 필요한 최소값입니다. CSS를 가지고 놀면서 스타일을 바꿔보세요! 작동하는 구현은 아래에 코드화되어 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Tabs</title>
<style>
* {
box-sizing: border-box;
}
body {
font-family: 'Roboto';
}
.tabs {
max-width: 700px;
min-height: 100px;
margin: 25px 0;
width: 100%;
display: flex;
/* allows for tabs to be next to each other */
position: relative;
/* relative here contains the width of the content */
}
.tab label {
padding: 5px 10px;
border: 1px solid #ccc;
cursor: pointer;
border-radius: 10px 10px 0 0;
}
.tab [type='radio'] {
display: none;
/* this makes the radio buttons disappear - we are only keeping track if they are checked or not */
}
h3 {
margin: 10px 40px;
}
ul {
list-style-type: none;
}
.content {
padding: 10px;
border-radius: 0px 10px 10px 10px;
position: absolute;
left: 0;
right: 0;
background: white;
border: 1px solid #ccc;
/* the left and right at 0 help the tabs to overlap each other */
}
/* This allows the selected tab to be on top */
[type='radio']:checked ~ label ~ .content {
z-index: 1;
}
[type="radio"]:checked ~ label {
background: lightgrey;
}
/* color scheme for tabs */
[type='radio']:checked ~ #gryffindor {
background: #ec9086;
color: #241806;
}
[type='radio']:checked ~ #ravenclaw {
background: #3054ca;
color: #241806;
}
[type='radio']:checked ~ #slytherin {
background: #089714;
color: #252525;
}
[type='radio']:checked ~ #hufflepuff {
background: #f0d695;
color: #372e29;
}
[type='radio'] ~ #slytherin {
background: #033807;
color: #aaaaaa;
}
[type='radio'] ~ #hufflepuff {
background: #f0c75e;
color: #372e29;
}
[type='radio'] ~ #gryffindor {
background: #9c1203;
color: #e3a000;
}
[type='radio'] ~ #ravenclaw {
background: #0e1a40;
color: #946b2d;
}
.gryffindor {
background: #9c1203;
color: #e3a000;
}
.slytherin {
background: #033807;
color: #aaaaaa;
}
.hufflepuff {
background: #f0c75e;
color: #372e29;
}
.ravenclaw {
background: #0e1a40;
color: #946b2d;
}
</style>
</head>
<body>
<div class="tabs">
<div class="tab">
<input type="radio" id="tab-1" name="tab-group-1" checked/>
<label id="gryffindor" for="tab-1">Gryffindor</label>
<div class="content gryffindor">
<h3>HP Chars in Gryffindor</h3>
<ul class="gryffindor-students">
<li>Harry Potter</li>
<li>Hermione Grainger</li>
<li>Ron Weasley</li>
<li>Albus Dumbledore</li>
<li>Katie Bell</li>
<li>Neville Longbottom</li>
</ul>
</div>
</div>
<div class="tab">
<input type="radio" id="tab-2" name="tab-group-1"/>
<label id="slytherin" for="tab-2">Slytherin</label>
<div class="content slytherin">
<h3>HP Chars in Slytherin</h3>
<ul class="slytherin-students">
<li>Draco Malfoy</li>
<li>Narcissa Black</li>
<li>Lucius Malfoy</li>
<li>Severus Snape</li>
<li>Tom Riddle</li>
<li>Dolores Umbridge</li>
</ul>
</div>
</div>
<div class="tab">
<input type="radio" id="tab-3" name="tab-group-1"/>
<label for="tab-3" id="ravenclaw">Ravenclaw</label>
<div class="content ravenclaw">
<h3>HP Chars in Ravenclaw</h3>
<ul class="ravenclaw-students">
<li>Lisa Turpin</li>
<li>Luna Lovegood</li>
<li>Gilderoy Lockhart</li>
<li>Garrick Ollivander</li>
<li>Padma Patil</li>
<li>Sybil Trelawney</li>
</ul>
</div>
</div>
<div class="tab">
<input type="radio" id="tab-4" name="tab-group-1">
<label for="tab-4" id="hufflepuff">Hufflepuff</label>
<div class="content hufflepuff">
<h3>HP Chars in Hufflepuff</h3>
<ul class="hufflepuff-students">
<li>Cedric Diggory</li>
<li>Newton Scamander</li>
<li>Nymphadora Tonks</li>
<li>Pomona Sprout</li>
<li>Susan Bones</li>
<li>Teddy Lupin</li>
</ul>
</div>
</div>
</div>
</body>
</html>