0709

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

오늘 중에 업체와의 미팅을 통해 기획안을 살피고 진행상황을 정리하고 여러 템플릿을 살펴보면서 뉘 사이트에 적용할만한 사이트를 참고하여 3~5개의 웹사이트를 추리고 업체에 제안할 예정이었으나, 갑작스레 업체의 취소로 현재 진행이 어렵게 되었다. 다른 팀으로 급하게 배정되었다. 개발계획서와 IA를 참고하여 어떤 식으로 진행될지 협의중이며 플랫폼을 사용하여 제작을 할 예정이다. 새롭게 연결된 업체의 성격이 어떠한지 SNS페이지와 여러 관련 사이트를 참고로 알아보고 있다.

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

이전에는 포지션 앱솔루트와 렐러티브를 활용한 작업을 많이 했는데, 이번에는 포지션 픽스드를 활용해서 상단 또는 왼쪽에 고정되는 형태의 레이아웃을 만들었다. 홈페이지 제작시 상단에 활용하면 좋을 것 같다. 필요에 따라 반응형 사이트를 제작하게 되면 pc페이지 왼쪽에도 활용할 수 있을 것으로 보인다. 포지션으로 고정한 영역에 스크롤을 주는 설정도 활용할 일이 있다면 사용할 것이다.

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

오늘은 지난 시간에 이어 트위치 사이트 메인의 왼쪽 영역 작업을 진행했다. 작업은 포지션 픽스드를 사용한 내용이 주를 이루었다. 메인에 컨테이너를 만들고 left-area를 만들어 채널랩 안에 채널 헤더와 채널 바디를 넣고 join-wrap과 info-wrap을 만들었다. 채널 헤더에 h3와 i태그로 제목을 넣고 채널 바디에는 각각의 li태그에 a태그로 이미지, 텍스트랩, 카운트를 넣었다. 하단 조인 랩에는 텍스트 랩으로 h2, p, button태그를 이용해 내용을 넣고 마지막으로 인포랩 안에 p태그와 ul li a태그로 내용을 넣어주었다.
디자인영역에서 메인 컨테이너로 크기를 지정하고 특정 지점에서 크기가 줄어 레이어가 틀어지는 것을 방지하기 위해 min-width를 설정한다. 레프트 에어리어에 포지션은 픽스드로 설정하고 상단 네비와 겹치지 않기 위해 top 50px과 바텀 0을 적용했다. 채널 헤더와 바디에 디스플레이를 플렉스로 적용하고 각각의 디자인을 적용했다. 채널 바디에 카운트 앞쪽에 기호를 넣어주었다. 조인랩의 공간을 설정하고 버튼의 색상과 디자인을 설정했다. 인포랩 영역은 기존에 푸터영역에 들어가는 디자인과 같이 설정했다. ul li태그의 a태그 뒤에는 기호를 넣고 마지막 li태그의 뒤쪽에만 제외시켰다.

4. 아쉬웠던 점 

기존에 진행하려던 프로젝트가 갑작스레 취소되어 준비했던 내용을 보여드릴 수 없어 아쉬웠다. 다른 프로젝트를 진행하게 되겠지만, 중간에 합류를 하게되어 기존에 팀원들과 협의한 것과 같이 잘 진행할 수 있을지 걱정된다. 지금까지 html과 css를 활용하여 홈페이지를 카피캣 해보고 간단하게 만들어보는 작업을 진행했는데, 이것이 실제 프로젝트에 어느 정도 적용이 될 수 있을지는 모르겠다. 부족한 실력이지만 조금은 힘을 내보아야 할 것 같다.