[유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프_프론트엔드(리액트) 10일차 - 리액트 기본 기념 CSS 활용 과제 : 포트폴리오 사이트 만들기
과제 결과물 : https://nanhimang.github.io/udemy-nanhimang/%ED%94%84%EB%A1%9C%ED%95%84/2-assignment-2.html
1) 과제 요구사항
기존에 만들었던 자기소개 페이지를 보완하여 회사에 제출할 포트폴리오 꾸미기
① HTML 내용 보완
② 이쁘게 꾸며보세요 . https://www.pinterest.co.kr/ 참고
③ Media query 를 사용해서 768px 이하일 때는 다른 화면이 나오도록
중요사항
- 핵심만 표현하면서 가독성 높은 디스크립션
- 심플하고도 심미성 있는 디자인
2) 코드 작성
3) 과제 회고(느낀점)
본 과제를 진행하면서 가장 난감했던 것은 margin을 어느 element에, 각각 얼마나, 그리고 어떤 위치에 배치할 것이느냐하는 문제였다. 우선 margin을 위계에 따라 분배해야겠다고 생각했으나, 어떻게 분배할 것인지가 고민이었다. 초반에는 content를 감싸는 div의 모든 방향에 margin을 부여해야겠다고 생각했으나, 페이지의 전체 사이즈, 들어갈 데이터의 특성에 따라 자치하는 기본 영역이 달라질 수 있다고 생각했고, margin-top, margin-bottom만 부여하기로 결정, 나머지 margin은 content 단위에 부여하기로 결정했다.
그 다음으로 또 난감했던 문제는, 페이지 리사이징을 고려해 element의 전체적인 비율이 유지되도록 width와 height를 부여해야한다는 점이었다. 이 문제가 margin의 문제와 겹쳐지면서 더욱 어렵게 느껴졌던 것 같다.
레퍼런스
#프로젝트캠프 #프로젝트캠프후기 #유데미 #스나이퍼팩토리 #웅진씽크빅 #인사이드아웃
#IT개발캠프 #개발자부트캠프 #리액트 #react #부트캠프 #리액트캠프
————————————————————————————————————
본 후기는 유데미 x 스나이퍼팩토리 10주 완성 프로젝트캠프 학습 일지(B-log) 리뷰로 작성
되었습니다.
