assignment-0A-ksj-hikoo 기능
- 추가 버튼으로 새 메뉴가 추가된다 : 태그에 onclick 과 addmenu 함수를 통해 구현해봤습니다.
- 엔터키로도 새 메뉴를 추가할 수 있다 : 태그에 onkeyup으로 구현해봤습니다.
- 입력창 왼쪽의 '메뉴 이름' 텍스트를 클릭하면 입력창으로 포커스가 이동한다. : 태그에 onclick, focus를 사용하여 구현해봤습니다.
- 이름을 입력하지 않거나 10글자가 넘는 메뉴를 추가할 시 alert가 뜬다. : if else문과 alert를 사용하여 구현해봤습니다.
- 헤더 좌측의 제목 또는 이미지 클릭 시 https://wafflestudio.com 으로 이동한다. : 태그와 스타일 조정을 통해 구현해봤습니다.
- 헤더 우측의 도움말 버튼 클릭 시 사이트의 대략적인 사용법을 알려주는 alert가 뜬다. : 태그에 onclick 과 alert를 사용하여 구현해봤습니다. 스타일
- 각 요소의 크기와 위치가 적절하다. : 예시사진을 참고하여 가장 바깥 wrap div에 flex를 적용하여 최대한 따라했습니다.
- 창 크기 1000x600 ~ 1800x900 이내일 때 문제없이 사용할 수 있어야 합니다. : px개념이 아직 혼란스러워서 vh로 구현했습니다.
- 메뉴 사이사이에 실선이 들어간다. :
태그를 사용했습니다. - 메뉴가 너무 많아 칸 높이 안에 들어가지 않으면 스크롤이 생긴다. : menubox div에 overflow: auto; 스타일을 적용하여 구현해봤습니다.
- 기타 디자인에 오류가 없다. : 최대한 구색을 갖춰봤습니다.
assignment-0B-ksj-hikoo
- npm을 통해 create-react-app을 설치, npm create-react-app으로 react 프로젝트를 생성했습니다.
- 생성된 프로젝트를 npm start를 이용해 local환경에 띄웠습니다.
- app.js의 일부분을 수정하여 스크린샷을 찍었습니다.