DAY01
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
파주의 마장호수는 친환경 공원으로 주말가족, 연인들의 나들이 장소로 제격입니다. 특히 출렁다리는 남녀노소 모든 관광객들이 즐길 수 있죠. 저희는 지금 마장호수를 배경으로 둔 카페에서 서브젝트를 작성하고 있습니다. 좋은 환경에서 좋은 코드가 나오는 법!
Today's Rule
- 아이콘을 찾으시나요? 엄청난 폰트를 사용해보세요.
- 이번 과제에서는 특별히 id 사용을 허용합니다.
- 폰트, 색상은 예시 이미지와 조금 달라도 괜찮습니다.
- position CSS 속성을 사용하지 마세요.
Exercise 00 : HTML is ugly
| Exercise 00 | ||
|---|---|---|
| HTML is ugly | ||
| 제출 디렉토리 | : | ex00/ |
| 제출 파일 | : | index.html, image files if necessary |
| 허용 태그 | : | header, main, footer, h1, div, form, input, button, hr, p, img, a, select, optgroup, option |
- 아래 사진과 같이 페이지에 출력하세요.
- Log in을 클릭하면 입력한 내용들이 제출됩니다.
- Log in with 42book, Forgot password?, Sign Up을 클릭하면 큰 변화는 없습니다.
lightbulbPassword는 남에게 보여주면 안되겠죠?
lightbulbHTML semantic을 구글링 해보세요.
- Korean을 누르면 언어를 선택할 수 있어요.
Exercise 01 : Colorful is Wonderful!
| Exercise 01 | ||
|---|---|---|
| Colorful is Wonderful! | ||
| 제출 디렉토리 | : | ex01/ |
| 제출 파일 | : | index.html, style.css, image files if necessary |
| 허용 태그 | : | header, main, footer, h1, div, form, input, button, hr, p, img, a, select, optgroup, option |
- ex00의 index.html을 수정하여 아래 사진과 같이 페이지에 출력하세요.
- External style sheet를 사용하세요.
- 다양한 style 속성을 사용해보세요.
- block들의 width는 320px입니다.
lightbulbMargin, border, padding의 차이는 뭘까요?
Exercise 02 : Combination pizza is delicious!
| Exercise 02 | ||
|---|---|---|
| Combination pizza is delicious! | ||
| 제출 디렉토리 | : | ex02/ |
| 제출 파일 | : | index.html, style.css, image files if necessary |
| 허용 태그 | : | span, header, main, footer, h1, div, form, input, button, hr, p, img, a, select, optgroup, option |
- combinator selector를 사용해서 아래와 같이 페이지를 더 예쁘게 만들어보세요.
- Forgot password?, Sign Up은 여전히 링크입니다.
Exercise 03 : FLEX! Design smarter!
| Exercise 03 | ||
|---|---|---|
| FLEX! Design smarter! | ||
| 제출 디렉토리 | : | ex03/ |
| 제출 파일 | : | index.html, style.css, image files if necessary |
| 허용 태그 | : | span, header, main, footer, h1, div, form, input, button, hr, p, img, a, select, optgroup, option |
- ex02의 코드를 id, class, flexbox를 사용해 바꿔보세요.
- 이미 이전에 사용하셨다면 잘하셨습니다.
lightbulb"Form is temporary, but class is permanent" - Bill Shankly
lightbulbFlexbox를 사용한다면 창 크기를 줄였을 때 아래와 같이 되겠죠?
