상품을 장바구니에 담아서 보여주는 기능을 구현하였다. 원래는 다른 html 파일로 이동한 후, 장바구니에 담은 상품을 보여주는 방식으로 구현하려 하였지만 자꾸 전송하려는 값이 "undefined"나 "null"이 떠서 한 페이지에 구현하는 방식으로 변경하였다. 그래서 화면 우측 상단의 "Cart" 버튼을 클릭했을 때, 선택적으로 장바구니 창을 띄우고 지울 수 있도록 구현할 예정이다.

이번에는 각 페이지에 공통으로 들어가는 "사이드바"를 추가하였다. 또한 각 페이지 간의 통일성을 주기 위해 css style의 색깔을 회색과 하얀색 계열로 수정하였다. 또한 "display: space-between"을 사용하여 각각의 , 을 배치하였을 때, 에 내용을 입력하고 추가하면 각 요소들 간의 간격이 일정하지 않아지는 오류를 수정하였다. margin으로 직접 간격을 설정해주어 위치가 고정되도록 하였다. 또한 "recommend" 버튼을 누르면 추천수가 증가하는 기능도 구현하였다.

오늘은 제가 만들던 페이지에서, 자기소개를 입력하고 제출 버튼을 누르면 입력한 내용이 화면에 출력하는 기능을 구현하였습니다. 먼저 비어있는 을 생성한 후, display = "none"을 통해 안 보이게 설정해 놓은 후, 내용을 입력하고 "제출" 버튼을 누르면 display = "block"을 통해 화면에 출력되도록 하였습니다. 또한 "제출" 버튼을 누르면 기존에 있던 와 은 display = "none"을 통해 보이지 않도록 구현하였습니다.

이번에는 CSS를 수정하여 각각의 요소들의 위치를 정렬하였습니다. display: flex, justify-contet: space-between, align-items: center를 활용하여 정렬하였습니다. 그런데 으로 버튼을 생성하면, CSS 배열이 이상하게 틀어져서 아직 추가하지 못 했습니다. 이 부분은 수정이 필요합니다. 또한 제출 번튼을 클릭하면, 다른 부분과 마친가지로 화면에 내용이 출력되도록 구현할 예정입니다.

이번에는 CSS를 통해 페이지의 구성 요소들을 정리해보고자 하였다. float: left라는 속성을 통해 들을 일렬로 배열하려고 시도하였는데, 아래의 사진과 같이 구성 요소들의 배치가 섞이면서 하고자하는 방법으로 배열되지가 않는다. CSS에 대한 속성에 대해 조금 더 공부해서 수정이 필요하다.

에서 입력을 받은 후, 화면에 출력되도록 기능을 추가하였습니다. 디자인도 조금 수정 하였습니다.