하나씩 배워나가는 개발일지

이번 과제로는 JS를 이용한 사진 관리 웹사이트를 만들어보았다. 먼저 기본 화면을 봐보도록 하자. 로그인 화면 관리 시스템 화면 학생 정보 등록 화면 정보 입력 화면 정보 등록 완료 시 화면 학생 프로필 및 수정 화면 학생 정보 수정 화면 수정된 학생 정보 화면 선택 박스 체크 화면 선택한 객체 삭제 화면 학생 정보 부분 리스트(스크롤) 페이지 CSS를 이용한 애니매이션 화면 반응형 화면 [흐름] 다음과 같이 구성했다. 과제 기간은 약 10일로 지난 과제 기간보다 길었지만 생각없이 신청한 공모전, 교내 경진대회 등으로 시간을 다 날려먹어서 과제 할 시간이 약 4일정도밖에 없어서 요구한 필수 기능들만 구현을 했다. 파이어베이스의 파이어스토어 데이터베이스를 사용했고 웹페이지에서 등록하면 해당 객체 정보가 파..

지난 과제로 당근마켓 메인페이지를 만들어보았다. 멘토님께서 다음과 같이 리뷰를 해주셨는데, 내가 만든 웹사이트는 크게 어려운 기능이 없었어서, 코멘트가 따로 필요 없었던 것 같다. 그래서, 이번 리팩토링 시간에 지난 번에 구현하고 싶었는데 못했던 부분인 '반응형 웹사이트'를 만들어보고자 한다. 이게 당근마켓 메인페이지인데, 화면을 일정 크기 이상 줄이면 먼저 서치바가 없어지고 서치 아이콘이 생기고 거기서 더 크기가 줄어들면 리스트들이 없어지고 채팅하기 버튼이 없어지고 메뉴 아이콘이 생긴다. 먼저, 서치바 아이콘과 메뉴 아이콘을 일단 html 코드에 순서대로 넣어주고 화면이 클 때는 "display: 'none'" 으로 안보이게 속성값을 지정해주었다. 채팅하기 그리고 css에서 미디어 쿼리를 사용해 화면 ..