Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
55 lines (36 sloc) 2 KB

Introduce

비디오 공유 사이트형 입니다.

URL

Tech

이 사이트는 반응형 웹 디자인 기술이 적용됐습니다. 이하 사용된 기술 목록입니다.

  • HTML
  • CSS (included CSS3 & SASS)
  • Javascript (included Jquery)
  • Foundation Front-end Framework 6 (Customized)

Screenshot

스크린샷

주요 내용

https://danhk0612.github.io/GdTube/

  • 메인 페이지
  • 가로 폭이 1589px 이하일 경우 비디오 목록을 좌우로 스크롤 가능한 버튼 표시
  • 가로 폭이 1023px 이하일 경우 좌측 사이드바를 메인컨텐츠 위에 표시 (메뉴 버튼 클릭시 토글)
  • 해당 페이지 최초 접속 시 가로 폭이 700px 이하일 경우 모바일 페이지로 리다이렉트
  • 비디오 클릭시 get방식으로 비디오 id값을 video.html 파일에 넘겨줌
  • 비디오 타이틀 2줄로 제한(크롬에서 타이틀 제한될 경우 끝에 ... 표시)
  • 스크롤바 커스터마이징 (크롬 한정)

https://danhk0612.github.io/GdTube/m/

  • 모바일 메인 페이지
  • 비디오 목록을 2회에 걸쳐 좌우로 스크롤 가능한 버튼 표시
  • 가로 폭이 560px 이하일 경우 비디오 목록을 카테고리당 하나씩 표시

https://danhk0612.github.io/GdTube/video.html?v=LPcP3Oc9oiM

  • 비디오 재생 페이지
  • 가로 폭이 1023px 이하일 경우 비디오만 화면에 표시
  • 좌측 사이드바는 기본 숨김, 메뉴버튼 클릭 시 토글하여 메인컨텐츠 위에 표시
  • 해당 페이지 최초 접속 시 가로 폭이 700px 이하일 경우 모바일 페이지로 리다이렉트
  • jquery ajax를 활용해서 /xml/video.xml의 비디오 리스트를 불러와 우측 비디오 추가 목록으로 표현

https://danhk0612.github.io/GdTube/m/video.html?v=LPcP3Oc9oiM

  • 모바일 비디오 재생 페이지

기타 공통

  • SCSS를 활용해서 중복된 작업 최소화 및 유지보수 용이
You can’t perform that action at this time.