mainView 구성

둘째주 : 

1. 우리 프로젝트에 맞는 템플릿을 구하자. 

-> 일단 템플릿이 보기 좋아야 우리 프로젝트  UI도 잘 나오니까 중요....

-> BootstrapBay, Inspina, WrapBootstrap 등에서 적절한 템플릿을 찾음.

-> 유료와 무료 템플릿이 있는데 무료는 너무 단순하고 유로는 너무 복잡한 구조를 갖고 있어서 선정하는데도 좀 오래걸림

-> 이때 너무 잡기능을 다 생각하고 (채팅 등) 템플릿을 고려하다보니 오래걸림

-> 결론 : 유료 템플릿에서 WebCopy를 이용해서 css나 js파일등을 떠서 커스텀.

2. 커스텀

->결과적으로 9개의 템플릿을 선정하고 커스텀 시작

->단순한 템플릿을 뜯는데도 css가 안나오거나 나와도 커스텀하는 과정에서 layout 배치가 꼬이기 시작.

->그래서 그리드 시스템을 공부.

->960s

->현재 mainview는 단순 슬라이드바만 적용해서 커스텀한 상태

3. 화면 배치

-> 웹에서 가장 중요한게 화면 배치

-> 초기 UI대로 왼쪽에 슬라이드바가 있고 여러 기능들을 배치함. (나중에 그림으로 대체)

-> 화면 OVERLAY를 해야되는데 Z-index를 이용해서 가능하다는걸 알고 내가 커스텀한 소스에 적용시켜봄

-> 현재 메인 video는 <div class="row">안에 배치가 되있는 상태.

-> 여기에 z-index를 추가 하고 overlay 해봤는데 아예 메인 video가 날라가버리는 현상 발생.. 화면에서 안보임.

-> row에서 빼고 따로 container만들어서 mainvideo를 입히면 overlay는 되지만 subvideo가 강제적으로 시작 포인트를 

설정해주지 않는 이상 움직이지 않음 이부분에서 좀 헤매고 overlay안하고 subvideo를 메인 비디오 아래에 배치한 상태였음

-> 결론 : 메인 비디오는 무조건 absolute가 되야 overlay가 가능함. absolute 포기하고 다른 포지션 값 주면 overlay되긴 되는데 화면 크기 조절했을 때 레이아웃 배치 컨트롤이 안됨.

그래서 지금은 div=row안에 메인 비디오 있는 상태이고 자바스크립트로 for문 돌려서 원하는 비디오 개수 값 입력 받으면 그만큼 비디오 화면을 출력해주고 overlay해서 나타남. 화면 너비 조절하면 너비에 맞게 화면 배치가 이루어짐.