DAY02
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
IMAX 영화 필름은 일반 영화 필름보다 10배 더 선명한 화질을 제공합니다. 일반 영화 스크린의 시야 범위는 54°, IMAX 영화 스크린의 시야 범위는 70°로 관객들은 영화에 더 몰입할 수 있지요. 얼마 전 개봉한 SF 영화 '듄'은 IMAX 인증 디지털 Arri LF 카메라로 촬영된 첫 영화로 IMAX관에서 관람해야 영화를 온전히 즐길 수 있습니다. 그래서 저도 내일 보러 갑니다.
Exercise 00 : Somewhere Over the Rainbow(GRID)
Exercise 00 | ||
---|---|---|
Somewhere Over the Rainbow(GRID) | ||
제출 디렉토리 | : | ex00/ |
제출 파일 | : | index.html, css/style.css, css/color.css |
허용 태그 | : | div |
- grid layout을 사용해 아래와 같이 페이지에 출력하세요 (우측 하단 보라색 cell의 규격: 300px * 200px).
- 모든 색깔은 css/color.css에 지정한 변수를 불러 사용해야 합니다.

Exercise 01 : Functional CSS
Exercise 01 | ||
---|---|---|
Functional CSS | ||
제출 디렉토리 | : | ex01/ |
제출 파일 | : | index.html, css/style.css, css/color.css |
허용 태그 | : | div |
- ex00의 코드를 수정하여 아래 사진과 같이 페이지에 출력하세요 (우측 하단 cell의 규격: 300px (min) * 300px).
- 모든 색깔은 css/color.css에 지정한 변수를 불러 사용해야 합니다.
- 다양한 CSS functions를 사용해보세요.

- 화면 크기에 따라 아래와 같이 작동합니다.
lightbulbrepeat(), minmax(), auto-fill & auto-fit을 검색해보세요.
Exercise 02 : 42stagram
Exercise 02 | ||
---|---|---|
42stagram | ||
제출 디렉토리 | : | ex02/ |
제출 파일 | : | index.html, css/*.css, css/color.css, assets/(image files if necessary) |
허용 태그 | : | 제한 없음 |
- 아래 영상과 사진 같이 42stagram UI를 만드세요.
- 영상에 주어진 viewport 규격대로 만드세요.
- Responsive 하지 않아도 괜찮습니다.
- 폰트/이미지 사이즈가 완벽하게 같을 필요는 없습니다.
lightbulb아이콘이 필요하신가요? 구글이 여러분과 함께합니다.
