728x90
안녕하세요.
오늘은 Tab menu를 한번 구현해 볼 것입니다.
Tab menu를 구현하는 방법에는 여러가지가 있지만, 이번에는 JavaScript의 도움없이, HTML과 CSS만으로 구현하는 방법을 소개하겠습니다.
스틱코드를 사용하면, 여기서 작성된 코드를 손쉽게 사용할 수 있으니 참고해주세요~~
https://stickode.com/detail.html?no=2557
스틱코드
stickode.com
일단 파일구조는 다음과 같습니다.
[연습용 웹페이지] 라는 폴더 안에 index.html 파일과 page.css라는 파일이 같이 들어있습니다.
여기서 [연습용 웹페이지]라는 폴더 명칭은 그리 중요한건 아닙니다. 중요한 부분은 같은 폴더 안에 위의 두 파일이 존재하고 있다는 것입니다.
각 폴더의 내용은 다음과 같습니다.
index.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>탭메뉴</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- css 추가 하는 위치 -->
<link href="page.css" rel="stylesheet">
</head>
<body>
<p></p>
<p></p>
<p></p>
<div class="tab-area">
<input type="radio" name="tabs" id="tab1" checked>
<label for="tab1">빨강</label>
<input type="radio" name="tabs" id="tab2">
<label for="tab2">파랑</label>
<input type="radio" name="tabs" id="tab3">
<label for="tab3">노랑</label>
<input type="radio" name="tabs" id="tab4">
<label for="tab4">초록</label>
<div id="content1" class="tab-content red">
<!-- 이부분에 넣고 싶은 내용을 넣으면 된다 -->
</div>
<div id="content2" class="tab-content blue">
<!-- 이부분에 넣고 싶은 내용을 넣으면 된다 -->
</div>
<div id="content3" class="tab-content yellow">
<!-- 이부분에 넣고 싶은 내용을 넣으면 된다 -->
</div>
<div id="content4" class="tab-content green">
<!-- 이부분에 넣고 싶은 내용을 넣으면 된다 -->
</div>
</div>
</body>
</html>
page.css
html,
body {
height: 100%;
padding: 0%;
margin: 0%;
}
/* 1. tab 영역 css 설정 */
.tab-area {
width: 500px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
/* 2. tab 메뉴 부분 디자인 */
.tab-area input {
display: none;
}
.tab-area label {
margin-left: auto;
margin-right: auto;
}
/* label에 마우스 올렸을 때 */
.tab-area label:hover {
cursor: pointer; /*마우스 모양 변경*/
}
/* tab-area 안에 존재하는 input 태그가 체크되었을 때,
체크된 input 태그 다음에 등장하는 label의 css 값 */
.tab-area input:checked + label {
/* 해당 메뉴가 선택된 상태인지 아닌지를 사용자에게 알려줄 수 있음 */
font-weight: bold;
color: red;
}
/* 3. tab 내용 부분 디자인 */
.tab-content {
width: 100%; /*부모 div width와 같은 width를 가진다.*/
height: 500px;
display: none; /*기본 값일땐 화면에 표시하지 않음. 체크 상태일 때, 화면에 표시되어야 함 */
border-top: 2px solid rgba(200, 200, 200, 0.534);/*탭 메뉴와 내용구분선*/
}
/* input 태그가 체크 상태일떼, 이에 대응하는 content?를 display에 표시하도록 설정 */
#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3,
#tab4:checked ~ #content4 {
display: flex;
}
/* 구분을 위해 추가 */
.red {
background: red;
}
.blue {
background: blue;
}
.yellow {
background: yellow;
}
.green {
background: green;
}
input 태그를 라디오버튼으로 설정하여, 4개중 하나만 선택할 수 있도록 하고,
input 태그의 선택여부에 따라 content라는 클래스를 가진 div를 화면에 보여주고 안보여주고를 제어하는 것이 해당코드의 핵심입니다.
간단하게 시연을 보고 마무리 하도록 하겠습니다.
'HTML／CSS' 카테고리의 다른 글
| [HTML / CSS] 만들어져 있는 템플릿 적용하기 (0) | 2021.12.07 |
|---|---|
| [HTML / CSS] Navbar 메뉴바 만들기! (0) | 2021.11.13 |
| [HTML / CSS] 부트스트랩 부드럽고 예쁜 버튼 사용하기 (0) | 2021.11.02 |
| [HTML / CSS] 텍스트 세로 중앙 방향으로 중앙정렬 하기 (1) | 2021.10.18 |
| [HTML / CSS] Lottie 이용해보기 (0) | 2021.09.21 |
