웹 퍼블리셔 (제네시스 퍼블리싱)

이번에는 제네시스 홈페이지를 웹 퍼블리싱 해보았다.

이번 제네시스 홈페이지를 웹 퍼블리싱 하면서 혼자서 깨달은 점이 있다.

저번 홈즈케어 홈페이즈를 퍼블리싱 할때에는 버튼 슬라이드 형태의 사용자의 기준에 맞춰서 이동하는것을 파악했다면,

이번에는 무한 루프로 작동되는 슬라이드배너를 만들어보았다.

저번에 만든 슬라이드배너를 다시 생각해보면서 슬라이드 배너를 만드는 것은 크게 문제가 되지 않았다.

다시 기록해 보자면 해당 윈도우에서 컨테이너가 가지고 있는 길이값을 구해서 그 길이 값을 이동시켜주는것이다.

const img_slide = (index) => {

img_banner.current.style.transition = "all 1s"

img_banner.current.style.transform = `translateX(-${img_banner.current.clientWidth*index}px)`

}

index의 값은 컨테이너의 길이에 맞게 입력해주면 된다.

그래서 슬라이드 배너를 만드는 것 까지는 어렵지 않게 만들 수 있었다.

여기서 겪은 문제는 무한루프로 스스로 자동으로 돌아가는 배너를 만드는것인데

자연스럽게 기본이 되어야겠다고 생각한것은 setInterval이다. setInterval을 사용해야겠다는것은 알고있었는데,

그 안의 구조는 어떻게 해야 할 지 잘 몰라서 일단 for문을 집어넣었다. 하지만 적용이 되지않아서 왜 그런지 생각하고 있었는데, setInterval 자체가 for문의 역활을 하지 않을까라는 생각을해서 for문을 삭제하였다.

그랬더니 setinterval함수가 실행이 되는것이다, 그래서 숫자변수를 하나 만들어놓고 컨테이너의 길이만큼의 조건문을 걸어 놓았다.

여기서 컨테이너 숫자는 기본 컨테이너의 +1 인 숫자다 그 이유는 클론이 존재하기 때문이다. 클론의 존재 이유는 조금 있다가 설명하도록 하겠다.

변수에 값에 맞춰서 자동으로 움직여주는 setInterval을 만들었다.

let count = 1;

