<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>카테고리 버튼</title>
<style>
.category-tabs {
list-style-type: none;
padding: 0;
margin: 0;
}
.category-item {
display: inline-block;
margin-right: 10px;
}
.category-item a {
text-decoration: none;
color: #333;
padding: 5px 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
.category-item.active a {
background-color: #333;
color: #fff;
}
/* 각 카테고리에 대한 컨텐츠의 기본 스타일 */
.category-content {
display: none;
padding: 20px;
border: 1px solid #ccc;
margin-top: 10px;
}
/* 활성화된 카테고리에 대한 컨텐츠의 스타일 */
.category-content.active {
display: block;
}
/* 이미지 갤러리 스타일 */
.image-gallery {
display: flex; /* 가로로 나열 */
flex-wrap: wrap; /* 필요시 줄 바꿈 */
}
.gallery-item {
display: flex; /* 요소를 가로로 나열하기 위해 */
flex-direction: row; /* 가로로 나열 */
align-items: center; /* 수직 가운데 정렬 */
margin-bottom: 100px; /* 각 요소 간의 간격 */
margin-right: 100px; /* 우측 간격을 설정하여 책 사이의 좌우 간격을 조정 */
}
.gallery-item img {
width: 150px; /* 이미지 너비 조절 */
height: auto; /* 이미지 비율 유지 */
margin-right: 10px; /* 이미지 오른쪽 간격,책과 글간의 간격 */
}
.gallery-text {
flex-grow: 1; /* 텍스트가 남은 공간을 모두 차지하도록 */
}
.book-info img {
max-width: 100px; /* 이미지의 최대 너비 */
height: auto; /* 이미지 높이 자동 조절 */
margin-right: 100px; /* 이미지 간 간격 조정 */
}
.book-info div {
display: block; /* 텍스트를 블록 요소로 설정하여 줄 바꿈이 되도록 함 */
}
</style>
</head>
<body>
<ul class="category-tabs">
<li class="category-item active"><a href="#homeTab" onclick="showContent('homeTab')">홈</a></li>
<li class="category-item"><a href="#homeTabForeign" onclick="showContent('homeTabForeign')">외국도서</a></li>
<li class="category-item"><a href="#homeTabKorea" onclick="showContent('homeTabKorea')">국내도서</a></li>
<li class="category-item"><a href="#homeTabBest" onclick="showContent('homeTabBest')">베스트셀러</a></li>
<li class="category-item"><a href="#homeTabNew" onclick="showContent('homeTabNew')">신간도서</a></li>
<li class="category-item"><a href="#homeTabFree" onclick="showContent('homeTabFree')">무료도서</a></li>
</ul>
<!-- 홈 카테고리에 대한 컨텐츠 -->
<div id="homeTabContent" class="category-content active">
<h2>홈 카테고리</h2>
<p>홈 카테고리에 대한 내용이 여기에 나오도록 할 수 있습니다.</p>
<hr> <!-- 수평선 추가 -->
<div>책제목</div>
<div style="margin-bottom: 20px;"></div> <!-- 강제로 줄 바꿈+한 칸 공백 -->
<div>글쓴이</div>
</div>
<div id="homeTabForeignContent" class="category-content">
<h2>전체보기 카테고리</h2>
<p>전체보기 카테고리에 대한 내용이 여기에 나오도록 할 수 있습니다.</p>
<hr> <!-- 수평선 추가 -->
<div class="image-gallery">
<div class="gallery-item">
<img src="https://image.aladin.co.kr/product/32849/3/cover500/e322532593_1.jpg" alt="Image 1">
<div class="gallery-text">
<div>책제목</div>
<div>글쓴이</div>
</div>
</div>
<div class="gallery-item">
<img src="https://image.aladin.co.kr/product/21770/77/cover500/s782636201_1.jpg" alt="Image 2">
<div class="gallery-text">
<div>책제목</div>
<div>글쓴이</div>
</div>
</div>
<div class="gallery-item">
<img src="https://image.aladin.co.kr/product/31249/57/cover500/0593686659_1.jpg" alt="Image 3">
<div class="gallery-text">
<div>책제목</div>
<div>글쓴이</div>
</div>
</div>
</div>
</div>
<script>
function showContent(tabName) {
// 모든 카테고리 컨텐츠를 숨김
var contents = document.querySelectorAll('.category-content');
contents.forEach(function(content) {
content.classList.remove('active');
});
// 클릭한 카테고리 컨텐츠만 표시
var activeContent = document.getElementById(tabName + 'Content');
activeContent.classList.add('active');
// 모든 카테고리 버튼 비활성화
var tabs = document.querySelectorAll('.category-item');
tabs.forEach(function(tab) {
tab.classList.remove('active');
});
// 클릭한 카테고리 버튼 활성화
var activeTab = document.querySelector('.' + tabName);
activeTab.classList.add('active');
}
</script>
</body>
</html>
good