TOSS_CLONE(JavaScript) 마무리

🔗LINK

• 원본 : https://toss.im
• 배포용 : https://0huns.github.io/clone_toss

1. UI / UX

📑 반응형 웹

<link rel="stylesheet" href="media.css" type="text/css" 
					media="screen and (max-width: 640px)"/>

HTML의 link 태그로 외부 스타일 시트인 "media.css"를 문서에 연결하여 화면의 너비가 640px 이하인 경우에만 적용되도록 설정했다.
미디어 쿼리Media Query 를 사용하여 모바일 화면에서의 스타일을 적용하였다.

또한 HTML의 Semantic 태그와 CSS의 Flex와 Grid를 활용하여 화면 크기에 유연하게 변경되는 전체적인 프레임을 구현했다.

🤖 Animation

CSS와 애니메이션 효과를 사용하여 화면에 있는 요소를 특정한 움직임과 투명도 변화를 주면서 애니메이션하는 기능을 구현했다.
이렇게 설정된 애니메이션은 주어진 요소가 화면 아래에서 위로 올라가면서 나타나다가 다시 아래로 사라지는 동작을 반복한다.

<style>
  @keyframes move {
      0%{
          bottom: 3rem;
          opacity: 0;
      }
      30%{
          bottom: 1rem;
          opacity: 1;
      }
      50%{
          bottom: 2rem;
          opacity: 1;
      }
      70%{
          bottom: 1rem;
          opacity: 1;
      }
      100%{
          bottom: 3rem;
          opacity: 0;
      }

  }
</style>

@keyframes의 애니메이션 이름을 지정하고, 중괄호 {} 내부에 키프레임들을 퍼센트로 구분하여 각 퍼센트에 부여하고 싶은 효과를 지정했다.

<style>
  .section_1_downTab{
      position: absolute;
      bottom: 3rem;
      animation: move 3s infinite;
      cursor: pointer;
  }
  </style>

그 후에 적용하고자 하는 요소에 animation 속성을 사용하여 애니메이션 이름과 지속시간, 반복 횟수를 설정하였다.

2. JS 주요 기능

🛠️ 다운 탭 클릭 시 화면 이동

• window.scrollBy 함수를 사용하여 화면을 이동.
• 이벤트 핸들러 함수를 정의하고, 클릭 이벤트를 감지하여 해당 섹션으로 스크롤 이동.

<script>
let down = document.querySelector('.section_1_downTab');
let section2 = document.querySelector('.section_base_even');

function downtab(event){
    event.preventDefault();

    window.scrollBy( 0, section2.getBoundingClientRect().top - 60 );
}

down.addEventListener('click', downtab);
</script>

🛠️ 메뉴 바 스크롤 시 고정

• window.scrollY 값을 감지하여 메뉴 바의 스타일을 동적으로 조절.
• borderBottom 속성을 추가하거나 제거하여 헤더를 고정.

<script>
let header = document.querySelector('header');

function navfix(event){
    event.preventDefault();

    if(window.scrollY > 0){
    header.style.borderBottom = "1px solid #c1c1c1";
    }else{
        header.style.borderBottom = "none";
    }
}

window.addEventListener('scroll' , navfix);
</script>

🛠️ 각 섹션의 스크롤 액션

• window.addEventListener('scroll')를 사용하여 스크롤 이벤트를 감지.
• 각 섹션별로 스크롤 위치에 따라 다양한 요소들에 대한 액션을 처리.
• classList.add를 사용하여 스크롤 시 특정 요소에 클래스를 추가하여 나타내기 효과를 부여.
• setTimeout()을 사용하여 스크롤 이벤트 감지 후 순차적으로 요소가 나타나도록 설정.
• 스크롤 위치에 따라 이미지의 투명도를 변경하는 함수 scrollOpacity를 정의하여 사용.
• 중복된 클래스 명을 가진 요소들은 forEach()를 사용하여 효과 적용

<script>
//예시
const scrollAction = function (element) {
    element.classList.add('scroll_action');
}

function section5() {
    let word = document.querySelectorAll('.section_title_word')[2];
    let img = document.querySelector('.section_5_image');
    let word2 = document.querySelector('.section_5_word2');
    let word1s = document.querySelectorAll('.section_5_word1-1');

    if (window.innerHeight > word.getBoundingClientRect().top) {
        scrollAction(word);
        setTimeout(function(){scrollAction(img)},500);
        setTimeout(function(){scrollAction(word2)},1000);
        setTimeout(() => {
            word1s.forEach((word1, index) => {
                setTimeout(() => {
                scrollAction(word1)
            }, index * 500);
            });
        }, 1500);
    }
}
</script>

3. 느낀점

자바스크립트 토이 프로젝트인 ToDoList를 만들어보고 난 후, 이전에 HTML과 CSS로 만들어놓은 TOSS 클론페이지에 자바스크립트로 기능을 구현했다. 생각보다 기능 구현에 큰 어려움은 없었지만 중복된 클래스 명과 다양한 섹션으로 동일한 기능을 만드는데 JS코드를 효율적으로 짰으면 하는 아쉬움이 있다. 아직 정확히 알지 못하는 JS에 공부가 더 필요할 것 같다.
그리고 다음 프로젝트에서는 Repain와 Reflow, SEO 등등 최적화에 신경써서 제작해봐야겠다. (+서버,데이터)