const slide_infinite = setInterval(()=>{

if(count === img_banner.current.childElementCount){

img_banner.current.style.transition = "none"

img_banner.current.style.transform = `translateX(-${img_banner.current.clientWidth*0}px)`

btn_color(0, "transparent", "2px solid #fff", 1, "#808388", "none" , 2, "#808388", "none" , 3, "#808388", "none" , 4, "#808388", "none" , 5, "#808388", "none" , 6, "#808388", "none" , 7, "#808388", "none" , 8, "#808388", "none" , 9, "#808388", "none" , 10, "#808388", "none")

setTimeout(()=>{count = 0}, 100)

}

else if(count !== img_banner.current.childElementCount){

img_banner.current.style.transition = "all 1s"

img_banner.current.style.transform = `translateX(-${img_banner.current.clientWidth*count}px)`

if(img_banner.current.style.transform === `translateX(-${img_banner.current.clientWidth*1}px)`){

btn_color(0, "#808388", "none", 1, "transparent", "2px solid #fff" , 2, "#808388", "none" , 3, "#808388", "none" , 4, "#808388", "none" , 5, "#808388", "none" , 6, "#808388", "none" , 7, "#808388", "none" , 8, "#808388", "none" , 9, "#808388", "none" , 10, "#808388", "none")

}

else if(img_banner.current.style.transform === `translateX(-${img_banner.current.clientWidth*2}px)`){

btn_color(0, "#808388", "none", 1, "#808388", "none" , 2, "transparent", "2px solid #fff" , 3, "#808388", "none" , 4, "#808388", "none" , 5, "#808388", "none" , 6, "#808388", "none" , 7, "#808388", "none" , 8, "#808388", "none" , 9, "#808388", "none" , 10, "#808388", "none")

}

else if(img_banner.current.style.transform === `translateX(-${img_banner.current.clientWidth*3}px)`){

btn_color(0, "#808388", "none", 1, "#808388", "none" , 2, "#808388", "none" , 3, "transparent", "2px solid #fff" , 4, "#808388", "none" , 5, "#808388", "none" , 6, "#808388", "none" , 7, "#808388", "none" , 8, "#808388", "none" , 9, "#808388", "none" , 10, "#808388", "none")

}

else if(img_banner.current.style.transform === `translateX(-${img_banner.current.clientWidth*4}px)`){

btn_color(0, "#808388", "none", 1, "#808388", "none" , 2, "#808388", "none" , 3, "#808388", "none" , 4, "transparent", "2px solid #fff" , 5, "#808388", "none" , 6, "#808388", "none" , 7, "#808388", "none" , 8, "#808388", "none" , 9, "#808388", "none" , 10, "#808388", "none")

}

else if(img_banner.current.style.transform === `translateX(-${img_banner.current.clientWidth*5}px)`){

btn_color(0, "#808388", "none", 1, "#808388", "none" , 2, "#808388", "none" , 3, "#808388", "none" , 4, "#808388", "none" , 5, "transparent", "2px solid #fff" , 6, "#808388", "none" , 7, "#808388", "none" , 8, "#808388", "none" , 9, "#808388", "none" , 10, "#808388", "none")

}

else if(img_banner.current.style.transform === `translateX(-${img_banner.current.clientWidth*6}px)`){

btn_color(0, "#808388", "none", 1, "#808388", "none" , 2, "#808388", "none" , 3, "#808388", "none" , 4, "#808388", "none" , 5, "#808388", "none" , 6, "transparent", "2px solid #fff" , 7, "#808388", "none" , 8, "#808388", "none" , 9, "#808388", "none" , 10, "#808388", "none")

}

else if(img_banner.current.style.transform === `translateX(-${img_banner.current.clientWidth*7}px)`){

btn_color(0, "#808388", "none", 1, "#808388", "none" , 2, "#808388", "none" , 3, "#808388", "none" , 4, "#808388", "none" , 5, "#808388", "none" , 6, "#808388", "none" , 7, "transparent", "2px solid #fff" , 8, "#808388", "none" , 9, "#808388", "none" , 10, "#808388", "none")

}

else if(img_banner.current.style.transform === `translateX(-${img_banner.current.clientWidth*8}px)`){

btn_color(0, "#808388", "none", 1, "#808388", "none" , 2, "#808388", "none" , 3, "#808388", "none" , 4, "#808388", "none" , 5, "#808388", "none" , 6, "#808388", "none" , 7, "#808388", "none" , 8, "transparent", "2px solid #fff" , 9, "#808388", "none" , 10, "#808388", "none")

}

else if(img_banner.current.style.transform === `translateX(-${img_banner.current.clientWidth*9}px)`){

btn_color(0, "#808388", "none", 1, "#808388", "none" , 2, "#808388", "none" , 3, "#808388", "none" , 4, "#808388", "none" , 5, "#808388", "none" , 6, "#808388", "none" , 7, "#808388", "none" , 8, "#808388", "none" , 9, "transparent", "2px solid #fff" , 10, "#808388", "none")

}

else if(img_banner.current.style.transform === `translateX(-${img_banner.current.clientWidth*10}px)`){

btn_color(0, "#808388", "none", 1, "#808388", "none" , 2, "#808388", "none" , 3, "#808388", "none" , 4, "#808388", "none" , 5, "#808388", "none" , 6, "#808388", "none" , 7, "#808388", "none" , 8, "#808388", "none" , 9, "#808388", "none" , 10, "transparent", "2px solid #fff")

}

count++;

}

}, 4000)

저기서 변수값을 let으로 준이유는 변하는 값이기 때문에 let으로 변수값을주었다.

그래서 이미지 컨테이너의 개수가 맞지않으면 let count의 변수값에 맞춰서 자동으로 슬라이드가 진행된다.

변수가 컨테이너의 숫자와 동일시되면 클론 컨테이너가 하나 존재한다느것인데 그떄 transition을없애서 움직이는 효과를 없애고 자연스럽게 첫번째 컨테이너로 이동하도록 만들어주었다.

다 만들고 나서 버튼의 css값이 변해야하는것에서도 문제를겪었는데, else if문에 if문을 적용하여, 값이 맞으면 버튼에 css효과를 주도록 만들었다. 이렇게 해서 처음으로 자동으로 무한루프 슬라이드를 만들어보았다.

요즘 코딩하면서 느끼는점인데 옛날에는 어떻게 해야하지하고 구글링으로만 찾아보고 따라쳤다면,

코드안의 요소를 확인하고 배치해봄으로써 가능 할 것 같다는 생각이 들게 된다. 뭔가 보는 눈이 생기는 것 같다.

이 함수는 버튼태그의 css변화를 주기위한 코드이다.

