/SCSS_practice

SCSS와 Grid를 연습하기 위해 Pinterest layout 클론코딩해봄

Primary LanguageHTML

💡 원하는 사이트(페이지) 레이아웃 클론

기본 요구사항

  • [o] 결과와 비교할 수 있도록 선택한 클론 사이트의 URL 주소를 명시하세요.
  • [o] SCSS로 스타일을 작성하세요.
  • [o] 작성된 SCSS를 CSS로 컴파일하세요.
  • [o] 제출 프로젝트에 확인 가능한 HTML, CSS, SCSS 파일이 모두 포함돼야 합니다.
  • [o] 브라우저에서 정상적으로 출력돼야 합니다.

선택 요구사항

  • JS가 필요한 부분은 생략하고 이유를 명시해 보세요.(CSS로 대체 가능한지 피드백이 있을 수 있어요)
  • JS가 필요한 부분 중 구현할 부분이 있다면 자유롭게 구현해 보세요.
  • [o] 레거시 코드 활용보단 최신의 CSS Flex와 Grid를 활용해 보세요.
  • [o] 시멘틱 태그를 최대한 활용해 보세요.
  • [o] SCSS 컴파일에 Webpack이나 Parcel 같은 번들러를 활용해 보세요.
  • [o] BEM 방법론을 도입해 보세요.
    • Black : 재사용 가능한 기능적으로 독립적인 페이지 컴포넌트(재사용x)
    • Element : 페이지 컴포넌트를 구성하는 작은 부분(재사용o)
    • Modifier : Element의 속성을 정의하는 클래스
    • class 만 사용
    • 단어띄어쓰기는 - 로 대체
    • B,E 간에는 __ 로 구분
    • E,M 간에는 -- 로 구분