1. 팀별 프로젝트 진행 상황 및 본인 업무 아임웹을 사용하여 사이트를 제작하기로 결정되었다. 무료 버전에서는 구성에 한계가 있어 오늘 업체에서 결제를 하고 큰 틀에서의 제작이 진행되었다. 전체적인 카테고리를 만들고 메인 페이지 작업을 할 예정이다. 오늘은 전체 페이지 구성을 먼저 하는 관계로 내가 맡은 건맥펍 영역은 어떤 구성으로 만들지만 미리 생각해 보았다. 건맥펍의 펍의 사진 외에 아직 필요한 데이터가 부족하여 전체적인 틀을 먼저 만들어야 할 것 같다.
2. 오늘 강의를 통해 프로젝트에 적용한 부분유튜브 페이지를 카피캣하는데에 전체적인 페이지 구성을 만들었다. 프로젝트를 함께 진행하기에 한 번에 많은 양을 진행할 수는 없었으나, html페이지를 만들고 이전에 만든 트위치와 같이 상단 네비영역과 레프트, 컨텐츠 영역을 구분하는 기능이 필요하다면 활용할 수 있을 듯 하다.
3. 어려웠던 점과 해결방법 오늘은 유튜브 페이지를 카피캣 하는 시간을 가졌다. html과 css, img파일을 만들고 title에 유튜브 튜토리얼을 적어주었다. 전체 공간을 지정하기 위해 wrapper로 id를 만들어 youtube-top-nav, left-nav, youtube-main을 만들어주고 레프트 네비 안에는 youtube-left-content영역을 만들어 주었다. css디폴트 값을 넣어주었다. 전체 영역에 마진과 패딩을 없애고 박스 사이징을 보더 박스로 설정하였다. 랩퍼 전체 영역에 포지션을 렐러티브로 설정하고 min-width값을 1320픽셀로 설정했다.
상단 메뉴와 왼쪽 사이드 메뉴, 유튜브 메인영역을 잡고 그 영역들에 대한 전체 디자인을 미리 적용했다. 탑 네비 영역은 포지션을 픽스드로 설정하고 높이 값을 56픽셀로 적용했다. 레프트 네비 영역에서 overflow-y를 오토로 설정하여 영역을 넘어갔을때 스크롤이 생기도록 설정했다. 또한 포지션을 픽스드로 설정하고 top으로 상단메뉴의 높이값만큼 내려주었다. 레프트 컨텐츠와 유튜브 메인은 포지션을 앱솔루트로 설정하고 백그라운드 컬러를 그레이로 설정한 뒤에 작업을 마쳤다.
4. 아쉬웠던 점 프로그래밍 자체도 처음이지만, 사용하는 솔루션을 어떻게 활용하는 지는 이전에 아는 부분이 없어 사용법을 익히는 데에 시간이 걸릴 듯 하다. 사이트 구성부터 세세한 설정도 윅스와 많이 차이가 나는 것 같다. 솔루션이 이전과 다르게 한국사이트에 좀 더 적합하다고 하니 그것을 활용할 수 있는 방향으로 사이트를 제작해야겠다. 다른 팀원이 맡은 회원가입과 예약 영역은 아임웹을 사용했을 때에 구성이 가능하다고 한다.
