[Project] 자기 소개 페이지 제작기

[Ted's Log] 테드로그·2021년 7월 9일

Project Driven Study

목록 보기

4/6

👋 Prologue

웹 관련 개발 공부를 시작하는 시점에서 나를 소개하는 페이지를 제작해보았다. HTML, CSS, JS를 공부하고 있지만, 직접 웹 페이지를 구성하는 것은 처음이어서 도전적이면서 재미있게 진행할 수 있었다. 이번 리뷰 포스팅을 통해서 어떤 기능을 구현했으며 새로 배운 내용과 앞으로 보완해야 할 내용에 대해서 알아보려고 한다.

Come and Enjoy My Cover Letter

🔍 Project Overview

작업 기간

금요일 퇴근 후 집에 와서부터 시작을 해 주말을 꼬박 투자해서 3일에 걸려 만들었다.

기술 스택

HTML과 CSS 그리고 약간의 JavaScript를 사용했다.

주요 특징

화면 전환 없이 스크롤 기반의 자기소개 페이지를 만들었다.첫 Home Section에서 랜딩 페이지처럼 인상적인 사진과 글귀로 사용자의 흥미를 높이고자 했다. 그리고 주요 기능으로 배경 이미지에 패럴렉스 스크롤 효과를 주었으며, CSS grid를 활용한 Gallery Section을 만들었다.
화면 구성에는 윅스의 프리랜서 패션 모델 템플릿 참고하였다.

💡 Main Function

배경 이미지 효과

위 사진을 보면 뒷 배경에 약간의 transparent 효과가 들어간 것을 확인할 수 있다. 아주 자세히 봐야 한다. Home Section의 전체를 채우는 사진이기 때문에 html에서 상위 태그에 속해있게 되고 따라서 배경에 opacity을 부여하게 되면 다른 텍스트들이 같이 흐릿해지는 현상이 발생한다. 이를 방지하기 위해서 가상요소(Pseudo-element)를 사용했다. 또한 스크롤 시 배경 이미지는 고정이 되게하여 패럴렉스 스크롤의 가장 기초적인 요소를 구현했다.

#container::after {
  width: 100%;
  height: 100vh;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background: url(images/desk_macbook.jpg) center/cover no-repeat fixed;
  z-index: -1;
  opacity: 0.8;
}

Grid 기능을 통해 사진을 다양한 느낌으로 보여주기

다양한 사진을 통해서 내가 가치있게 생각하는 것들을 보여주고 싶었다. 박스 형태의 디자인을 어떻게 할 지 생각하다가 CSS에 Grid 요소를 갤러리에 활용하면 좋다는 내용을 알게되어서 적용하게 되었다. Grid를 적용하기 위해서는 Container 요소에 display 속성을 gird로 부여하는 것부터 시작한다. 그리고 Grid의 크기를 설정하기 위해서 grid-template-columns과 grid-template-row 속성을 부여하면 된다. Gird 영역에 사진을 연결하기 위해서는 grid-template-areas에 html 요소 중grid-area 속성이 부여된 요소의 값을 명시하면 된다.

.gallery__container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: auto;
  grid-gap: 1.5rem;
  grid-template-areas:
    "gallery__image__0 gallery__image__1 gallery__image__2 gallery__image__2"
    "gallery__image__0 gallery__image__3 gallery__image__4 gallery__image__5"
    "gallery__image__6 gallery__image__6 gallery__image__7 gallery__image__5";
  margin: 4rem;
}

💊 Things to improve

Javascript 내용이 정말이지 조미료 정도 느낌으로 들어갔다. Navigation 메뉴 클릭 이벤트 연결과 화면 스크롤 시 Navigation 메뉴 하이라이트 기능정도 구현이 되어 있다. 랜딩 페이지의 글귀를 타이핑 효과로 보여준다던가, 갤러리 이미지 눌렀을 때 다른 효과를 구현하는 데 Javascript 기능을 넣을 수 있을 것 같아서 조금 더 보완할 여지는 많이 남아있다.