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

여러분... 아이유 콘서트 가 보셨나요? 세상에 이렇게 좋은 콘서트가 있을 수 없답니다. 하핫! 저 작은 체구에서 노래를 5시간을 연달아 부른다니까요? 진짜 경이로운데 노래가 아주 그냥 하나하나 주옥같아서 행복으로 가득한 하루를 보낼 수 있답니다. 이 글을 쓰고 있는 저도 특별한 생각 없이 갔던 콘서트가 준 몽실몽실한 기억 덕에 아이유 팬이 되었답니다 :)

Exercise 00 : The Chaotic Boxes 🤪

• 겉만 보면 평범하지만 마우스를 올리면 재미있어지는 박스들을 만들어봅시다.
• 다양한 animation을 적용해 영상과 같이 구현해보세요.

Exercise 01 : Flexible Ribbons

• 아래 영상과 같이 스크린 크기에 비례하게 ribbon의 너비 & 높이가 변하게 만드세요.

Exercise 02 : Responsiveness is Responsibility

• 지금까지는 모바일 규격의 UI만 만들었죠.
• 영상과 같이 창 너비가 800px을 넘어갈 때 경고하는 개구리가 나타나게 하세요.