🖥 Valorant 홈페이지 클론 코딩

라이엇 게임즈 발로란트의 공식 홈페이지를 클론 코딩한 프로젝트입니다.

🖱 프로젝트 관련 사이트 주소

📑 프로젝트 간략 설명 및 주제선정 이유

처음으로 진행한 클론 코딩 프로젝트입니다.

첫 클론 코딩인만큼 정(?)이 많이 가도록 평소에 자주 즐겨하던 게임인 발로란트를 주제로 제작하였습니다.

5일 가량의 시간동안 디테일적인 부분을 살리고자 심혈을 기울였으며,

HTML과 CSS로 구현 가능한 선에서 최대한 비슷한 페이지를 만들어 보았습니다.

💡 프로젝트간 수행 목표

1. HTML

  - header, section,footer와 같은 시멘틱 태그와 친숙해지기
  - URL을 배포하였을 때 실제 사이트와 같이 설명 + 썸네일이 나오도록 meta태그 사용해보기
  - 공식 홈페이지와 최대한 비슷한 구성요소 유지하기

2. CSS

  - position 속성의 relation, absolute 이해하기
  - 네비게이션 바, 버튼 등 hover시 동작하는 부분 구현하기
  - CSS Flex를 활용하여 각 요소들 구성하기

3. README.md

  - 타 수강생들의 README.md 파일을 참고로 하여 작성 요령 익히기

📺 구현 화면

⚙ 주요기능 및 사용한 것

1. DropDown navbar 구현

2. 세션별 버튼 hover 효과 구현

3. 사용한 것

• 눈누-검은고딕체
• Font Awesome

🥈 아쉬운점

1. 기능의 부족

JS의 사용 미숙으로 인해 일부 기능들(로그인 유도 모달창, 검색, 언어변경)과

상호작용하여 동작하는 여러 요소들에 대한 구현이 다소 아쉬웠습니다.

2. 코드작성 요령의 부족

또한 프로젝트의 수행하며 HTML, CSS 코드를 작성하다 보니 반복되는 요소에서도 클래스명을 통일하지 못하였으며,

화면에 표시되는 요소들의 위치를 표시하는데 있어 디테일적인 부분을 추구하다 보니

대부분 px로 일일이 지정하여 위치시키는 바람에 시간대비 효율이 다소 떨어진 부분이 존재했습니다.

📢 앞으로 수행해야 할 것들

1. 반응형 웹사이트 구현 학습하기

2. 클론코딩시 사이트에 기능 추가적으로 부여하기

3. HTML 및 CSS 코드 체계화 하기

4. SCSS 스타일링 학습