금일 진행 사항 - 컴포넌트 세분화 작업 진행 컴포넌트 리액트 JSX 및 HTML element 로 초안 작성 완료 예시) 자세한 작업내용은 아래 링크에서 확인 가능 https://www.figma.com/file/LUfL42xIwdg8LKHaeiIXUo/Portfolio-Project?node-id=0%3A1 Figma Created with Figma www.figma.com 작업 예정 실제 코드로 작성 / React + Styled Component

금일 진행 사항 - 컴포넌트 세분화 작업 진행 - 모달 UI 추가(리뷰 / 프로젝트 디테일 설명) - 깃헙 readme.md 업데이트(UI 추가) 컴포넌트 세분화 작업 실제 코드를 작성하기 전에 페이지 및 컴포넌트 세분화 작업을 진행 중인데, 이는 각 페이지에 어떤 컴포넌트가 포함되어 있는지, 그리고 어떤 엘리먼트가 쓰여야 하는지 등을 미리 파악하여 실제 코드 작성의 효율을 높이기 위함이다. 해당 프로젝트의 규모가 크지 않으므로 Atomic Design 을 적용하지 않고 진행할 예정이다. 다만, Styled Component Theme 개념을 적용하여 스타일(색상 & 텍스트 스타일 등)을 재사용할 계획이다. 모달 UI Pair Review Detail Project & Studies Detail

네비게이션 바에서 특정 메뉴를 클릭했을 때 해당 페이지로 스크롤 이동하는 로직 출처: https://enai.tistory.com/33

금일 진행 사항 - UI 재구성 - Single Page Website 로 React + Styled Component 조합으로 구현할 예정 - 다양한 CSS & 애니메이션 효과를 통해 쾌적한 유저 경험을 유도할 예정 추가적으로 고려해야할 사항 관리자 페이지 필요? 나뭇잎 떨어지는 효과 https://thinking1.tistory.com/783 한글 / 영어 버전 진행 프로젝트 추가( 서림화 , 포트폴리오 웹사이트) 오늘 느낀점 UI 디자인을 하면서 페어님들의 리뷰를 다시 읽어보았는데, 그래도 나쁘지 않게 페어 프로그래밍을 했던 것 같다.

출처: https://knulab.com/archives/1185 배경이미지 브라우저에 꽉 채우기 – KNULAB 브라우저 뷰포트에 배경이미지가 꽉 차게 보여지려면 아래와 같이 min-height 값을 설정한다. Full Background Cover body, html { margin: 0; padding: 0; height: 100%; } .bgimg { border: 0; padding: 0; background-image: url('ima knulab.com 브라우저 뷰포트에 배경이미지가 꽉 차게 보여지려면 아래와 같이 min-height 값을 설정한다. Full Background Cover 첫번째 방법 html { background: url(images/bg.jpg) no-repeat cen..

요약하기. 출처: uxplanet.org/how-to-improve-an-e-commerce-checkout-experience-ui-ux-case-study-e56139a6dc5d