당근마켓 홈페이지 클론코딩

💨클론코딩 링크
💨원본 링크

상세 사항

• header, section, nav 등의 시멘틱 태그를 활용했습니다.

• 헤더와 푸터를 웹 너비에 반응형으로 작동하도록 기능을 추가했습니다.

• 대부분의 경우 @media 를 활용하여 css에 반응형으로 처리하도록 했습니다.
• 헤더의 검색창 부분은 미디어쿼리로 해결하기엔 복잡한 기능같아서 javascript를 활용했습니다.

• 접근성을 고려해 px단위보다는 주로 rem단위를 사용했습니다.

• scss전처리기를 사용해서 css를 작성했습니다. (컴파일은 node-sass를 활용했습니다.)

아쉬운 점

• BEM 방법론을 도입하지 않았습니다..
• 레거시 코드를 많이 참고했습니다. 요소를 레거시 코드를 따라서 맞춰놓은 다음 css가 어떤 방식으로 작동하는지 확인했습니다.
• 클래스 명이 난잡합니다. 대부분의 요소를 css선택자가 아닌 클래스명을 통해 제어하려 했습니다.

---

수정사항

• footer 부분에 부분적으로 BEM방법론을 적용했습니다.
• head 태그에 불필요한 부분을 제거했습니다.
• mt16, mtitle 등 난잡한 css 코드를 정리했습니다.