HTML의 구조에 대해서 이해한다.HTML/CSS의 역할을 이해하고, 사용법에 익숙해진다.
- 구현하기 까다로운 만큼 스펙을 정말정말 많이 간소화했습니다.
- 학생의 정보는
이름만 있고, 기능 역시추가기능만 있습니다.
- 학생의 정보는
- 예제 사이트를 만들어 두었으니, 확인하시고 적당히 비슷하게 만들어 주시기 바랍니다.
- 커밋은 되도록이면 최대한 잘게 쪼개서 해주세요. 커밋 내용을 지켜보고, 전체적인 진행 상황에 따라 과제 due나 명세를 수정할 수 있습니다.
- 디자인은 완벽하게 동일할 필요는 없으나, 최대한 비슷하게 해 주시기 바랍니다.
- 물론 더 예쁘게 만들어오신다면 환영입니다만, 커스텀하실 수 있는 건 폰트와 색깔 등 레이아웃 말고 오로지 '스타일' 로 제한하겠습니다 (채점 편의상)
- 즉 크기나 위치, 모양 등은 조정하지 말아 주세요.
- 개발자 도구를 사용하시면 과제하는 데 큰 도움이 될 것 입니다.
- 단, HTML 과 css에 익숙해지는 것이 주 목적이니만큼, 제공해드린 예제 사이트의 구조를 복붙하는 등은 부정행위로 간주됩니다.
- 가능한 한 꼼꼼하고 정확하게 주석을 달아 주시기 바랍니다.
이 방법은 크롬 기준입니다.
- 크롬을 켠 상태에서 아래 커맨드를 입력합니다. 아래의 사진과 같이 개발자 도구가 열립니다.
Windows:
F12,Ctrl+Shift+I
MacOS:cmd+option+I
- 최상단 메뉴바에서
Elements를 클릭하면 해당 페이지의 HTML을 파일을 볼 수 있습니다. (위 사진의 좌측 부분입니다.) - 원하는 태그를 클릭하면 우측 혹은 하단에서 CSS도 확인 가능합니다. (위 사진의 우측 부분입니다.)
- 개발자 도구의 좌측 상단의 버튼을 클릭 후, 브라우저로 돌아가면 사진과 같이 원하는 영역을 선택할 수 있습니다. 개발자 도구를 확인하면 해당 태그가 선택된 것을 확인할 수 있습니다.
-
자신의 GitHub 개인 계정에
waffle-rookies-19.5-react-assignment-0이라는 이름으로 private repository를 개설합니다. -
개설 후 Settings > Manage access 로 들어갑니다.
- collaborator 로 세미나장 @woohm402 를 초대합니다.
-
마감 시점의 master (또는 main) branch 를 기준으로 세미나장이 직접 확인할 것입니다. GitHub repository 에 반영되도록
commit,push해두는 것을 잊지 마세요. -
가급적 repository 생성과 collaborator 지정은 미리 해둬주세요! 제출 방식을 다들 올바로 이해하고 계신지와 함께, 가능하다면 대략적인 진행상황을 보면서 필요하면 몇 가지 말씀을 더 드릴 수도 있습니다.
- 아래 3가지 사이트는 HTML/CSS의 태그 및 속성에 대해서 자세하게 설명되어 있는 사이트입니다. 참고하시면 과제에 도움이 될 것 입니다.
- 아래 사이트는 원하는 태그의 속성, 예시 등을 더 자세히 볼 수 있는 사이트 입니다
- 아래 사이트는 자바스크립트의 기본 문법에 대한 설명을 제공합니다.