포트폴리오 프로젝트

포트폴리오 프로젝트는 저를 브랜딩하기 위해 만든 웹 사이트 프로젝트입니다.

프로젝트 설명

포트폴리오 프로젝트는 기본적인 HTML, CSS, JS 기반의 웹 사이트입니다.

HTML

• HTML로 웹 사이트 구조를 잡을때 시맨틱 태그를 사용해서 각 태그마다 의미를 부여하였습니다.

• head 태그안에 meta 태그를 넣어서 SEO, 웹 접근성도 고려하였습니다.

• OG(Open Graph Data)도 추가해서 웹 사이트를 공유할때 웹 사이트에 대한 정보를 미리보기 형태로 사용자에게 제공해주었습니다.

CSS

• CSS는 태그에 클래스를 지정할때 BEM 방식을 도입해서 클래스 이름이 중복되지 않게 작성하였습니다.

• @media query를 사용해 반응형 스타일링도 구현하였습니다.

JavaScript

• JavaScript에서는 각각의 역할을 하는 코드들을 모듈 방식으로 파일을 나누어서 유지보수하기 쉽게 만들었습니다.

• IntersectionObserver API를 사용해서 페이지 섹션들을 관찰해 가장 많이 보이는 섹션을 헤더에 표시하는 기능을 추가하였습니다.

• 외부 라이브러리 TypeIt을 사용해 쉽게 Home 섹션에 글자를 타이핑하는듯한 효과를 주었습니다.