• 클론 코딩
  • 해당 사이트랑 똑같이 만들어보기!
• 하나의 HTML 파일
  • 개발자도구로 html 복붙하지않고 하나하나 직접 작성!
  • 버튼은 동작안되도 된다.
• 하나의 CSS 파일
  • BEM 컨벤션으로 class이름을 작성
  • 사이트의 css를 최대한 참고하지않고 직접 레이아웃을 구성

학습 키 포인트

• 레이아웃 마스터하기

  • 기존 CSS 코드를 최대한 보지않고 레이아웃 구현
  • flex, grid 모두 사용
  • relative, absolute를 잘 이해하고 활용

• 시멘틱 태그를 활용

• BEM 컨벤션 잘 고민해보기

  .block__element--modifier
  

구현 팁

• vscode의 Live Server 활용해서 개발한다.
• HTML이 하나의 파일에 있어 상당히 길어지기에 좌측 넘버를 토글 시킨다.
• 작업 단위를 구분해서 잘 커밋해보자.
• 아이콘, 이미지는 개발자 도구로 소스링크를 잘 빼돌려 보자.
• 1px의 오차를 용서하지 말자.

기존 사이트 레이아웃 이해하는 꿀팁

모든 element에 border 설정해주기

* {
  border: 1px solid gary;
}

뭔가 많이 보일 것이다.

리뷰 규칙

개인 레포에서 2개의 브랜치를 만든다. main, dev