0708

1. 팀별 프로젝트 진행 상황 및 본인 업무  

내일 미팅을 진행하기 전에 대략적인 플랫폼을 정하고 메인페이지의 구성을 의논해 보았다. 메인과 서브로 들어가는 내용이 어떤 것이 있을지 이야기를 나누었다. 그리고 강의내용 외에 활용할 수 있는 다른 웹사이트를 알아보았다. 오늘 중에 기획안을 받을 것으로 예정했으나, 내일 미팅 중에 협의할 수 있게 되어 미리서 정해가는 부분은 한계가 있을 것 같다.

2. 오늘 강의를 통해 프로젝트에 적용한 부분

오늘 강의 중에도 사이트의 헤더와 포지션 픽스드를 사용하여 화면에 고정시키는 작업을 했는데, 이 부분이 사이트에 적용이 가능하다면 활용해 보아도 좋을 것 같다. 상단의 로고가 오는 부분은 실습할 때마다 동일하게 적용되었던 부분이어서 만들게 될 페이지도 그러한 형식이 될 것으로 예상한다.

3. 어려웠던 점과 해결방법 

강의에서 오늘 카피캣을 진행한 부분은 트위치라는 사이트이다. 오늘은 사이트의 상단 영역을 작업했다. html파일과 css파일을 생성하고 타이틀과 링크를 설정했다. 상단 영역은 nav태그로 만들어 id를 top-nav로 설정하고 nav-wrap안에 nav-left영역과 center, right영역을 나누었다. 레프트 영역은 h1태그로 로고를 만들어 a태그 안에 이미지를 삽입하고, ul li a태그로 내용을 입력해주었다. 그 다음으로 div서랍 안에 a태그로 더보기 영역을 만들었다. 센터는 서치랩으로 검색과 버튼을, 라이트 영역에서는 마크랩과 두 개의 버튼, 프로필버튼을 만들었다.
css에서 전체 트위치 페이지에 적용할 마진과 박스사이징을 설정하고 다른 디폴트 값도 설정해 주었다. 탑네비는 width를 100%로 설정하고 포지션을 픽스드로 적용했다. 상단 레이어가 어그러지지 않도록 min-width도 설정했다. 레프트의 이미지에 크기를 설정하고 ul의 플렉스를 적용했다. 첫번째 li태그에 뒷부분에는 기호를 넣어주고 top으로 위치를 조정했다. 센터영역은 포지션을 앱솔루트로 설정하고 x축 중앙정렬을 시켰다. 서치 랩의 디스플레이는 플렉스로 적용하고 오버플로우 히든을 설정했다. 인풋과 버튼의 크기와 색상을 설정했다. 라이트 영역의 디스플레이도 플렉스로 적용하고 아이콘 마크의 디스플레이는 블럭으로, 알람은 아이콘 위에 위치시켰다. 나머지 로그인, 회원가입, 프로필 버튼의 디자인을 적용한 뒤에 작업을 마쳤다.

4. 아쉬웠던 점 

기획안을 미리 받아 협의하는 것이 아니라서 기존에 있던 프로젝트 업체의 사이트와 강의에서 배운 내용을 토대로 구성을 하는 것이 쉽지 않았다. 내일 미팅 후에 웹사이트 형식을 정하고 구성을 디테일하게 만들어야 할텐데 업체와의 협의가 원활하게 이루어질 지는 모르겠다. 강사님 혹은 전문으로 작업을 하시는 분이 주체가 되어 진행이 되는 프로젝트 일거라 예상했는데, 그렇지 않은 것이 아쉬웠다.