이번 패스트캠퍼스X야놀자 부트캠프 프론트엔드 과정의 HTML/CSS 과제에 대해 이야기해보려 합니다.

과제 주제 : 자신이 원하는 사이트 레이아웃 클론

1. 클론 한 사이트

클론 한 사이트

https://www.pinkfong.com/ko/index.html

클론 할 사이트로는 핑크퐁 공식 사이트를 골랐는데 이유는 먼저 레이아웃이 크게 복잡하지 않고,

깔끔한 스크롤 애니메이션이 적절하게 있어서 골랐습니다.

2. 구현한 내용

레이아웃 구성으로는 크게 header, main, footer로 나눠서 작업을 하였습니다.

- header

먼저 헤더는 logo, navigation, sotial의 3가지 부분을 dispaly: flex를 사용하여 적절히 배치하였고

position: absolute를 사용하여 드롭다운을 만들어 봤습니다.

- main

메인 레이아웃은 자바스크립트를 제외하면 솔직히 어려운 건 없었고 단순한 이미지, 택스트 배치와

사업 소개 부분에 display: grid를 활용한 card배치정도가 끝이었습니다.

반응형으로는 우선 header가 뷰포트의 넓이가 줄어들면 사이드바로 보이도록 만들어봤습니다.

사이드바는 아래처럼 position 속성에 변화를 주어 옆에서 나타나도록 만들었습니다.

그리고 빈약하지만 메인 부분도 반응형으로 도전해 봤습니다.

3. 사용한 라이브러리 및 스택

HTML / CSS

HTML과 CSS를 사용하였고, HTML파일 한 개, CSS파일 한 개로 관리하였습니다.

JavaScript

자바스크립트는 스크롤 시 동작하는 요소가 많이 있어서

scroll 이벤트와 intersectionObserver API를 활용하여 코드를 작성해 봤습니다.

4. 아쉬운 점, 느낀 점

완성도

원본 홈페이지와 비교해 보면 겉으로는 비슷해 보이지만 내부적으로 코드가 난잡하고 html구성, 클래스 이름이 직관적이지 않음 등 코드적으로는 완성도가 낮은 것 같습니다.

어려웠던 점

- 자바스크립트

HTML/CSS과제지만 홈페이지의 메인이 되는 것이 스크롤 이벤트이기 때문에 자바스크립트를 사용하지 않을 수 없었습니다.

아직 자바스크립트가 익숙하지 않아 사소한 스크롤 이벤트 하나를 구현하는데도 시간이 오래 걸렸습니다.

- HTML / CSS

시멘틱 태그 작성과 클래스 네이밍에 관하여 어려움이 있었습니다.

느낀 점

제가 가장 간과한 부분이 HTML과 CSS는 별거 없다고 생각했던 것이었습니다.

정말 사소한 부분인 줄 알았던 시멘틱 태그 작성하기 클래스 이름 정할 때 BEM구조를 이용하여 작성하기 등

제가 지금까지 무시하고 공부했다는 게 크게 느껴졌습니다.

이번 HTML / CSS과제로 이러한 부분에 대한 연습이 필요하다는 것을 느껴 큰 도움이 되었습니다.

5. 개선 사항

추가 기능

원본 사이트를 보면 아래처럼 링크를 클릭했을 때 마우스의 위치에 따라 배경이 나타나도록 구성되어 있습니다.

과제 기간에는 시간문제로 구현하지 못했지만 나중에라도 한번 구현해 보면 좋을 것 같습니다.

코드 개선

- 자바스크립트

자바스크립트에서 요소의 스크롤 이벤트가 화면 뷰포트 넓이나 높낮이가 바뀌어도 동적으로 잘 작동하도록

아래처럼 intersectionObserver API를 사용하여 반복문 안에 이벤트를 집어넣었습니다.

const observer = new IntersectionObserver((e) => {

e.forEach((v, i) => {

if (v.isIntersecting) {

const currentY = window.scrollY;

const currentH = v.target.offsetHeight;

window.addEventListener("scroll", () => {

const opacity = opacityHandle(currentY, currentH);

// console.log(opacity);

if (opacity >= 0) {

v.target.style.opacity = opacity;

} else {

v.target.style.opacity = 1 - opacity;

}

});

}

});

});

하지만 반복문 안에 이벤트를 집어넣음으로써 성능적인 문제가 발생하지 않을까 생각이 듭니다.

어떤 식으로 개선시킬 수 있을지 공부를 해 본다음 이러한 성능적 이슈를 해결해야 할 것 같습니다.

[패스트캠퍼스X야놀자] 프론트엔드 개발 부트캠프_HTML/CSS 과제