탭 메뉴를 디자인하고 커스터마이징하는 6가지 예제를 CSS와 HTML 통합 코딩으로 제시하겠습니다. 각 예제는 주석과 함께 설명되어 있습니다.
예제 1: 기본 탭 메뉴
<!DOCTYPE html>
<html>
<head>
<style>
.tabs {
display: flex;
list-style: none;
padding: 0;
}
.tab {
flex: 1;
text-align: center;
padding: 10px;
background-color: #3498db;
color: white;
cursor: pointer;
}
</style>
</head>
<body>
<ul class="tabs">
<li class="tab">Tab 1</li>
<li class="tab">Tab 2</li>
<li class="tab">Tab 3</li>
</ul>
</body>
</html>
이 예제에서는 간단한 기본 탭 메뉴를 만듭니다. flex를 사용하여 탭을 동일한 너비로 정렬하고 간단한 스타일을 적용합니다.
예제 2: 호버 효과 추가
<!DOCTYPE html>
<html>
<head>
<style>
.tabs {
display: flex;
list-style: none;
padding: 0;
}
.tab {
flex: 1;
text-align: center;
padding: 10px;
background-color: #3498db;
color: white;
cursor: pointer;
transition: background-color 0.3s;
}
.tab:hover {
background-color: #2980b9;
}
</style>
</head>
<body>
<ul class="tabs">
<li class="tab">Tab 1</li>
<li class="tab">Tab 2</li>
<li class="tab">Tab 3</li>
</ul>
</body>
</html>
이 예제에서는 각 탭에 호버 효과를 추가합니다. :hover 가상 클래스를 사용하여 호버 시 배경색이 변경됩니다.
예제 3: 활성 탭 스타일링
<!DOCTYPE html>
<html>
<head>
<style>
.tabs {
display: flex;
list-style: none;
padding: 0;
}
.tab {
flex: 1;
text-align: center;
padding: 10px;
background-color: #3498db;
color: white;
cursor: pointer;
transition: background-color 0.3s;
}
.tab.active {
background-color: #2980b9;
}
</style>
</head>
<body>
<ul class="tabs">
<li class="tab active">Tab 1</li>
<li class="tab">Tab 2</li>
<li class="tab">Tab 3</li>
</ul>
</body>
</html>
이 예제에서는 활성 탭을 강조합니다. .active 클래스를 사용하여 현재 활성화된 탭의 스타일을 변경합니다.
예제 4: 탭에 아이콘 추가
<!DOCTYPE html>
<html>
<head>
<style>
.tabs {
display: flex;
list-style: none;
padding: 0;
}
.tab {
display: flex;
align-items: center;
flex: 1;
text-align: center;
padding: 10px;
background-color: #3498db;
color: white;
cursor: pointer;
transition: background-color 0.3s;
}
.tab i {
margin-right: 5px;
}
.tab.active {
background-color: #2980b9;
}
</style>
</head>
<body>
<ul class="tabs">
<li class="tab active"><i class="fas fa-home"></i>Home</li>
<li class="tab"><i class="fas fa-info-circle"></i>About</li>
<li class="tab"><i class="fas fa-envelope"></i>Contact</li>
</ul>
</body>
</html>
이 예제에서는 탭에 아이콘을 추가하고 아이콘과 텍스트를 가로로 정렬합니다.
예제 5: 탭 밑줄 효과
<!DOCTYPE html>
<html>
<head>
<style>
.tabs {
display: flex;
list-style: none;
padding: 0;
border-bottom: 2px solid #3498db;
}
.tab {
flex: 1;
text-align: center;
padding: 10px;
color: #3498db;
cursor: pointer;
transition: color 0.3s;
}
.tab.active {
color: #2980b9;
border-bottom: 2px solid #2980b9;
}
</style>
</head>
<body>
<ul class="tabs">
<li class="tab active">Tab 1</li>
<li class="tab">Tab 2</li>
<li class="tab">Tab 3</li>
</ul>
</body>
</html>
이 예제에서는 탭 아래에 밑줄 효과를 추가합니다. border-bottom 속성을 사용하여 활성 탭에 밑줄을 그립니다.
예제 6: 탭 배경 이미지
<!DOCTYPE html>
<html>
<head>
<style>
.tabs {
display: flex;
list-style: none;
padding: 0;
}
.tab {
flex: 1;
text-align: center;
padding: 10px;
background-image: linear-gradient(to bottom, #3498db, #2980b9);
color: white;
cursor: pointer;
transition: background-image 0.3s;
}
.tab.active {
background-image: linear-gradient(to bottom, #2980b9, #3498db);
}
</style>
</head>
<body>
<ul class="tabs">
<li class="tab active">Tab 1</li>
<li class="tab">Tab 2</li>
<li class="tab">Tab 3</li>
</ul>
</body>
</html>
이 예제에서는 탭의 배경에 그라디언트 이미지를 사용하여 탭을 스타일링합니다.
'CSS' 카테고리의 다른 글
| 푸터 고정: 푸터를 페이지 하단에 고정. (0) | 2023.12.23 |
|---|---|
| 슬라이더 스타일링: 이미지 슬라이더 스타일링. (0) | 2023.12.23 |
| 헤더 및 푸터 스타일링: 웹 페이지의 헤더와 푸터 디자인. (0) | 2023.12.23 |
| 블러 효과: 요소에 블러 효과 추가. (0) | 2023.12.23 |
| 풀스크린 배경 이미지: 전체 화면 배경 이미지. (0) | 2023.12.23 |