항상 그래왔듯이 씨맨틱 하게 마크업을 먼저 한다.
마크업 보강 : 이 요소가 그리드 시스템 영향을 받고 있는지를 살펴본다. (모바일 ⇒ 테블릿 ⇒ 데스크탑)
모바일에서는 컨텐츠가 가려지는 부분을 스크롤로 처리해야한다.
체크 포인트
- 네비게이션 바의 시작이 기존 그리드 시스템보다 더 왼쪽에서 시작한다. 7px 땡겨서 시작한다.
- lnb-list의 height : 40px;
- 스크롤영역은 끝에서 끝까지
- active 되었을때 파란색 border가 회색 border를 덮어야한다.
<aside>
💡 grid system을 담당하는 container, row, col에 임의로 padding이나 기타 값을 주지 말자.
</aside>
스크롤이 되어야하는데 그리드 시스템안이 아닌 전체 영역에서 스크롤을 하고 싶다면?!?!
- overflow : auto를 사용
- 주의 해야할점 : overflow를 시킬 기준점을 명시 해주자. (width : 320px, height : 40px)
- 320px보다 더 긴요소가 있으면 스크롤 발생
- .lnb가 우리가 찾는 320px과 40px를 가지고 있으므로
overflow-x : auto; 를 준다.
- .lnb-list에게 넘쳐난 만큼의 width를 준다. 예) 임의로 width : 550px :: 방법 1