projects 2

03-04. 개인 포트폴리오 Projects 섹션 구현하기

• Projects - Development 피그마 프로토타입을 토대로 Projects 섹션을 구현합니다. 저의 개인 프로젝트와 전에 진행했던 팀 프로젝트에 대한 정보를 제공하는 섹션입니다. • 구현 화면 HTML 마크업과 CSS 구현(반응형까지)을 완료한 화면입니다. 데스크톱 - 큰 모니터 데스크톱 - 작은 모니터 (breakpoint : 1440px)(큰 모니터와 비교하자면 반응형 부분은 동일하며 좌우 여백의 크기만 다릅니다.) 태블릿 (breakpoint : 1024px) 모바일 (breakpoint : 768px) CSS 스타일링과 디자인 부분에서는 지속적으로 개선해 나갈 예정입니다. • 반응형 웹 구현 쉽지 않았습니다. 그래도 CSS 그리드와 친해질 수 있는 기회였습..

02-04. 개인 포트폴리오 Projects 섹션 레이아웃 잡기

•  Projects - Layout and Design 이 섹션에서는 제가 이전에 진행했거나 현재 진행 중인 프로젝트에 대해 소개합니다.   •  초안과 디자인 시스템 적용   초안입니다.이 상태에서 두 가지 디자인 시스템을 적용했습니다.  12 Column Grid Layout8-point Grid System  바로 최종안을 보여드리겠습니다.   •  최종안 결정   이 섹션에는 들어갈 요소들이 많기 때문에 가장 정석적인 방법으로 보여드리려고 했습니다. 여기서 얼마만큼의 정보를 보여드려야 할지는 여전히 고민입니다. 프로젝트가 여러 개이기에 이 화면에서 각 프로젝트의 모든 정보를 다 전달하고자 한다면 복잡하게 느껴질 것 같습니다.   프로젝트 상세 정보를 보여주는 모달을 추가적으로 구현하거나 이미지와..