사이트 제작 - 완성본 / 반응형

사이트 만들기 합본(진행중)

이때까지 배운 유형들을 활용하여 사이트를 만들었습니다.

원본 사이트 보기

원본 소스 보기

과정

1. 피그마로 레이아웃을 만듭니다.

2. 이때까지 만들어둔 유형들을 조합하여 사이트 코딩을 합니다.

각각의 유형별 코딩 방법은 링크를 참조해주세요.

1. 헤더 유형
2. 슬라이드 유형
3. 이미지 유형
4. 이미지/텍스트 유형
5. 카드 유형
6. 배너 유형
7. 텍스트 유형
8. 푸터 유형

또한 html과 css 소스 역시 소스보기를 통해 확인해주세요!

3. 반응형 작업을 합니다.

다른 종류의 디바이스에서도 사이트가 잘 작동할 수 있는지 확인하고 반응형 작업을 해줍니다.

3-2. 헤더가 깨지는 문제 발생

화면 크기를 줄였을 때 헤더의 글씨가 깨지는 문제가 발생합니다
문제 해결을 위해 햄버거 메뉴를 생성해줍니다.

3-3. 반응형 메뉴 나오게 하기

햄버거 메뉴 버튼을 눌렀을 때 하위 메뉴가 나오게 설정합니다.

4. 버그를 확인하며 버그 문제를 해결합니다.

Javascript

var swiper = new Swiper(".mySwiper", {
    navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
    },
    autoplay: {
        delay: 2000,
        disableOnInteraction: false,
    },
    pagination: {
        el: '.swiper-pagination',
        type: 'bullets',
        clickable: true,
    },
});

const btnStop = document.querySelector(".swiper-button-stop");
const btnStart = document.querySelector(".swiper-button-stop");
const btnHam = document.querySelector(".header__ham");
const btnMenu = document.querySelector(".header__menu");
const btnMenuList = btnMenu.querySelectorAll("ul li a");

btnStart.style.display = "none";

document.querySelector(".swiper-button-stop").addEventListener("click", () => {
    swiper.autoplay.stop();
    btnStart.style.display = "block";
    btnStop.style.display = "none";

});
document.querySelector(".swiper-button-play").addEventListener("click", () => {
    swiper.autoplay.start();
    btnStart.style.display = "none";
    btnStop.style.display = "block";
});

btnHam.addEventListener("click", () => {
    btnHam.classList.toggle("active");
    btnMenu.classList.toggle("active");
    document.body.classList.toggle("fixed");

})

btnMenuList.forEach((List)=>{
    List.addEventListener("click", ()=>{
        btnMenu.classList.remove("active");
        btnHam.classList.remove("active");
        document.body.classList.remove("fixed");
    })
})

window.addEventListener("resize", () => {
    let width = window.innerWidth;
    if (width > 1300) {
        document.body.classList.remove("fixed");
        btnMenu.classList.remove("active");
        btnHam.classList.remove("active");

    }
});

document.querySelectorAll("a").forEach(li => {
    li.addEventListener("click", (e) => {
        e.preventDefault();
        document.querySelector(li.getAttribute("href")).scrollIntoView({
            behavior:"smooth"
        });
    });
});