jsp 클론 사이트 만드는데 질문이있습니다.

Question

안녕하세요 다름이 아니라 학원에서 클론사이트를 만드는 과제가 있어서 하다가 질문이있어서요 ㅠ main화면을 구상중인데. 메인화면에 카드 애니메이션 기능, footer, 메뉴바를 만들고 있는데, footer랑 카드애니메이션을 하고 옆에 메뉴바를 삽입하면 정중앙에 제대로 있던 카드애니메이션 기능을 한 것이 깨지면서 아래로 밀리고 뭔가 이상해집니다 ㅠ 혹시 뭐가 문제인지 아시는 분 계실까요?<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <% String id = (String)session.getAttribute("id"); String menu = request.getParameter("menu"); %> 메인 <%@ include file="/common/bootstrap_common.jsp"%> <%@ include file="./include/carousel.jsp" %> <%@ include file="./include/navbar.jsp" %> <%@ include file="./include/footer.jsp" %> 위는 main입니다. 현재 문제가 생기는 부분은 navbar부분입니다.<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

Login
Mypage
Cart

About us

BEST 100
All-in-one
Outer
Top(short sleeve)
Top(long sleeve)
Bottoms
Bags
Accessories
Shoes
Women only

YouTube
Instagram

Notice
Review
Q&A
FAQ

Counseling Center
02 436 1009

13:00 - 17:00
sat.sun.holiday off

위 부분이 navbar.jsp입니다.body { display: flex; flex-direction: row; justify-content: center; align-items: center; overflow: hidden; height: 100vh; font-family: "Roboto", sans-serif; transition: 0.25s; background-color: black; } body .credit { position: absolute; bottom: 20px; left: 20px; color: inherit; } body .options { display: flex; flex-direction: row; align-items: stretch; overflow: hidden; min-width: 600px; max-width: 900px; width: calc(100% - 100px); height: 400px; } @media screen and (max-width: 718px) { body .options { min-width: 520px; } body .options .option:nth-child(5) { display: none; } } @media screen and (max-width: 638px) { body .options { min-width: 440px; } body .options .option:nth-child(4) { display: none; } } @media screen and (max-width: 558px) { body .options { min-width: 360px; } body .options .option:nth-child(3) { display: none; } } @media screen and (max-width: 478px) { body .options { min-width: 280px; } body .options .option:nth-child(2) { display: none; } } body .options .option { position: relative; overflow: hidden; min-width: 60px; margin: 10px; background: var(--optionBackground, var(--defaultBackground, #e6e9ed)); background-size: auto 120%; background-position: center; cursor: pointer; transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95); } body .options .option:nth-child(1) { --defaultBackground: #ed5565; } body .options .option:nth-child(2) { --defaultBackground: #fc6e51; } body .options .option:nth-child(3) { --defaultBackground: #ffce54; } body .options .option:nth-child(4) { --defaultBackground: #2ecc71; } body .options .option:nth-child(5) { --defaultBackground: #5d9cec; } body .options .option:nth-child(6) { --defaultBackground: #ac92ec; } body .options .option.active { flex-grow: 10000; transform: scale(1); max-width: 600px; margin: 0px; border-radius: 40px; background-size: auto 100%; /*&:active { transform:scale(0.9); } */ } body .options .option.active .shadow { box-shadow: inset 0 -120px 120px -120px black, inset 0 -120px 120px -100px black; } body .options .option.active .label { bottom: 20px; left: 20px; } body .options .option.active .label .info > div { left: 0px; opacity: 1; } body .options .option:not(.active) { flex-grow: 1; border-radius: 30px; } body .options .option:not(.active) .shadow { bottom: -40px; box-shadow: inset 0 -120px 0px -120px black, inset 0 -120px 0px -100px black; } body .options .option:not(.active) .label { bottom: 10px; left: 10px; } body .options .option:not(.active) .label .info > div { left: 20px; opacity: 0; } body .options .option .shadow { position: absolute; bottom: 0px; left: 0px; right: 0px; height: 120px; transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95); } body .options .option .label { display: flex; position: absolute; right: 0px; height: 40px; transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95); } body .options .option .label .icon { display: flex; flex-direction: row; justify-content: center; align-items: center; min-width: 40px; max-width: 40px; height: 40px; border-radius: 100%; background-color: white; color: var(--defaultBackground); } body .options .option .label .info { display: flex; flex-direction: column; justify-content: center; margin-left: 10px; color: white; white-space: pre; } body .options .option .label .info > div { position: relative; transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95), opacity 0.5s ease-out; } body .options .option .label .info .main { font-weight: bold; font-size: 1.2rem; } body .options .option .label .info .sub { transition-delay: 0.1s; }위 부분이 navbar.jsp랑 연결된 style.css입니다.<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

Blonkisoaz

Omuke trughte a otufta

Oretemauw

Omuke trughte a otufta

Iteresuselle

Omuke trughte a otufta

Idiefe

Omuke trughte a otufta

Inatethi

Omuke trughte a otufta

위의 파일은 carousel.jsp입니다.이 두파일을 각각 따로 실행하면 각각 제가 원하는 것이 나옵니다.하지만 이것을 메인으로 불러서 메인에서 실행을 하게되면 전부 다 밀려서 보이지도 않게 만들어집니다. 혹시 무엇이 문제인지 알려주실수 있으실까요 ㅠㅠ

jsp 클론 사이트 만드는데 질문이있습니다.

0개의 답변

Q&A 목록