2024.04.16 웹 페이지 제작

 

Pico CSS를 활용한 웹 페이지 제작

 

 

페이지에 들어가면 위 사진과 같다.

 

 

추가해 본 기능

 

1. 스크롤 Progress bar

끝까지 내려가면 Progress bar가 가득 찬 것을 볼 수 있다.

 

 

토글을 누르면(해당 페이지에선 "나를 미치게 하는 것들") 페이지가 펼쳐지며 Progress bar가 업데이트 된다.

 

 

스크롤 이벤트 발생 시, 현재 페이지 진행상태를 계산하여 Progress Bar의 Value값을 조절하였다.

 

<<최종 script>>

    <script type="module">
            function onScrolls() {
            console.log("Scrollllll");
            
            const scrollTop = document.documentElement.scrollTop;
            const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
            const scrollWidth = (scrollTop / height) * 100;

            $('#bar').attr("value", scrollWidth);
        }
        window.addEventListener('scroll', () => onScrolls());
   
        $('.summaryButton').click(function(){
            setTimeout(function(){onScrolls()},100);
        })
    </script>

 

 

최종 수정본 전에는 JS의 moudle을 사용했던 지라, 토글들을 누를 시 uncaught referenceerror: {클릭시 호출 할 함수 (여기서는 onScrolls)} is not defined 에러 코드가 호출되었다. 

 

<summary class="summaryButton">나를 미치게 하는 것들</summary>
↑↑↑
현재 코드


<summary onclick="onScrolls">나를 미치게 하는 것들</summary>
↑↑↑ 
에러가 발생했던 코드

 

오류가 발생하는 원인은 script의 type을 module로 했기 때문이었다.

 

모듈의 특징

 

 

• HTML문서가 준비된 후 실
• 인라인 스크립트에서도 async키워드 사용 가능
• 경로가 없는 모듈은 불가
• 모듈 내부에서 정의한 변수나 함수는 다른 스크립트에서 접근할 수 없다. (export와 import 사용)

아직은 module이 뭔지 정확히 이해하지 못했다.

정확히 왜 쓰이고, 어떤경우에 쓰이고, 어떠한 기능을 하는지 아직 잘 모르겠다.

 

그럼에도, 우선 에러를 수정하고자 했다.

위 코드블록에 있는 내용처럼 코드를 수정하고, js쿼리를 사용해 이벤트를 등록하였다. (기존에는 불러오지않고 onclick="onScrolls"로 대충 했었다.)

 

 

하지만 여전히 정상적으로 작동하지 않았다. (토글들을 클릭해도 Progress bar가 업데이트 되지 않았다.)

그 이유는 아래 코드 때문이다.

그래도 오류는 안뜬다. 

        $('.summaryButton').click(function(){
            setTimeout(function(){onScrolls()},100);
        })
     	   ↑   ↑   ↑ 현재 코드
           
        $('.summaryButton').click(function(){
        	onScrolls()
        })
           ↑   ↑   ↑ 실행이 원하는 대로 되지 않는 코드

 

이유는 추측하건데, 

1. 토글 클릭시 onScrolls()가 실행되 Progress bar 업데이트는 정상적으로 실행(console.log로 확인)
2. 하지만 토글이 완전히 열리기 전 실행이 끝나버려 Progress bar는 열리기 전을 기준으로 실행 

이 두가지 였다. 

 

다행히 setTimeOut함수를 사용해 잠깐의 여유를 두고 실행을 하면 제대로 실행되는 모습을 확인할 수 있었다. 

다만 이 함수도 여러가지 환경으로 인해 웹 페이지의 동작이 늦는다면 여전히 원하는 결과를 내지 않을 확률이 있다고 생각한다.  내가 원하는 것은 토글 기능이 완료된 후 업데이트를 실행하는 것인데, 아쉽게도 해당 기능을 어떻게 수행하는지 알 지 못해 마무리 하였다.

 

2. Navigation

 

잘 보면 우측에 뭔가 있다.

네비게이션에 커서를 갖다 대면 네비게이션이 나오는 애니메이션을 넣어 보았다.

window+shift+s로 캡쳐를해서 마우스 커서가 안보이긴 하는데 저기 위에 커서를 올리고 있다.

커서를 누르면 해당 페이지에서 미리 설정해둔 인덱스로 페이지가 이동한다.

애니메이션 기능은 해당 css를 사용했다.

        :root {
            --side-bar-width: 110px;
            --side-bar-height: 180px;
        }

        .side-bar {
            position: fixed;
            background-color: black;
            width: var(--side-bar-width);
            height: var(--side-bar-height);
            margin-top: calc((100vh - var(--side-bar-height)) / 2);
            margin-left: calc((100vw - var(--side-bar-width)));
            padding-left: 5px;
            border-radius: 15px;
        }

        .side-bar {
            transform: translate(calc(var(--side-bar-width)*0.6), 0);
            transition: .5s;
        }

        .side-bar:hover {
            transform: translate(-20px, 0);
        }

:root 가상 클래스를 사용해 navigation bar의 width와 height를 지정해 주었다.

 

애니메이션은 transform의 translate와 hover를 이용했다. 유니티에서 자주 보던 함수들과 똑같은 이름이라 어쩐지 반가운 기분이 들었다. 바로 나타나는 애니메이션 효과는 역시 언제 하든 재밌는 경험이다.

 

3. 그 외

 

그 외 잡다하게 오디오도 넣고, 비디오도 넣고 열심히 꾸몄다. 구글 드라이브로 음원을 재생하고 싶은데 잘 되지 않는데 나만 그런건 아닌거 같다. 

 

 

궁금한 점

 

위 코드 중 해당 코드에서 아직 잘 이해가 안가는 것이 있다.

        $('.summaryButton').click(function(){
            setTimeout(function(){onScrolls()},100);
        })

click의 매개변수 안에 바로 정의되어 있는 함수를 사용하면 왜 동작이 되지 않는 걸까? 그것도 모듈의 특성과 관계가 있는지 궁금하다.

 

마찬가지로 setTimeOut안에 매개변수(그 중 함수)도 정의되어 있는 함수를 사용하면 제대로 동작이 되지 않는다.

 

↓ ↓ ↓ 제대로 되지 않는 코드

        $('.summaryButton').click(SetTimeOut(OnScrolls(),100));

 

기회가 되면 여쭤봐야 겠다.