0706

Jurang Lee·2021년 7월 6일
0
1. 팀별 프로젝트 진행 상황 및 본인 업무  

목요일에 기획안을 받을 예정으로 아직 진행한 부분이 없다. 페이지를 어떻게 구성할지 지금까지의 강의를 바탕으로 생각해 보았다. 동일하게 나온 의견은 기존에 배운 페이지와 같은 구성으로 하되 디테일을 다르게 해보자는 것이었다.

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

프로젝트 페이지를 구성하지 않아 오늘 강의에 적용할 부분을 찾지 못했다. 대신 기존에 배웠던 네이버페이지와 카카오페이지를 참고하여 임의로 페이지를 한 번 만들어보았다.

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

어제에 이어 네이버 오디오의 메인 왼쪽 부분을 작업했다. 메인의 왼쪽을 div태그로 audio-today, audio-original, audio-playlist, audio-live, audio-book, audio-channel로 각각의 class를 만들어 파트를 구성하였다. 각 파트는 헤더 영역과 이미지, 내용으로 구성되어 있고 버튼은 이미지에 걸치도록 넣어주었다. 메인의 크기를 설정하고 오디오 컨테이너의 얼라인 아이템을 플렉스 스타트로 설정해주었다. 메인의 레프트와 라이트의 크기를 설정하고 각 섹션별로 들어갈 공통 디자인을 설정하였다. class로 audio-section이 들어가는 영역은 패딩을 상하로 32픽셀을 적용하고 오디오 헤더의 폰트를 설정하였다. 오디오 바디 영역의 포지션은 렐러티브, 바디의 버튼 라이트 영역은 포지션 앱솔루트를 설정하였다. 버튼은 라이트로 -17픽셀을 적용하여 이미지에 겹치게 만들었다.
중간에 오디오 플레이리스트의 전체보기 영역의 보더와 박스섀도우, 폰트를 설정해주고 디스플레이를 블럭으로 설정했다. 다음으로 오디오 라이브 영역에서 active를 적용한 li태그에 컬러와 보더 색상을 레드로 설정하였다. 나머지 li태그는 테두리를 레드로 컬러는 흰색으로 설정했다. 오디오 북에서는 시간 영역의 포지션을 앱솔루트로 설정하고 라이트, 바텀으로 위치를 조정했다. 각 섹션의 버튼은 버튼 라이트 클래스를 지정하여 탑으로 위치를 조정해주었다. 공통으로 적용되는 지점이 있어 좀 더 많은 내용을 한 번에 만들 수 있었다.

4. 아쉬웠던 점 

업체와의 미팅이 어떻게 진행될 지는 모르겠으나, 원하는 홈페이지가 잘 만들어질 수 있을 지가 고민된다. 기존에 배웠던 내용을 토대로 하겠으나, 실습 내용을 정확하게 이해하고 활용할 수 있을지는 모르겠다. 팀원들과 계속 소통하면서 해결해 나가야 할 것 같다.

profile
웹프로그래밍

0개의 댓글