const btn_color = (index, color, border, index1, color1, border1, index2, color2, border2, index3, color3, border3, index4, color4, border4, index5, color5, border5, index6, color6, border6, index7, color7, border7, index8, color8, border8, index9, color9, border9, index10, color10, border10) => {

btn_container.current.children[index].style.backgroundColor = `${color}`

btn_container.current.children[index].style.border = `${border}`

btn_container.current.children[index1].style.backgroundColor = `${color1}`

btn_container.current.children[index1].style.border = `${border1}`

btn_container.current.children[index2].style.backgroundColor = `${color2}`

btn_container.current.children[index2].style.border = `${border2}`

btn_container.current.children[index3].style.backgroundColor = `${color3}`

btn_container.current.children[index3].style.border = `${border3}`

btn_container.current.children[index4].style.backgroundColor = `${color4}`

btn_container.current.children[index4].style.border = `${border4}`

btn_container.current.children[index5].style.backgroundColor = `${color5}`

btn_container.current.children[index5].style.border = `${border5}`

btn_container.current.children[index6].style.backgroundColor = `${color6}`

btn_container.current.children[index6].style.border = `${border6}`

btn_container.current.children[index7].style.backgroundColor = `${color7}`

btn_container.current.children[index7].style.border = `${border7}`

btn_container.current.children[index8].style.backgroundColor = `${color8}`

btn_container.current.children[index8].style.border = `${border8}`

btn_container.current.children[index9].style.backgroundColor = `${color9}`

btn_container.current.children[index9].style.border = `${border9}`

btn_container.current.children[index10].style.backgroundColor = `${color10}`

btn_container.current.children[index10].style.border = `${border10}`

}

옛날에는 이것을 노가다로 다 했을텐데 함수로 만들어놓으니 정말 편하다.

해당 함수 하나로 자동슬라이드배너와, 클릭이벤트리스너 두가지에 사용할수있다.

해당 클릭이벤트에는 따로 clearinterval를 입력해주었다.

const handle_btn_click = () => {

img_slide(0)

clearInterval(slide_infinite);

}

const handle_btn_click1 = () => {

img_slide(1)

clearInterval(slide_infinite);

}

const handle_btn_click2 = () => {

img_slide(2)

clearInterval(slide_infinite);

}

const handle_btn_click3 = () => {

img_slide(3)

clearInterval(slide_infinite);

}

const handle_btn_click4 = () => {

img_slide(4)

clearInterval(slide_infinite);

}

const handle_btn_click5 = () => {

img_slide(5)

clearInterval(slide_infinite);

}

const handle_btn_click6 = () => {

img_slide(6)

clearInterval(slide_infinite);

}

const handle_btn_click7 = () => {

img_slide(7)

clearInterval(slide_infinite);

}

const handle_btn_click8 = () => {

img_slide(8)

clearInterval(slide_infinite);

}

const handle_btn_click9 = () => {

img_slide(9)

btn_color(0, "#808388", "none", 1, "#808388", "none" , 2, "#808388", "none" , 3, "#808388", "none" , 4, "#808388", "none" , 5, "#808388", "none" , 6, "#808388", "none" , 7, "#808388", "none" , 8, "#808388", "none" , 9, "transparent", "2px solid #fff" , 10, "#808388", "none")

clearInterval(slide_infinite);

}

const handle_btn_click10 = () => {

img_slide(10)

btn_color(0, "#808388", "none", 1, "#808388", "none" , 2, "#808388", "none" , 3, "#808388", "none" , 4, "#808388", "none" , 5, "#808388", "none" , 6, "#808388", "none" , 7, "#808388", "none" , 8, "#808388", "none" , 9, "#808388", "none" , 10, "transparent", "2px solid #fff")

clearInterval(slide_infinite);

}

총 슬라이드배너의 컴포넌트 코드를 공개하겠다.

import "../css/Header.css"

import {useRef, useState} from "react"

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

import { faMagnifyingGlass } from "@fortawesome/free-solid-svg-icons";

import { faBars } from "@fortawesome/free-solid-svg-icons";

import { faAngleRight } from "@fortawesome/free-solid-svg-icons";

import { faPause } from "@fortawesome/free-solid-svg-icons";

import logo from "../img/logo.png"

import img1 from "../img/main_banner_img1.jpg"

import img2 from "../img/main_banner_img2.jpg"

import img3 from "../img/main_banner_img3.jpg"

import img4 from "../img/main_banner_img4.jpg"

import img5 from "../img/main_banner_img5.jpg"

import img6 from "../img/main_banner_img6.jpg"

import img7 from "../img/main_banner_img7.jpg"

import img8 from "../img/main_banner_img8.jpg"

import img9 from "../img/main_banner_img9.jpg"

import img10 from "../img/main_banner_img10.jpg"

import img11 from "../img/main_banner_img11.jpg"

function Header () {

/*useref*/

const img_banner = useRef();

const btn_container = useRef();

/*event function*/

const text_color = (event, color) => {

event.target.style.transition = "all 0.5s"

event.target.style.color = `${color}`