HTML & CSS Piscine

chick photo

DAY05

Basic Instructions

  • 오직 이 페이지만 참고해야 합니다. 소문은 믿지 마세요.
  • 파일 제출 전에 이 문서가 변경될 수도 있으니 주의하세요!
  • 모든 과제물을 제출할 때는 제출 절차를 따라야 합니다.
  • 제출하신 과제물은 동료들끼리 서로 확인하고 평가하게 됩니다.
  • Exercise는 난이도에 따라 쉬운 문제에서 어려운 문제 순으로 짜여 있습니다. 앞 단계 문제의 과제물이 완벽하게 작동하지 않으면 난이도가 더 높은 문제는 아무리 잘 완료했다 하더라도 평가에 반영되지 않습니다.
  • 모든 프로젝트는 Chrome 브라우저 기반으로 평가됩니다.
  • 모든 HTML 파일은 W3 Validator 을 통과해야 합니다.
  • meta 태그의 author에는 본인의 intra ID를 기입해야만 합니다.
  • HTML 파일에는 각 view 당 하나의 style sheet link만 허용합니다.
  • id를 사용할 때는 확실한 이유가 있어야 합니다.
  • 사용이 금지된 HTML 태그를 사용하는 것은 부정 행위로 간주됩니다. 부정 행위는 -42점을 받게 되며, 받은 점수는 절대 조정이 불가능합니다.
  • 어떠한 형태로든 JavaScript의 사용을 금지합니다.
  • 페이지가 열리지 않으면 0점을 받게 됩니다.
  • 각 Exercise에서 정한 파일 이외의 어떠한 파일도 디렉토리에 남겨 두어서는 안 됩니다.
  • 질문이 있으신가요? 오른쪽 동료에게 물어보세요. 아니면 왼쪽 동료에게 물어보세요.
  • 참고 가이드는 Google...그리고 Google 입니다.
  • 예시를 꼼꼼히 살펴보세요. Exercise에서 명시적으로 언급되지 않은 세부적인 사항에 대한 힌트를 얻을 수도 있습니다.
  • 다같이 한번 외쳐볼까요? "Chick to Chicken~"

Foreword

여러분... 개포시장에 대박 맛있는 꽈배기를 팔고 있다는 거 아시나요? 따뜻하고 포실포실한 꽈배기를 한 입 베어먹으면 감동적인 맛이 난답니다. 기분이 너무 좋은 나머지 서브젝트를 만들다 말고 산책을 갔다 왔습니다. 클러스터 옥상에서 만난 옥상의 꽃이 참 아름답더군요. 아름다운 꽃 한송이 보고 힐링하고 가세요 @}——

innovation academy rooftop flower photo

Exercise 00 : Perfectly responsive FTube

Exercise 00
Perfectly responsive FTube
제출 디렉토리 : ex00/
제출 파일 : index.html, css/*.css, assets/(image files if necessary)
허용 태그 : 제한 없음
  • Day04에서 구현한 FTube mobile view를 기반으로 desktop view를 개발해 반응형 UI를 완성하세요.
  • 기존의 mobile view도 반응형으로 수정하세요.
  • 창의 너비가 768px(Galaxy Fold / ipad portrait viewport 너비) 이하일 때는 mobile view, 768px 초과일 때는 desktop view를 반영합니다.
  • 아래 영상과 같이 창의 크기가 변할 때 scale & view가 매끄럽게 변해야합니다.

Screenshots

FTubedesktop view screenshot