1. layout 분석

1. 모바일과 데스크탑이 공통으로 사용하고 있는 요소 먼저 찾기

2. 디자인 뿐만아니라 기능이 똑같은지 확인하기.

3. 마크업 의존도가 높은 곳 찾기

5. 데스크탑 구조에서 모바일로 어떻게 나타낼지…..

   마크업 기준. ( ✨ 모바일 First ✨ )

   <aside> 💡 1. 정보 컨텐츠를 보고 씨맨틱한 마크업 2. 마크업 보강 (컨테이너로 묶기, 레이아웃을 목적으로한 div) 3. 클래스 이름을 정해준다.

   </aside>

<aside> 💡 GNB는 header 영역이기 때문에 <header/> 태그로 감싼다.

</aside>

<aside> 💡 새로운 페이지로 이동하는 것은 <a> 태그로 감싸서 <img> <i> 을 넣어준다.

</aside>

<aside> 💡 네비게이션 버튼들은 <nav> 로 묶어주고, 중요한 룰은 그 안에 head 태그중 하나가 있어야한다. (h1, h2….)

</aside>

<aside> 💡 정보성 마크업을 진행하면서 각 기기별로 display : none인지 block인지 클래스에 선언을 다 해준다.

</aside>

✨ 어디서 부터 grid system이 적용되는지 살펴보고, grid system이 먹는 부분 바로 위에

<div class=”container”> 로 시작한다.

비슷한 요소들끼리 묶어준다. <div>로…

모바일 시안부터 시작!!!

1. 개발자 도구로 일단 아이폰 5 스펙에 맞춘다. ⇒ 여기서 안깨지면 다른데서는 왠만하면 안깨진다.
2. 로고 부터 시작!!