사이트명 카카오
제작기간 22.04.21 ~ 22.04.24 (4일 소요)
사용언어 html, scss, js, jquery
사용플러그인 masonry, gsap
분류 반응형(PC-1st, MB-1st), 클론코딩

IT업계 최강자 카카오 사이트를 클린코딩 해봤습니다.

반응형 웹개발에 있어서 고려해야 할 점은 pc퍼스트로 개발을 할 것이냐,

아니면 모바일 퍼스트로 시작을 할 것이냐 입니다.

pc 퍼스트, 모바일 퍼스트 두 가지 방법으로 반응형을 구현 해보면서

두 가지 방법의 장단점을 확인할 수 있었습니다.

masonry.js로 불규칙한 레이아웃 배열을 표현했고 gsap timeline을 사용했고

전처리기(SCSS)를 사용하여 프로젝트를 진행해봤습니다.

반응형 웹(Responsive Web)

반응형 웹은 미디어 쿼리를 사용해 기기 화면의 크기를 확인하고

유연한 이미지와 그리드를 활용해 화면 크기 변화에 따라

페이지의 크기 및 레이아웃을 조절하는 기술을 말한다.

하나의 템플릿만을 사용해 다양한 사용자와 기기에 대응할 수 있어

개발이 간편하다는 장점을 가진다. 다만, 사용자는 단 하나의 기기만으로 접속하지만

그 경우에도 모든 기기를 위한 CSS를 전부 다운로드 해야한다는 점에서

데이터를 낭비하고 로딩 시간을 늘리는 단점을 가진다.

또, 기존에 이미 운영 중이었던 데스크톱용 사이트가 있었다면