CSS만으로 탭 전환을 만드는 방법을 소개해 드리겠습니다.
요즘에는 CSS를 사용하기에 따라서 할 수 있는 일들이 굉장히 많아지고 있기 때문에 탭전환 등 움직임이 있는 것들도 자바 스크립트를 사용하지 않고 만들 수 있습니다.
HTML 해설
자, 그러면 내용에 있는소스코드를 한번 살펴보도록 하겠습니다.
먼저, 이번 전체 HTML은 이렇게 되어있습니다.
<div class="tabs">
<input id="all" type="radio" name="tab_item" checked>
<label class="tab_item" for="all">Tab 1</label>
<input id="programming" type="radio" name="tab_item">
<label class="tab_item" for="programming">Tab 2</label>
<input id="design" type="radio" name="tab_item">
<label class="tab_item" for="design">Tab 3</label>
<div class="tab_content" id="all_content">
henojiwu@gmail.com
</div>
<div class="tab_content" id="programming_content">
https://velog.io/@henotony
</div>
<div class="tab_content" id="design_content">
Thanks a lot
</div><_input>(라디오 버튼) 과 <_label>태그가 세트로 1 개의 탭이 완성됩니다.
<_input>(라디오 버튼)에, 탭의 「온/오프」 기능(그 탭이 선택되고 있는지 없는지)을 설정해,<_label>쪽에서 탭의 외형을 정돈합니다.
중요한 점은 <_input>의 id 속성과 <_label>의 for 속성이 같다는 것입니다.
for 속성의 내용물이 <_input>의 id 속성과 같아야 <_label>이 <_input>로 연결됩니다.
그 다음 CSS를 보도록 하겠습니다.
CSS의 전체:
/* 탭 전체 스타일 */
.tabs {
margin-top: 50px;
padding-bottom: 40px;
background-color: #ffffff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
width: 700px;
margin: 0 auto;}
/* 탭 스타일 */
.tab_item {
width: calc(100%/3);
height: 50px;
border-bottom: 3px solid #333333;
background-color: #f8f8f8;
line-height: 50px;
font-size: 16px;
text-align: center;
color: #333333;
display: block;
float: left;
text-align: center;
font-weight: bold;
transition: all 0.2s ease;
}
.tab_item:hover {
opacity: 0.75;
}
/* 라디오 버튼 UI삭제*/
input[name="tab_item"] {
display: none;
}
/* 탭 컨텐츠 스타일 */
.tab_content {
display: none;
padding: 40px 40px 0;
clear: both;
overflow: hidden;
}
/* 선택 된 탭 콘텐츠를 표시 */
#all:checked ~ #all_content,
#programming:checked ~ #programming_content,
#design:checked ~ #design_content {
display: block;
}
/* 선택된 탭 스타일 */
.tabs input:checked + .tab_item {
background-color: #333333;
color: #fff;
}키 포인트:
– 라디오 버튼을 스타일을 전부 지우기
– 선택되고 있는 탭의 콘텐츠만 표시
– 선택되고 있는 탭의 스타일을 바꾸기
tabs 부분은 탭 전환 전체 너비를 설정하거나 box-shadow에서 그림자를 설정하였습니다.
다음. tab_item부분도 외부 스타일을 바꿨습니다.
width에서 탭의 폭을 변경하고, 3개의 탭 "tab 1","tab 2","tab 3"으로 3개의 탭이지만 4개로 하고 싶다면 width:25%;, 5개로 하고 싶다면 width:20%로 필요에 따라서 변경가능!
CHECK!!
현재 탭에 호버 시 투명도가 높아지도록 설정하였는데, 다른 호버 액션을 하고자 한다면 ".tab_item:hover"안에 적어주시기 바랍니다.
다음으로 알아봐야 할 코드는 이쪽입니다.
input [name="tab_item"] {
display: none;
}여기에서 탭 부분의 라디오 버튼을 지우고 있습니다,
이것을 하지 않으면 라디오 버튼이 보이기 때문에 스타일이 엉망이 됩니다.
지금까지는 탭 부분에 대한 해설이었지만, 이제 내용물 부분을 살펴보도록 하겠습니다.
.tab_content 부분은 탭전환의 내용 스타일만 갖추어 놓았으니 필요에 따라 다시 쓰시기 바랍니다.단, 아래 포인트는 체크해 두세요!
POINT!!!
'.tab_content'에 'display:none;'를 넣는 것을 잊지 마세요!이것을 떼어내 버리면, 모든 내용이 보이는 상태가 되어 버려, 탭 전환을 만들고 있는 의미가 전혀 없어져 버립니다!
아래에서 처럼 display:none;에서 지워버린 모든 컨텐츠 중에 선택되어 있는 탭만 표시한다고 설정을 하고 있습니다.
#all:checked ~ #all_content,
#programming:checked ~ #programming_content,
#design:checked ~ #design_content {
display: block;
}
이상 CSS만으로 탭 전환을 만드는 방법을 소개해 드렸는데요.
몇 가지 유념해야 할 점이 있습니다만, 셀렉터로 해당하는 부분을 잘 따올 수 있으면 그렇게 어렵지 않고 CSS로 만들고 있는 만큼 아주 가볍습니다.
관심 있으신 분은 시도해 보세요.
