1. 팀별 프로젝트 진행 상황 및 본인 업무 내일 기획안을 받아보기에 앞서 앞으로 진행될 프로젝트의 대략적인 플랫폼을 상의해 보았다. 추후 변경될 수도 있지만, 반응형 웹사이트를 구현하는 것을 논의중이다. 이전 기수가 만들어 놓은 프로젝트와 다른 웹페이지를 참고하여 어떤 사이트가 적절할지 얘기해 보았다.
2. 오늘 강의를 통해 프로젝트에 적용한 부분프로젝트에 실질적으로 들어갈 지 여부는 알 수 없으나, 기본적인 구성인 헤더와 메인, 푸터 영역은 그대로 가져갈 것으로 보인다. 오늘 네이버 오디오 페이지 카피캣을 참고하여 진행하게될 프로젝트의 구성 또한 대략적으로 생각해 보았다.
3. 어려웠던 점과 해결방법 오늘은 지난 시간에 이어 네이버 오디오페이지 오른쪽과 푸터, 그리고 오디오 카테고리 페이지를 작업했다. 오디오페이지의 우측은 오디오인트로와 오디오디스커버리, 오디오크리에이트로 구성했다. 인트로와 디스커버리에는 왼쪽에서 사용했던 오디오 헤더 영역을 그대로 사용하고 하단에 오디오 바디를 만들었다. 디스커버리에는 오디오 헤더 안에 a태그로 클래스에 링크세팅으로 버튼 영역을 만들었다. 인트로 바디영역에 디자인으로 이미지의 크기, h3의 폰트를 설정했다. 디스커버리 영역에서 오디오헤더의 포지션을 렐러티브로 설정하고 링크세팅의 포지션을 앱솔루트로 설정한다음 디자인을 넣어주었다. 위치는 탑과 라이트로 조정했다. 디스커버리 하단의 더보기 버튼도 마찬가지로 디자인을 설정하고 컬러를 넣어주었다.
오디오 크리에이트 영역의 마지막 li태그를 제외하고 패딩을 설정하고 보더 값을 적용했다. 텍스트랩의 폰트와 마진을 적용하고 각 영역의 컬러를 설정했다. 오디오페이지 푸터 영역은 컨테이너 안에 h1과 카피라이트 랩을 묶는 div태그와 footer-nav 그리고 카피라이트 링크의 a태그로 구성되었다. 각각의 디자인을 적용하고 라피라이트 링크의 기호는 css 특수문자를 검색하여 넣었다. footer-nav의 li a태그는 맨 마지막 a태그를 제외하고 뒷부분에 기호를 넣어주었다.
오디오페이지 안에 카테고리 페이지의 카피캣도 진행했다. 기존에 오디오페이지의 헤더와 푸터는 그대로 사용하고 메인 영역만 만들었다. 헤더 영역에서 카테고리 영역에 active를 표시하고 html페이지를 연결해 주었다. 메인에 컨테이너를 넣고 두 개의 카테고리를 만들었는데, 하나는 카테고리 채널, 나머지는 카테고리 북으로 설정했다. 카테고리 채널에 div로 상단에 타이틀랩을 만들고 하단에 ul li a태그로 카테고리 리스트를 만들었다. 리스트의 디자인을 플렉스 스타트를 활용하여 설정하고 썸네일의 디자인은 transform의 rotate를 활용하여 만들어주었다. 같은 형식으로 카테고리 북도 만들고 작업을 마쳤다.
4. 아쉬웠던 점 대면으로 만나 하는 작업이 아니다보니, 실질적으로 얼만큼 해낼 수 있는지 여부조차 가늠을 할 수 없다는 점이 약간은 아쉬웠다. 프로젝트의 형식을 어떻게 진행해야 할지 아직 고민중이다. 그래도 팀즈와 오픈채팅방에서 충분한 소통으로 앞으로의 업무를 이어갈 것이라 기대해본다.
