/daangn-clone

FE-study 내에서 진행한 당근마켓 홈페이지 클론코딩

Primary LanguageHTML

당근마켓 클론코딩 (FE-study 내 개인 작업물)

프로젝트 목적

  1. HTMLCSS에 대한 연습

    • 반응형 웹 페이지 연습
  2. 스터디 => 깃&깃허브를 통한 작업 연습

  3. 당근마켓 코드 & 스터디원 코드와 비교해서 보다 나은 방법 찾기


= 작업 기록 (날짜별 작업한 범위 및 새롭게 배운 내용 정리) / 당근마켓 홈페이지 원본 스크린샷 이미지 모음 / 나의 최종 작업물 스크린샷 이미지 모음


HTML 파일 설명

= 당근마켓 클론코딩을 구성하는 html 파일 리스트

index.html = 당근마켓 최상단 페이지 (중고거래 페이지와 동일)

nearby-store.html = 동네가게 페이지

jobs.html = 알바 페이지

realty.html = 부동산 직거래 페이지

cars.html = 중고차 직거래 페이지

세부 페이지 리스트


src 폴더 내 파일(CSS, JS) 설명

= CSS, js, 이미지, svg 파일 등이 있는 곳

= 웹 페이지 내 공통적으로 존재 or 독립적인 component의 스타일 모음

  • articles--column.css

    판매 상품 중 사진과 설명이 세로로 되어 있는 요소

  • articles--row.css

    판매 상품 중 사진과 설명이 가로로 되어 있는 요소

  • banner.css

    동네 가게 ~ 중고차 페이지에 있는 앱 다운로드 등을 설명하는 요소

  • footer.css

    대부분의 웹사이트에서 사용하는 footer

  • footer--sub.css

    당근채팅, 당근로그인 페이지에서 사용하는 footer

  • hearder.css

    대부분의 웹사이트에서 사용하는 header

  • header--sub.css

    당근채팅, 당근로그인 페이지에서 사용하는 header

  • index__install-modal.css

    index 페이지가 태블릿 이하 사이즈일 때 나타나는 modal

    (아직 X 버튼에 대한 JS 설정 안함)

  • screen-thumnails.css

    주요 페이지 (header nav에 있는 요소들) main element 최상단 section

= 각 웹 페이지별 스타일 모음

= 브라우저에서 기본적으로 지원해주는 스타일에 대한 재설정

= html에 연결되는 가장 기본적인 스타일

= 전체 스타일에서 사용되는 CSS 변수 모음 (색상, 여백 등)