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

대박사건 대박사건! 오늘은 단 한문제로 끝납니다! 그리고 놀라운 CSS의 기능에 감탄하게 될 겁니다.

Exercise 00 : FTube

• FTube의 모바일 UI를 구현해봅시다.
• 여러분의 휴대폰 viewport에 맞춰 사이즈를 설정하세요. (우리는 iPhone12에 맞추었답니다)
• 영상의 썸네일과 제목을 따라할 필요는 없습니다.
• 영상 제목이 3줄을 넘어가려하면 ... 으로 이후 내용이 생략됩니다. (하지만 HTML 코드에선 원본 제목으로 되어 있습니다)
• 헤더 우측 'more_vert' 을 누르면 5가지 링크가 나타납니다. 하지만 어디로도 향하지 않습니다.
• 영상 옆 'more_vert' 을 누르면 팝업 창이 열리고, Cancel을 누르면 닫힙니다.
• All Videos 목록 아래의 'expand_more' 모양 아이콘을 누르면 더 많은 영상이 나타납니다.
• 더 많은 영상이 나타나면 기존의 'expand_more' 모양 아이콘은 'expand_less' 로 변경됩니다.
• Subscribe 옆 아이콘을 누르면 텍스트가 회색 Subscribed로 변경됩니다.
• toggle 메뉴와 팝업을 위한 anchor와 checkbox에는 id를 사용해도 됩니다.

lightbulbCSS의 -webkit-, -moz-, -ms-, -o- 같은 접두사는 무엇을 의미할까요?

Screenshots

기능별 예시 영상