1. 팀별 프로젝트 진행 상황 및 본인 업무 플랫폼을 사용하여 웹사이트를 제작할 예정인데, 내일 중에 소스를 받아 사이트 제작을 시작할 예정이다. 이전에 정한 플랫폼의 사이트 형식을 살펴보는 중에 있다. 나는 건맥1897협동조합에서 건맥펍 영역을 담당할 예정이다. 아직 세부적인 디자인이나 내용을 정한 것은 아니여서 프로젝트 업체의 기본사항을 알아보고 어떤 부분이 필요할지 알아보고 있다. 사이트의 템플릿을 정하고 간단하게 상단의 네비게이션 탭과 홈버튼을 설정했다.
2. 오늘 강의를 통해 프로젝트에 적용한 부분윅스를 통한 사이트 제작을 할 예정이라 직접적으로 강의에서 적용할 부분이 있지는 않겠지만, 디자인을 적용하는데에 지금까지 배운 영역을 토대로 적용할 수 있을 것 같다. 메인과 푸터 영역 등 팀원과 함께 작업하는 영역에서 일부 적용할 수 있을 것이라 생각한다. 스크롤을 내리는 기능이나 폰트를 설정하고 여백을 적용하는 작업은 활용될 것 같다.
3. 어려웠던 점과 해결방법 오늘은 트위치 사이트 메인의 우측, 컨텐츠 영역 작업을 진행하였다. 자바스크립트로 구현되는 기능을 제외하고 이미지와 li태그를 넣어 페이지를 만들었다. 컨텐츠 전체 영역이 이전에 만든 레프트와 탑네비에 겹치지 않도록 포지션과 탑, 레프트로 공간을 만들었다. 컨텐츠에 id로 content-banner를 넣고 공간을 설정하였다. 백그라운드 속성으로 url을 속성값으로 넣어주었다. 백그라운드 사이즈를 커버로 설정하고 센터를 속성값으로 지정하여 백그라운드 이미지가 중앙으로 위치하고 페이지를 리사이징 할때마다 자연스럽게 줄어들게 만들었다. 배너의 색상은 rgba로 투명도를 조정하고 텍스트랩으로 내용을 넣었다.
다음으로 컨텐츠 컨테이너 영역의 공간을 설정하고 마진은 0 auto로 설정하엿다. 태그랩 영역은 이후에도 동일하게 적용될것을 고려하여 디폴트로 플렉스와 디자인을 설정하였다. 비디오 섹션의 타이틀랩의 폰트와 패딩 바텀을 적용하고 비디오 랩의 ul에는 디스플레이 플렉스로 space-between을 적용하였다. 비디오랩에 이미지랩은 포지션 렐러티브를 설정하고 생방송이라고 뜨는 mark영역의 디자인을 포지션 앱솔루트를 통해 적용했다. 비디오 바텀 영역도 디스플레이를 플렉스로 적용하고 썸네일과 텍스트랩의 공간을 설정해 주고 li태그를 총 3개 만들어 작업을 마쳤다.
4. 아쉬웠던 점 강의 내용을 토대로 지금까지 배웠던 사이트 중에 하나를 응용하여 실제 사이트처럼 만들어 보아도 좋을 것 같다. 그것은 개인적으로 해 볼 생각이다. 플랫폼을 활용하여 사이트를 만들 수 있다는 사실을 새롭게 알게 되어서 어떻게 진행이 되는 것인지 알아보아야 할 것 같다. css와 html 외에도 다른 기능을 적용해 보면 좋을 것 같다.
