문시해알, 맞왜틀 TIL - 20230523

저번주에 TIL을 작성하지 못하고 이제 작성하는 중!!

저번주에는 새로운 팀원분들과 팀 소개 프로젝트를 진행하게 되었다.

나를 소개하기 위해서 이미지 슬라이드를 넣어보면 어떨까 하는 생각에 코드를 작성하기 시작했다.

내가 생각한 이미지 슬라이드는 아래 동영상과 같이 깔쌈하고 이쁜...

내가 생각한 이미지 슬라이드...

그.....런.....데..... 코드는 맞게 작성한거 같은데 이미지 슬라이드가 이상하게 출력되기 시작했다?..

문제점

자기소개 페이지에 HTML이미지 슬라이드를 추가할려고 했으나 script부분이 실행되지 않으면서 아래 사진과 같이

이상하게 출력되어 당황했던 것!!

왜이래.. 이거..

분명 코드는 맞는거 같은데 말이지요?.. 이렇게 style도 넣어주고!!

<style>
        .Slidesbackground {
            margin: 0;
            padding: 0;

        }

        .slideshow-image {
            border-radius: 3%;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        .mySlides {
            border-radius: 3%;
            width: 600px;
            height: 350px;
            display: flex;
            justify-content: center;
            align-items: center;
            box-shadow: 0px 15px 15px rgba(0, 0, 0, 0.5);
        }

        .slideshow-container {
            display: flex;
            justify-content: center;
            position: relative;
            margin: auto;
        }

        .fade {
            animation-name: fade;
            animation-duration: 1.5s;
        }

        @keyframes fade {
            from {
                opacity: .4
            }

            to {
                opacity: 1
            }
        }
    </style>

script코드도 넣어줬는데!! 왜 안돼.. 개발자들의 고충 맞왜틀...

<script>
        var slideIndex = 0;
        showSlides();

        function showSlides() {
            var i;
            var slides = document.getElementsByClassName("mySlides");

            for (i = 0; i < slides.length; i++) {
                slides[i].style.display = "none";
            }
            slideIndex++;
            if (slideIndex > slides.length) {
                slideIndex = 1
            }
            slides[slideIndex - 1].style.display = "block";

            setTimeout(showSlides, 2000); // 2초마다 이미지가 체인지됩니다
        }
    </script>

시도해본 것들

다음과 같은 오류를 보고 바로 구글링을 시작했다!!

style은 잘 출력이 되는걸 보고 script의 문제임을 깨닫고 script위주로 검색을 시작했다!!

html 이미지 슬라이드 오류, html 이미지 슬라이드 script 등등.. 검색하면서 고민에 빠지기 시작했다..

script코드가 틀리지 않았는데 먹지가 않는다.. 고민을 하던 그 때!! 그럼 내가 script코드의 "위치를"

코딩을 하다보면 들여쓰기가 맞지 않거나 코드를 처리할 때 위치가 알맞지 않아 발생하는 오류가 있는거처럼

script코드를 알맞게 넣지 못해서 발생하는 오류인가? 라는 생각을 하면서 script코드의 위치를 바꿔볼까?

라는 생각을 가지고 /head 위에 작성한 script코드의 위치를 /body 바로 위로 코드를 옮겨 보았다.

즉 body안에 이미지 슬라이드 html 코드를 작성하고 그 밑에 script코드를 넣어봤더니!!!!!!!!!!!!!!!!!!!!!!!!!

해결

script코드를 /head 위가 아닌 /body 위로 script코드의 위치를 변경했더니 내가 원하던 이미지 슬라이드가 탄생했다ㅠㅠ

알게 된 점

우선 어떻게 보면 금방 해결할 수 있는 문제였던거 같은데 경험이 많이 없다보니 쉽게 해결하지 못했던거 같다.

가장 크게 알게 된 점은 지금까지 html을 사용하면서 style코드와 script코드를 head안에 작성을 한다라고 생각하고

작성을 해왔었는데 이번 문제점을 통해서 꼭 그렇지만은 않다! 라는걸 알게 되었고 왜 head안에 작성하면 안되고

body부분에 작성을 해야 동작을 하는지는 의문이지만 알게되는 즉시 블로그를 수정할 계획에 있다.

문제점을 해결하면서 나름 만족하는 소개 페이지를 작성하였고 같이 교육을 듣는 교육생 중 나와 같은 문제를 겪은

교육생에게 알려줄 수 있는 계기가 된거 같아서 보람찬 하루였던거 같다.