비디오 공유 사이트형 입니다.
이 사이트는 반응형 웹 디자인 기술이 적용됐습니다. 이하 사용된 기술 목록입니다.
- HTML
- CSS (included CSS3 & SASS)
- Javascript (included Jquery)
- Foundation Front-end Framework 6 (Customized)
- 메인 페이지
- 가로 폭이 1589px 이하일 경우 비디오 목록을 좌우로 스크롤 가능한 버튼 표시
- 가로 폭이 1023px 이하일 경우 좌측 사이드바를 메인컨텐츠 위에 표시 (메뉴 버튼 클릭시 토글)
- 해당 페이지 최초 접속 시 가로 폭이 700px 이하일 경우 모바일 페이지로 리다이렉트
- 비디오 클릭시 get방식으로 비디오 id값을 video.html 파일에 넘겨줌
- 비디오 타이틀 2줄로 제한(크롬에서 타이틀 제한될 경우 끝에 ... 표시)
- 스크롤바 커스터마이징 (크롬 한정)
- 모바일 메인 페이지
- 비디오 목록을 2회에 걸쳐 좌우로 스크롤 가능한 버튼 표시
- 가로 폭이 560px 이하일 경우 비디오 목록을 카테고리당 하나씩 표시
- 비디오 재생 페이지
- 가로 폭이 1023px 이하일 경우 비디오만 화면에 표시
- 좌측 사이드바는 기본 숨김, 메뉴버튼 클릭 시 토글하여 메인컨텐츠 위에 표시
- 해당 페이지 최초 접속 시 가로 폭이 700px 이하일 경우 모바일 페이지로 리다이렉트
- jquery ajax를 활용해서 /xml/video.xml의 비디오 리스트를 불러와 우측 비디오 추가 목록으로 표현
- 모바일 비디오 재생 페이지
- SCSS를 활용해서 중복된 작업 최소화 및 유지보수 용이