과제 Github 주소 : https://github.com/udemy-team13/training/tree/main/syj
1) 과제 요구사항
반복되는 코드를 최소화하기 위한 class 설계와 content를 적재적소에 배치하는 것이 핵심
세이프홈즈 페이지를 HTML, CSS로 퍼블리싱 도전(클론 코딩)
2) 코드작성 & 결과
총 10페이지로 이루어져있으며, 선택자를 넣을 때 페이지 단위로는 복수 class를 활용하고 개별 컨텐츠로는 단일 class를 활용하여 대략적인 스타일을 잡고 HTML 내 style 속성으로 세부 스타일링을 추가했다. 시간상 여유가 없어 CSS 스타일링은 미완인 상태이다.
3) 과제 회고(느낀점)
Reat의 기본적인 사용법을 빨리 마스터해야겠다는 생각이 들었다. 사이트 레이아웃이 아주 복잡한 편은 아니고 반복되는 구조였기에 React를 활용했다면 번거로운 복붙작업없이 깔끔한 코드를 작성할 수 있었을거란 생각이 들었다.
HTML을 배울때부터 생각했던건데, 실제 현업에서는 텍스트 데이터에 span 태그와 h1~h6 태그 중 주로 어떤 Element를 사용할까? p 태그는 대충 2줄 이상의 문단일 경우 사용하는건 알겠는데, 앞의 두가지 경우는 웹사이트에 따라 약간 다른 것 같아서 혼란이 왔다. 일단 세이프홈즈의 경우에는 span을 사용하거나 텍스트 데이터 style을 div를 활용해서 입히는 것 같았다. 아무래도 span이 inline 요소이다보니 margin이나 padding을 적용하는데 편리할 것 같긴 하다만 ‘제목’에는 h1~h6를 사용하는 것이 의미론적으로 맞지 않나하는 생각이 들면서 혼동이 왔다.
앞서 언급했듯이 세이프홈즈는 레이아웃이 복잡한 편은 아니라 레이아웃을 유형화하기 어렵지 않았다. 그래서 불필요한 코드를 줄이기 위해 고민을 했다. 스타일을 재사용하는데에는 복수 class 사용, 복수 선택자 사용 등의 방법이 있지만 추후 코드를 보수할 경우를 생각해보며 나름의 전략을 짜는 재미를 느낄 수 있었다.
#프로젝트캠프 #프로젝트캠프후기 #유데미 #스나이퍼팩토리 #웅진씽크빅 #인사이드아웃
#IT개발캠프 #개발자부트캠프 #리액트 #react #부트캠프 #리액트캠프
——————————————————————————
본 후기는 유데미 x 스나이퍼팩토리 10주 완성 프로젝트캠프 학습 일지(B-log) 리뷰로 작성
되었습니다.
