HTML
의 구조에 대해서 이해한다.HTML
/CSS
/JS
의 역할을 이해하고, 사용법에 익숙해진다.
과제 - HTML
CSS
JS
로 와플고등학교 인원 관리 프로그램 간소화 페이지 만들기
- 구현하기 까다로운 만큼 스펙을 정말정말 많이 간소화했습니다.
- 학생의 정보는
이름
만 있고, 기능 역시추가
기능만 있습니다. - 학생 이름은 항상 한글 세 글자라고 가정할 수 있습니다.
- 학생의 정보는
- 채점할 스펙은 다음과 같습니다.
- 기능
- 추가 버튼으로 추가가 되는가
- 엔터키로 추가가 되는가
- 이름을 입력하지 않고 추가할 시 window alert가 뜨는가
- 헤더 좌우 이미지 클릭 시 링크가 정상적으로 작동하는가
- 스타일
- 각 컴포넌트의 위치가 적절한가
- 한 줄에 다섯 학생이 제대로 나오는가
- 다섯 학생 이후 줄바꿈이 잘 되는가
- 학생이 너무 많아 칸 높이를 넘어갈 시 스크롤이 적용되는가
- 기타 디자인에 마이너한 오류가 있는가
- 기능
- 기타 아래 항목도, strict하게는 아니어도 어느 정도 채점 결과에 반영합니다.
- 코드 리드미 및 주석을 잘 달았는가
- 변수 및 함수명이 적절한가
- 물론 첫 과제이니만큼 이걸로 당락을 결정하기보단, 다음 과제부터 어떤 부분을 더 신경써달라고 피드백을 드리겠습니다.
- React README 에 따라 React를 설치해 주세요.
- 설치 성공하셨다면,
create-react-app
을 이용해 리액트 앱을 만들어 주세요. - 가운데에
Edit src/App.js and save to reload.
라는 문구가 뜰 텐데, 그 문구를 자기 이름 + github username 으로 수정해 주세요. - 따로 제출할 필요는 없고, 캡쳐하셔서 세미나장 갠톡으로 보내 주세요.
- 디자인은 완벽하게 동일할 필요는 없으나, 최대한 비슷하게 해 주시기 바랍니다.
- 물론 더 예쁘게 만들어오신다면 환영입니다만, 커스텀하실 수 있는 건 레이아웃 말고, 폰트와 색깔 등 오로지 '스타일' 로 제한하겠습니다 (채점 편의상)
- 즉 크기나 위치, 모양 등은 조정하지 말아 주세요.
- 개발자 도구를 사용하시면 과제하는 데 큰 도움이 될 것 입니다.
- 단, HTML 과 css에 익숙해지는 것이 주 목적이니만큼, 제공해드린 예제 사이트의 구조를 복붙하는 등은 부정행위로 간주됩니다.
- 해당 문서 참조
- 해당 문서 참조