0716

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

오늘도 어제에 이어 건맥1897협동조합 사이트의 디자인 작업을 진행하였다. 건맥펍 영역의 레이아웃을 구성하고 메뉴와 건맥펍 전경의 이미지를 넣었다. 텍스트 소스와 shop에 해당하는 소스가 부족해서 전반적인 레이아웃을 먼저 짜도록 했다. 2차로 받은 소스를 추가하여 작업했다. 팀장님과 다른 팀원들이 각자 맡은 영역을 디자인해서 전체적으로 진행이 되고 있으나, 아직 부족한 소스는 다음 주 중에 더 받아 채워야 할 것 같다. 건맥shop은 스토어 사이트로 이동할 수 있도록 만들 예정이다.

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

유튜브 상단 페이지 작업을 하면서 전반적인 사이트들이 그러하지만, 우리가 만드는 웹사이트의 상단과 비슷한 구조라고 생각이 들었다. 로고와 네비태그로 짜여진 구조를 어떤 위치에 두고 디자인 하는 가의 차이라고 생각이 되었고, 이 유튜브의 기본적인 디자인을 참고하여 사이트를 작업하였다. 추후에 네비 태그를 수정하게 될 때에 참고할 것이다.

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

오늘 강의에서는 유튜브 페이지의 상단 네비 영역을 카피캣 하였다. 기존에 만들어둔 네비 태그의 youtube-top-nav로 id를 만들었는데, 탑 네비에 랩을 넣어 이 안에 3개의 div태그를 넣어 작업하였다. 3개의 div태그는 각각 nav-left, nav-center, nav-right로 위치별로 구성해 주었다. 레프트 영역에는 버튼태그와 h1태그를, 센터는 서치랩과 버튼태그를, 라이트 영역은 두개의 버튼과 a태그로 만들었는데, 레프트에는 플렉스 얼라인 비트윈, 센터에는 얼라인 스타트, 라이트는 얼라인 엔드를 적용하였다. 각각의 class는 css에서 flex코드를 입력해 주었다.
css에서 탑네비의 좌우에 패딩을 적용하고 네비레프트의 높이를 56픽셀로 설정했다. 버튼과 h1의 디자인을 적용하고 h1의 이미지 크기를 지정했다. 네비 센터는 포지션을 앱솔루트로 설정하고 x축 중앙정렬을 했다. 검색 랩과 인풋 영역의 크기를 지정하고 컬러를 넣었다. 서치랩 우측에 올 버튼과 보이스 아이콘의 크기와 컬러를 설정했다. 레프트와 마찬가지로 네비라이트의 높이를 설정하고 두 개의 버튼에 크기와 색상을 지정했다. 마지막으로 로그인 버튼에 보더와 패딩, 컬러를 적용하고 작업을 마쳤다.

4. 아쉬웠던 점 

사이트 작업은 잘 진행되고 있으나, 기존에 업체에게 소스를 미리 받을 수 있었다면 작업 속도를 좀 더 높일 수 있지 않았을까 하는 생각이 들었다. 기존에 존재하지 않는 사이트를 새롭게 만드는 데에 생각보다 많은 손길과 비용이 들어간다는 사실을 다시 느끼게 된다. 또한 프로젝트와 강의를 병행해서 듣는 것이 빠듯하게 느껴졌다. 프로젝트의 구성을 생각해야 하는 부분이 있어 많은 시간이 소요되었다.

profile
웹프로그래밍

0개의 댓글