<!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">
<a href="http://localhost:8010/category/foreign">
<img src="https://image.aladin.co.kr/product/32849/3/cover500/e322532593_1.jpg" alt="Image 1">
</a>
<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>
<div id="homeTabKoreaContent" class="category-content">
<h2>국내도서 카테고리</h2>
<p>전체보기 카테고리에 대한 내용이 여기에 나오도록 할 수 있습니다.</p>
<hr> <!-- 수평선 추가 -->
<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>
books
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>가운데 정렬된 수평선</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<style>
.horizontal-line-container {
display: flex; /* Flexbox 사용 */
margin-top: 20px; /* 위쪽 여백 추가 */
width: 1000px; /* 원하는 가로 너비로 조절 */
}
.horizontal-line {
flex-grow: 1;
border-top: 2px solid black; /* 너비를 4픽셀로 변경 */
width: 100px;
}
.Ere_bo_title {
flex-grow: 0; /* 내용 크기에 맞춤 */
margin-right: 10px; /* 제목과 수평선 사이 여백 추가 */
}
.item-container {
display: flex; /* Flexbox 사용 */
margin-bottom: 10px; /* 추가 */
}
.item-container img {
margin-right: 20px; /* 사진과 텍스트 사이의 간격 조정 */
width: 100px; /* 사진 크기 수정 */
height: auto; /* 이미지 비율 유지 */
}
.rate {
background: url(https://aldo814.github.io/jobcloud/html/images/user/star_bg02.png) no-repeat;
width: 121px;
height: 20px;
position: relative;
cursor: pointer; /* 마우스 커서를 손가락 모양으로 변경 */
margin-top: 10px; /* 수정 */
}
.rate span {
position: absolute;
background: url(https://aldo814.github.io/jobcloud/html/images/user/star02.png);
width: auto;
height: 20px;
pointer-events: none; /* 이벤트를 통과시킴으로써 별점을 클릭할 수 있게 함 */
}
.dropdown { /* 드롭박스 색깔 */
position: relative;
display: inline-block;
}
.dropdown .btn {
background-color: #4CAF50; /* Green background */
color: white; /* White text */
padding: 10px; /* Some padding */
font-size: 16px; /* Increased font size */
border: none; /* Remove the default border */
cursor: pointer; /* Pointer cursor on hover */
}
.dropdown .dropdown-menu {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown .dropdown-menu a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown .dropdown-menu a:hover {
background-color: #f1f1f1;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 offset-md-1">
<div class="horizontal-line-container">
<span class="Ere_bo_title">제목 테스트 </span>
</div>
<hr class="horizontal-line" style="width: 150%">
</div>
</div>
<div class="row">
<div class="col-md-3 offset-md-2">
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://image.aladin.co.kr/product/33370/4/cover500/e902532530_1.jpg" class="d-block w-100" alt="Slide 1">
</div>
<div class="carousel-item">
<img src="https://image.aladin.co.kr/product/31092/38/cover500/0711282110_1.jpg" class="d-block w-100" alt="Slide 2">
</div>
<div class="carousel-item">
<img src="https://image.aladin.co.kr/product/32892/38/cover500/8901276534_2.jpg" class="d-block w-100" alt="Slide 3">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<div class="col-md-3">
<div>
<div>판매가 10000원</div>
<div>할인가 8000원</div>
</div>
<div style="margin-bottom: 20px;"></div> <!-- 강제로 줄 바꿈+한 칸 공백 -->
<div class="rate" onclick="setStarRating(event)">
<span id="starRating" style="width: 50%"></span>
</div>
<div style="margin-bottom: 20px;"></div> <!-- 강제로 줄 바꿈+한 칸 공백 -->
<a th:href="@{/question/create}" class="btn btn-primary">장바구니</a>
<a th:href="@{/question/create}" class="btn btn-primary">구매하기</a>
<div class="dropdown">
<button class="btn" onclick="toggleDropdown()">보관함</button>
<ul id="dropdownMenu" class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-6 offset-md-1">
<hr class="horizontal-line" style="width: 150%"> <!-- 기존의 수평선 -->
<div>책 내용</div>
<div style="margin-bottom: 20px;"></div> <!-- 강제로 줄 바꿈+한 칸 공백 -->
<div>역사언어학 분야 대한민국 최다 구독자를 보유한 언어 천재 유튜버 향문천이 들려주는 놀라운 한국어의 역사!
“한국어는 신라어의 후예일까?” “일본어는 백제어의 후예일까?” “과거로 돌아가면 말이 통할까?”
“조선 시대에는 외국어를 어떻게 공부했을까?” “韓은 어떻게 우리 민족의 자칭이 되었을까?”
“과거 외국인들은 우리나라를 어떻게 불렀을까?” “근대 시기 서양의 단어들은 어떻게 번역되었을까?”
한국어의 기원에서부터 근대 이후에 이르기까지, 미처 몰랐던 역사적 사실부터 흥미진진한 TMI까지, 한국어사의 크고 작은 순간들을 유쾌하고 거침없이 풀어낸 인문 교양서.</div>
<hr class="horizontal-line" style="width: 100%"> <!-- 새로운 수평선 추가, 길이 조정 -->
<div style="margin-bottom: 20px;"></div> <!-- 강제로 줄 바꿈+한 칸 공백 -->
<div>책 저자</div>
<div style="margin-bottom: 20px;"></div> <!-- 강제로 줄 바꿈+한 칸 공백 -->
<div>책 부록</div>
</div>
</div>
<div>책제목</div>
<div style="margin-bottom: 20px;"></div> <!-- 강제로 줄 바꿈+한 칸 공백 -->
<div>글쓴이</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script>
// 별점을 동적으로 변경하는 JavaScript 코드
function setStarRating(event) {
var starElement = document.getElementById("starRating");
var rect = event.target.getBoundingClientRect();
var offsetX = event.clientX - rect.left; // 마우스 클릭한 위치의 X 좌표
var percent = (offsetX / rect.width) * 100; // 클릭한 위치를 별점으로 변환
starElement.style.width = percent + "%";
}
function toggleDropdown() {
var dropdownMenu = document.getElementById("dropdownMenu");
if (dropdownMenu.style.display === "none") {
dropdownMenu.style.display = "block";
} else {
dropdownMenu.style.display = "none";
}
}
// 이하 코드는 사용자가 드롭다운 이외의 영역을 클릭할 때 드롭다운을 닫는 기능입니다.
window.onclick = function(event) {
if (!event.target.matches('.btn')) {
var dropdowns = document.getElementsByClassName("dropdown-menu");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.style.display === "block") {
openDropdown.style.display = "none";
}
}
}
}
</script>
</body>
</html>foreign
good