웹페이지 기능 하나만 도와주실분.(HTML,CSS,JS

본문 바로가기

웹페이지 기능 하나만 도와주실분.(HTML,CSS,JS

작성일 2024.01.08댓글 1건
    게시물 수정 , 삭제는 로그인 필요

웹페이지 기능 하나만 도와주실분.(HTML,CSS,JS) 써서요ㅠㅠ
학원에서 배우고있는데 잘모르겠어요..

일단 첫번째로 올린 이미지는 지금까지 한거 입니다
기능 하나만 더 추가하면 페이지완성인데 어떻게하는지 모르겠어요...
설명하자면
2번째 이미지처럼 좌,우에 세모 버튼을 클릭시
이미지가 하나씩 다른이미지로 이동하는걸 구현하고싶은데 
어떻게하는지 모르겠어요.. 하나만 구현하면 완성인데ㅠㅠ
일단 코드 알려드릴게요..
css, html 코드 적어둘테니 기능 하나만 더 추가해서 코드작성해서 답변 부탁드립니다 ..
학원에서두 배우는데 어렵네여 ㅠㅠ

코드는 위는 html 
아래는 css 코드 입니다..






html
<div><pre><!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>HairRok</title>
   <link rel="stylesheet" type="text/css" href="../css/Face_An_OK.css">
   <script src="../js/Include.js"></script>
</head>
<body style="background-color: #EFE5FC;">
<div id="navbar"></div>

<!-- Main content area -->
<div style="text-align: center;">
   <h1 style="font-family: 'GmarketSans';">당신의 얼굴은 ○○○ 얼굴형 입니다.</h1>
   <h2 style="font-family: 'GmarketSans';">추천 헤어 스타일</h2>

   <div id="faceShapes">
       <!-- Face shape example 1 -->
       <div class="faceShape">
           <img src="../img/basic_profile.png" class="card-img-top" alt="계란형 얼굴형">
           <p>#컷</p>
     </div>

       <!-- Face shape example 2 -->
       <div class="faceShape">
           <img src="../img/basic_profile.png" class="card-img-top" alt="하트형 얼굴형">
           <p>#펌</p>
     </div>

       <!-- Face shape example 3 -->
       <div class="faceShape">
           <img src="../img/basic_profile.png" class="card-img-top" alt="각진 얼굴형">
           <p>#컷</p>
     </div>
 </div>
</div>

<!-- Button Container -->
<div class="button-container">
   <button type="button" class="btn" onclick="redirectToDesigner()">추천디자이너보러가기</button>
</div>

<div id="footer"></div>

<script>
   function redirectToDesigner() {

window.location.href = 'your_destination_page.html';
    }
</script>
</body>
</html>


css

<div><pre>body {
background-color: #EFE5FC; /* 전체 배경색 설정 */
  font-family: 'GmarketSans'; /* 폰트 적용 */
}

h1, h2 {
font-family: 'GmarketSans'; /* 폰트 적용 */
}

#faceShapes {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3개의 칼럼으로 구성 */
  gap: 20px; /* 그리드 항목 사이의 간격 */
  justify-content: center; /* 가로 중앙 정렬 */
  align-items: center; /* 세로 중앙 정렬 */
  padding: 20px; /* 그리드 주변 여백 */
  max-width: 1400px; /* 그리드 컨테이너의 최대 너비를 늘림 */
  margin: auto; /* 페이지 중앙에 그리드 컨테이너 배치 */
}

.faceShape {
background-color: #fff; /* 그리드 항목 배경색을 흰색으로 설정 */
  border: 1px solid #ccc; /* 테두리 */
  border-radius: 10px; /* 모서리 둥글게 */
  padding: 20px; /* 내부 여백 */
  width: 400px; /* 너비를 늘림 */
  height: 450px; /* 높이를 늘림 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 그림자 효과 */
  display: flex; /* 플렉스박스 레이아웃 사용 */
  justify-content: center; /* 가로 방향으로 중앙 정렬 */
  align-items: center; /* 세로 방향으로 중앙 정렬 */
  flex-direction: column; /* 항목들을 세로로 쌓음 */
}

.faceShape img {
width: auto; /* 이미지의 너비 자동 조절 */
  max-width: 100%; /* 최대 너비를 그리드 항목에 맞춤 */
  height: auto; /* 이미지의 높이를 자동으로 조절 */
  display: block; /* 이미지를 블록 레벨 요소로 만들어줌 */
  margin: auto; /* 이미지를 수직으로 중앙에 배치 */
}

.moreInfoButton {
background-color: #E2FFF8;
display: block;
margin: 20px auto;
padding: 15px 30px;
width: 300px;
height: 60px;
font-family: 'GmarketSans'; /* 버튼에 폰트 적용 */
  font-size: 18px; /* 글자 크기를 늘림 */
}

.button-container {
display: flex;
justify-content: center;
align-items: center;
height: 100px; /* Adjust the height as needed */
}

.btn {
background-color: #E2FFF8;
border: 1px solid #000;
color: #000;
padding: 20px 30px;
font-size: 1.1rem;
font-weight: bold;
border-radius: 0;
width: 18%;
}


#웹페이지 기능 #웹페이지 기능정의서 #웹페이지 기능 구현 #웹페이지 검색 기능 구현 #웹페이지 미리보기 기능 #웹페이지 알림 기능 #웹페이지 돋보기 기능 #웹페이지 로그인 기능 #웹페이지 번역 기능 #웹페이지 캡쳐 기능

profile_image 익명 작성일 -

보통 슬라이드는 잘만들어져있는 플러그인을 가져다 쓰는게

실무에서도 일반적인데요.

​

보아하니 학습목적이 있으신것 같네요~

​

지금 질문자님의 코드를 제가 수정해서 만들어드리는것 보다는

예제코드를 드릴테니 넣어서 한번 만들어보시는것이 좋을것 같습니다.

​

​

가장 단순한 좌우 슬라이드 코드입니다.

참고해보시고 잘안되시면 댓글이나 문의남겨주세요~

도움이 되었으면 좋겠네요!!

즐코하세요~^^

<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>슬라이드 카드 섹션</title> <style> .slider-container { position: relative; width: 300px; overflow: hidden; } .slider-content { display: flex; width: calc(300px * 3); /* 총 카드의 너비 (예시는 3개의 카드) */ transition: transform 0.5s ease; } .card { width: 300px; margin-right: 10px; } .button { position: absolute; top: 50%; transform: translateY(-50%); background-color: #ddd; border: none; padding: 10px; cursor: pointer; } .prev { left: 0; } .next { right: 0; } </style> </head> <body> <div class="slider-container"> <div class="slider-content"> <!-- 카드 1 --> <div class="card"> <img src="thumbnail1.jpg" alt="썸네일 1"> <h3>제목 1</h3> </div> <!-- 카드 2 --> <div class="card"> <img src="thumbnail2.jpg" alt="썸네일 2"> <h3>제목 2</h3> </div> <!-- 카드 3 --> <div class="card"> <img src="thumbnail3.jpg" alt="썸네일 3"> <h3>제목 3</h3> </div> </div> <button class="button prev" _onclick="moveSlide(-1)">&#9664;</button> <!-- 이전 버튼 --> <button class="button next" _onclick="moveSlide(1)">&#9654;</button> <!-- 다음 버튼 --> </div> <script> let currentSlide = 0; const slides = document.querySelector('.slider-content'); const totalSlides = slides.childElementCount; function moveSlide(direction) { if(direction === 1 && currentSlide < totalSlides - 1) { currentSlide += direction; } else if(direction === -1 && currentSlide > 0) { currentSlide += direction; } slides.style.transform = 'translateX(' + (-300 * currentSlide) + 'px)'; } </script> </body> </html>

​

연관된 질문 답변 리스트

Bootstrap, HTML, CSS, JS 웹페이지...

기본적인 HTML, CSS, JS공부 후 간단한 웹페이지 프로젝트를 해보려고... 사용한 JS 라이브러리만 링크되어있고 어디서 어떤 기능을 가져왔는지 도저히...

웹개발) html, css, JS 등을 분리해놓은...

html은 웹페이지 뼈대 담당 css는 디자인 담당 js는 동적인 기능 담당 세개로 나눠져있는 이유가 뭔가여 JS에서... 상담진행을 도와드리도록 하겟습니다. < 웹개발에 필요한...

프레임워크와 html,css,js 질문

... 프레임워크는 자주 쓰이는 기능들을 미리 구현해놓은 하나의... HTML,CSS,JS를 이용해서 처리해야하는 복잡한 작업들을 좀더 손 쉽게 처리할 수 있도록 도와주는 도구에...

html css js 질문

... 만들어지는 기능을 한번 만들어 보고 싶어요 하지만 뭐부터 해야 하는지 모르겠어요 책은 do it html css js 있어요... 만약 페이지 디자인까지 희망을 한다면 포토샵...