홈페이지에 갤러리 기능 구현하기
JavaScript와CSS를 활용해 갤러리 제작하기
어제 일단 홈페이지에 현재까지 마지막으로 구현한 기능인 갤러리 기능이다. 갤러리 기능도 수많은 코드를 참조해봤는데 내 홈페이지에 가장 잘 맞는, 홈페이지에 정상적으로 알맞게 작동할 수 있는 기능이 뭐가 있는지 살펴보다가 클릭해서 슬라이드로 넘기는 갤러리 기능을 구글링해서 참고해서 코딩을 했다.
갤러리 기능을 구현하면서는 크게 직면해서 며칠동안 고생할 문제는 크게 없다고 느껴진다. 정상적으로 작동은 잘 하고 있으나 문제가 내가 원하는대로 기능이 아직 100%구현은 못하고 있다는 점에서는 며칠 갈 것같다는 예상이든다...
1. 기능 구현하기
갤러리를 제작하는데 있어 HTML은 물론 CSS, JavaScript를 활용했으며 무게감을 따지자면 이번것도 왠지 TOP버튼 처럼 CSS에 초점이 맞춰져있지 않나 생각이 든다.
1-1 HTML
HTML은 gallery라는 id값을 가진 div태그를 하나 더 만들어 페이지를 하나 더 추가하는 형식으로 만들었으며 그 안에 "myslides fade"라는 이름의 클래스를 붙였다. 간단히 요약하자면 해당 요소들을 활용해 HTML을 작성했다.
<!-- gallery 페이지 -->
<div id="gallery" class="profile">
<h2>GALLERY</h2>
<!-- 사진첩 제작 -->
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 5</div>
<img src="./img/tour1.jpeg" style="width: 50%;">
<div class="text">대학교 졸업 후 첫 일본여행</div>
</div>
</div>
<br>
<!-- 좌우 버튼 및 점 표시 -->
<div class="dot_button" style="text-align: center;">
<a class="prev" onclick="plusSlides(-1)">❮PREV</a>
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
<span class="dot" onclick="currentSlide(4)"></span>
<span class="dot" onclick="currentSlide(5)"></span>
<a class="next" onclick="plusSlides(1)">NEXT❯</a>
</div>
</div>위처럼 갤러리 페이지는 이렇게 작성했고 좌우 버튼과 활성화되는 사진 순서에 맞게 색깔도 변하고 그 점을 클릭했을 때 해당하는 사진으로 넘어갈 수 있는 기능을 구현하기 위한 코드이다.
1-2 CSS
갤러리 기능을 구현하기 위한 CSS코드와 JavaScript코드는 아래 사이트에서 참고를 하여 작성했다.
참고사이트: w3schools.com
코드들은 다음과 같다
img {
vertical-align: middle;
}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
margin-top: 10px;
margin-bottom: 10px;
}
/* Hide the images by default */
.mySlides {
display: none;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: relative;
padding: 10px;
color: #6d6e78;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
user-select: none;
}
/* Position the "next button" to the right */
.prev {
border-radius: 4px 0 0 4px;
padding-right: 30px;
}
.next {
border-radius: 0 4px 4px 0;
padding-left: 30px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(192, 222, 171, 0.8);
}
/* Caption text */
.text {
color: white;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* 글씨가 사진 배경에 안보일때 호버를 통해 시인성 향상 */
.text:hover {
font-weight: bold;
font-size: 2rem;
color: greenyellow;
}
/* Number text (1/3 etc) */
.numbertext {
color: #6d6e78;
font-size: 16px;
position: relative;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
animation-name: fade;
animation-duration: 1.5s;
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
.prev, .next,.text {font-size: 11px}
}CSS를 작성하면서 여기서도 애니메이션 기능을 더 알게됐다. 그리고 최하단에 미디어 쿼리가 적용된 것을 볼 수 있는데 어떻게 보면 해당 코드들도 따라치다 싶이 작성한 터라 아직까진 미디어 쿼리를 정확하게 적용하는 방법을 모르고 있는데 큰 화면 모니터에서 작업을 마치고 추후에 지인들에게 보여주기위해 깃헙에 수정해서 배포한 후 직접 들어가서 보니까 데스크탑에서 작업한대로 나오지않고 스마트폰 화면이 세로로 길다보니 페이지 자체가 너무 길어져서 나와 좀 답답하다는 느낌이 있었다.
- 데스크탑 기준
- 모바일 기준
해당 문제들은 전반적으로 추후에 nav들도 마찬가지고 페이지에 대한 전체에 미디어 쿼리를 적용해서 사용하는 기기에 맞는 내가 원하는 화면이 출력되게끔 작업이 필요하다. 아무래도 데스크탑 화면자체가 세로가 짧고 가로가 넓다보니 거기에 맞춰 작업을 하다가 세로가 길고 가로가 짧은 스마트폰에서 확인해보니 찌그러져있고 답답하다는 느낌이 많이 있다.
그리고 또한 사진하단의 텍스트가 사진 배경색에 따라 잘 보이지 않을것을 대비하여 hover가 되면 색이 바뀌고 폰트가 커지는 형식의 스타일링도 같이 추가했다.
- 호버링 될때의 텍스트
1-3 JavaScript
JavaScript코드도 마찬가지로 CSS와 동일한 페이지에서 같이 사용했다.
참고사이트: w3schools.com
코드는 다음과 같다.
/* 갤러리 슬라이드 기능 구현 */
let slideIndex = 1;
showSlides(slideIndex);
// 다음이전 버튼 컨트롤
function plusSlides(n) {
showSlides((slideIndex += n));
}
// 썸네일 이미지 컨트롤
function currentSlide(n) {
showSlides((slideIndex = n));
}
// 슬라이드 구현 함수
function showSlides(n) {
let i;
let slides = document.getElementsByClassName("mySlides");
let dots = document.getElementsByClassName("dot");
if (n > slides.length) {
slideIndex = 1;
}
if (n < 1) {
slideIndex = slides.length;
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " active";
}이번 갤러리 기능을 구현하는데 함수부분을 작성하면서 HTML부분을 스크립트의 메소드들을 활용해서 요소들을 끄집어내고 끄집어내서 수정하고 다시 보여주는 방식으로 접근을 하는 방법을 알게 되었다.
2. 오류 및 해결
작성하면서 작동이 심각하게 안돼거나 오류를 뱉는 상황은 없었다.
하지만 내가 원하는 기능이 제대로 구현이 안돼는 기능인데 사진 밑에 컨트롤러가 클릭해서 사진이 바뀔때 사진의 사이즈와 해상도에 따라 같이 왔다 갔다 한다는 점이 만들고나서 계속 돌리다보니까 거슬린다는 점이다.
어제(5월12일(목)) 사전스터디를 하면서 팀원들과 해당 부분에 대해 얘기를 나눴을 때 팀장께서 아이디어를 제시해주셨는데 그냥 사진 전체를 감싸는 div에 스타일로 높이값을 따로 주어 고정시키면 어떤가 라고 제시를 해주어 해보았는데 원하는대로 사진을 클릭할 때마다 고정이 되어 만족해하면서 다시 깃헙에 배포를 한 후 스마트폰으로 보았는데 완전히 엉망으로 나와 다시 코드를 원상복구 하였다.....
해당문제는 아직 해결되지 않아 추후 해결되는대로 글을 업데이트를 해야겠다...
