나만의 웹사이트 제작기

junah201·2022년 9월 3일
2
post-thumbnail

코드 : github
링크 : https://www.junah.me

프로젝트를 시작하게 된 계기

디스코드에서 다른 사람 프로필을 볼 때 자기소개 사이트가 있는 것이 너무 멋져보여서 옛날부터 웹 쪽을 배우면 나만의 사이트를 만들어야겠다는 소망이 있었다. 최근에 크롬 확장 프로그램을 만들면서 HTML, JS, CSS 관련 지식을 배웠고, 첫 웹사이트로 자기소개 사이트를 만들기로 결심했다. 물론 아직 고등학생이기 때문에 취업을 위한 포트폴리오는 아니고 이쁘게 만드는 것을 더 중심적으로 보아 만들기로 하였다.

구상

  • 스크롤을 했을 때 한번에 페이지가 탁 딱 내려가면서 화면이 한번에 바뀌는 기능
  • 나만의 키워드가 바뀌면서 나를 소개하는 기능
  • home 탭, about 탭 등 탭을 여러 개로 분리
  • 외부 JS 모듈 없이 바닐라 JS로 제작

HOME 페이지

위 GIF와 같이 저는 입니다. 부분은 fixed로 고정시키고, 나머지 부분이 바뀌면서 나를 소개할 수 있도록 설계하였다. 원래는 외부 모듈 없이 제작하려고 하였으나, 스크롤 이벤트 부분이 모바일에서 작동하지 않아 Swiper.JS 모듈을 사용하였다.

ABOUT 페이지

내가 할 수 있는 기술 스택, 알고리즘 (백준), 프로젝트 목록 등을 적어두었다.

반응형으로 제작

기본적으로 모든 단위를 rem으로 작성하고, 미디어 쿼리를 이용해서 root의 font-size를 수정하는 방식으로 반응형으로 제작하였다.

미디어 쿼리를 떡칠하는 방법 말고 더 좋은 방법이 있으면 좋을텐데 찾아봐야겠다.

파일 분리

js와 css 파일을 home 탭과 about 탭에서 중복으로 사용되는 부분은 파일을 분리해서 중복 작성되지 않도록 하였다.

// util.js

function createElement(tag, attrs) {
  const keys = Object.keys(attrs || {});
  const el = document.createElement(tag);
  for (let i = 0; i < keys.length; ++i) {
    el.setAttribute(keys[i], attrs[[keys[i]]]);
  }
  return el;
}

예를 들어 위와 같이 자주 쓰는 함수를 util.js 파일로 분리해두고

상단 헤더 부분의 css를 header.css로 분리해서 작성해두었다.

후기

처음 만들어본 웹 사이트였지만 생각보다 디자인이 이쁘게 나와서 기분이 좋았다.

코드 : github
링크 : https://www.junah.me

profile
개발자를 꿈꾸는 사람

0개의 댓글