코드캠프 - 베이스캠프 16일차

오늘은 지금까지 배웠던 html, css, javascript를 복습하는 시간이다.
나는 내가 좋아하는 옷 브랜드인 인사일런스 홈페이지를 한국어 버전으로 만들어 보기로 하였다.
지금까지 배웠던 html, css, javascript 바탕으로 만들었다.

메인홈을 먼저 만들었다.
div로 구조를 만들고 사이드 메뉴와 배너를 만들었다.
이미지 부분은 iframe태그를 이용하여 다른 html 파일에서 이미지를 불러왔다.
그리고 배너 부분과 사이드 메뉴는 position: fixed으로 고정시켜 콘텐츠 부분만 스크롤이 가능하게 했다.
또 스크롤 버튼을 윈도우에서 숨겼다.

아래에 인사일런스 홈페이지에 대한 정보가 담긴 footer 부분을 만들었다.
flex를 이용하여 글자들을 정렬하였다.

위에 사진을 누르면 영상을 볼수 있다.
인사일런스라는 배너에는 글자의 크기가 변하는 애니메이션을 넣었다.
그리고 왼쪽에 사이드 메뉴를 선택시 선택한 것을 알수 있게 transition을 넣었다.

추가할 점, 보완할 점

아직 인사일런스 홈페이지랑 다른게 많고 넣은 기능도 많지가 않다.
배너 부분에 커서표시를 없애야 하고, 각 사이드 메뉴를 누르면 콘텐츠 부분이 바꿔는 부분 기능도 넣어야 한다.
또 로그인 기능과, 회원가입 기능도 넣어야한다.
앞으로 계속 코드캠프에서 배우는 것을 바탕으로 수정하고 기능을 추가하려고 한다.