이미지 앞에만 크고 가로로 3개 정렬된 상태
mainPage1.jsp 이미지 슬라이드 3개에서 1나로 바꾸기전
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<c:set var="path" value="<%= request.getContextPath() %>" />
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="${path}/resources/css/main/mainPage1.css?after"/>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/resources/js/main/image_slid.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@3/dist/js/splide.min.js"></script>
<%@ include file="./header.jsp" %>
</head>
<body>
<div class="page">
<div class="content1">
<div class="main-img">
<div>
<img src="${path}/resources/img/main/test8.jpg">
</div>
</div>
</div>
<section class="intro-hub">
<div>
<p class="first-line">WELCOME!</p><br>
<p class="rest-line">qwerqwer qwerqwerqwerqwerqwer qwerqwerqwerqwerqwer<br>
qwerqwer qwerqwerqwerqwer qwerqwer</p>
</div>
</section>
<div class="content_wrapper">
<div class="content2">
<div class="menu-img">
<ul class="image-slid">
<li class="food-img">
<img class="out" src="${path}/resources/img/main/맛집03.jpg" width="225"><br>
<div class="food-tagname">
#한식
<button type="button">자세히보기</button>
</div>
</li>>
<li class="food-img">
<img class="on" src="${path}/resources/img/main/맛집04.jpg" alt="음식사진"><br>
<div class="food-tagname">
#일식
<button type="button">자세히보기</button>
</div>
</li>>
<li class="food-img">
<img src="${path}/resources/img/main/맛집05.jpg" alt="음식사진"><br>
<div class="food-tagname">
#양식
<button type="button">자세히보기</button>
</div>
</li>>
<li class="food-img">
<img src="${path}/resources/img/main/맛집05.jpg" alt="음식사진"><br>
<div class="food-tagname">
#양식
<button type="button">자세히보기</button>
</div>
</li>>
<li class="food-img">
<img src="${path}/resources/img/main/맛집05.jpg" alt="음식사진"><br>
<div class="food-tagname">
#양식
<button type="button">자세히보기</button>
</div>
</li>>
</ul>
</div>
</div>
<div class="content3">
<div class="menu-img1">
<ul class="image-slid">
<li class="food-img">
<img class="out" src="${path}/resources/img/main/맛집03.jpg" width="225"><br>
<div class="food-tagname">
#한식
<button type="button">자세히보기</button>
</div>
</li>>
<li class="food-img">
<img class="on" src="${path}/resources/img/main/맛집04.jpg" width="225"><br>
<div class="food-tagname">
#일식
<button type="button">자세히보기</button>
</div>
</li>>
<li class="food-img">
<img src="${path}/resources/img/main/맛집05.jpg" width="225"><br>
<div class="food-tagname">
#양식
<button type="button">자세히보기</button>
</div>
</li>>
<li class="food-img">
<img src="${path}/resources/img/main/맛집05.jpg" width="225"><br>
<div class="food-tagname">
#양식
<button type="button">자세히보기</button>
</div>
</li>>
<li class="food-img">
<img src="${path}/resources/img/main/맛집05.jpg" width="225"><br>
<div class="food-tagname">
#양식
<button type="button">자세히보기</button>
</div>
</li>>
</ul>
</div>
</div>
<div class="content4">
<div class="menu-img2">
<ul class="image-slid">
<li class="food-img">
<img class="out" src="${path}/resources/img/main/맛집03.jpg" width="225"><br>
<div class="food-tagname">
#한식
<button type="button">자세히보기</button>
</div>
</li>>
<li class="food-img">
<img class="on" src="${path}/resources/img/main/맛집04.jpg" width="225"><br>
<div class="food-tagname">
#일식
<button type="button">자세히보기</button>
</div>
</li>>
<li class="food-img">
<img src="${path}/resources/img/main/맛집05.jpg" width="225"><br>
<div class="food-tagname">
#양식
<button type="button">자세히보기</button>
</div>
</li>>
<li class="food-img">
<img src="${path}/resources/img/main/맛집05.jpg" width="225"><br>
<div class="food-tagname">
#양식
<button type="button">자세히보기</button>
</div>
</li>>
<li class="food-img">
<img src="${path}/resources/img/main/맛집05.jpg" width="225"><br>
<div class="food-tagname">
#양식
<button type="button">자세히보기</button>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
<%@ include file="./footer.jsp" %>
</html>
mainPage1.css 바꾸기전
@charset "UTF-8";
.page{
display:flex;
flex-direction:column;
min-height: 100vh;
}
/* image slide css */
ul, li{
list-style: none;
}
.image-slid{
position: relative;
/*width: 100%;
height: 100%;
*/
width: 350px;
height: 350px;
overflow: hidden;
}
.image-slid > li{
display: none;
position: relative;
/*width: 100%;
height: 100%;*/
width: 350px;
height: 350px;
}
.image-slid > li > .food-img{
width: 380px;
height: 350px;
}
.image-slid > li.on{
display: block;
animation: slider1 1s;
animation-fill-mode: forwards;
}
.image-slid > li.out{
display: block;
animation: slider2 1s;
animation-fill-mode: forwards;
}
@keyframes slider1{
from{
transform: translateX(+100%);
} to{
left:0px;
}
}
@keyframes slider2{
from{
left:0;
} to{
transform: translateX(-100%);
}
}
/* image slide css end */
/* main image css */
.content1{
display: flex;
flex:1;
height: 80vh;
position: relative;
padding:10.5rem;
justify-content: center;
align-items: center;
}
.main-img{
display: flex;
flex:1;
width: 100%;
height: 80vh;
position: relative;
padding:0;
justify-content: center;
align-items: center;
margin-top: -60px;
}
.main-img div{
width: 100%;
height: 100%;
object-fit: contain;
}
.main-img div img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* main image css end */
/* 소개글 css */
.intro-hub{
dispaly:flex;
justify-content: center;
align-items: center;
text-align: center;
}
.first-line {
text-align: center;
font-size: 30px;
font-family: "Love Ya Like A Sister",cursive;
}
.rest-line {
text-align: center;
margin-top: -40px;
font-size: 20px;
font-family: "Love Ya Like A Sister",cursive;
}
/* 소개글 css end */
/* menu image css */
.content_wrapper {
display: flex;
flex-direction: row;
justify-content: space-around;
}
.content2{
display: flex;
padding:5rem;
justify-content: center;
align-items: center;
width: 350px;
height: 350px;
}
.content3{
display: flex;
padding:5rem;
justify-content: center;
align-items: center;
width: 350px;
height: 350px;
}
.content4{
display: flex;
padding:5rem;
justify-content: center;
align-items: center;
width: 350px;
height: 350px;
}
.menu-img {
display: flex;
flex-wrap: wrap;
/*width: 350px;
height: 350px;*/
width: 100%;
height: 100%;
margin-left: 40px;
gap: 100px;
position: relative;
overflow: hidden;
justify-content: center;
line-height: 0;
}
.menu-img1 {
display: flex;
flex-wrap: wrap;
width: 100%;
height: 100%;
margin-left: 40px;
gap: 100px;
position: relative;
overflow: hidden;
justify-content: center;
line-height: 0;
}
.menu-img2 {
display: flex;
flex-wrap: wrap;
width: 100%;
height: 100%;
margin-left: 40px;
gap: 100px;
position: relative;
overflow: hidden;
justify-content: center;
line-height: 0;
}
.food-img {
display: flex;
flex-direction: column;
/*width: 350px;
height: 350px;*/
width: 100%;
height: 100%;
float: left;
align-items: center;
text-align: center;
text-decoration: none;
overflow: hidden;
}
.food-img img {
width: 100%;
height: 80%;
object-fit: cover;
}
/* menu image css end */
/* menu image tagname css */
.food-tagname{
display: flex;
width: 95%;
justify-content: space-between;
font-family: "Love Ya Like A Sister",cursive;
}
.food-tagname button{
border: none;
background-color: darkgray;
color: white;
}
/* menu image tagname css end */
image_slid.js
document.addEventListener('DOMContentLoaded', function() {
var index = 0;
function slider(){
li = document.querySelectorAll('.menu-img > ul> li');
if (index == 4){
index = 0;
}
for(i=0; i<li.length; i++){
var onNum = index+1;
if(onNum ==4) {
onNum = 0;
}
console.log(index,onNum);
if(i==index){
console.log(i,'번째 클래스명 out');
li.item(i).setAttribute('class','out');
}
else if(i==onNum){
console.log(i,'번째 클래스명 on');
li.item(i).setAttribute('class','on');
}
else {
console.log(i,'여긴 클래스를 지워라');
li.item(i).setAttribute('class','');
}
}
index++;
}
function prevImage(){
index--;
if(index < 0){
index = 3;
}
slider();
}
function nextImage(){
index++;
if(index > 3){
index = 0;
}
slider();
}
setInterval(slider,3000);
});
document.addEventListener('DOMContentLoaded', function() {
var index = 0;
function slider(){
li = document.querySelectorAll('.menu-img1 > ul> li');
if (index == 4){
index = 0;
}
for(i=0; i<li.length; i++){
var onNum = index+1;
if(onNum ==4) {
onNum = 0;
}
console.log(index,onNum);
if(i==index){
console.log(i,'번째 클래스명 out');
li.item(i).setAttribute('class','out');
}
else if(i==onNum){
console.log(i,'번째 클래스명 on');
li.item(i).setAttribute('class','on');
}
else {
console.log(i,'여긴 클래스를 지워라');
li.item(i).setAttribute('class','');
}
}
index++;
}
function prevImage(){
index--;
if(index < 0){
index = 3;
}
slider();
}
function nextImage(){
index++;
if(index > 3){
index = 0;
}
slider();
}
setInterval(slider,3000);
});
document.addEventListener('DOMContentLoaded', function() {
var index = 0;
function slider(){
li = document.querySelectorAll('.menu-img2 > ul> li');
if (index == 4){
index = 0;
}
for(i=0; i<li.length; i++){
var onNum = index+1;
if(onNum ==4) {
onNum = 0;
}
console.log(index,onNum);
if(i==index){
console.log(i,'번째 클래스명 out');
li.item(i).setAttribute('class','out');
}
else if(i==onNum){
console.log(i,'번째 클래스명 on');
li.item(i).setAttribute('class','on');
}
else {
console.log(i,'여긴 클래스를 지워라');
li.item(i).setAttribute('class','');
}
}
index++;
}
function prevImage(){
index--;
if(index < 0){
index = 3;
}
slider();
}
function nextImage(){
index++;
if(index > 3){
index = 0;
}
slider();
}
setInterval(slider,3000);
});
