[내일의집] Global Navigation Bar

01. 레이아웃 분석

• 모바일(sm) / 태블릿(md) / 데스크탑(lg)

1. 공통요소 찾기
   1. 디자인 뿐 아니라 기능이 완전히 동일한 요소를 찾아야.
   2. 3타입 공통요소 : 서비스명(h1, a), 장바구니 버튼(button, a)
   3. md-lg 공통요소 : 
2.  원샷원킬하는 반응형 레이아웃 잡기
   1. 시안에서 구역이 나뉘는 or 묶이는 부분 찾기
   2. breakpoint별로 무엇을 숨기거나 추가해서 해당 구역 안에 집어넣을 수 있도록 설계

02 마크업 작성

1. 모바일 -> 태블릿 -> 데탑 순서
2. sementic markup : 전체는 <heading>, 내부에는 <a>, <button>(타입 꼭 적기), <nav>(제목태그 꼭 넣기), 등 이용해서 작성. 필요에 따라 aria-label, aria-hidden, sm-only, visually-hideen, btn-primary 등 추가
3. 레이아웃 grid system 추가 : .container > .row > .col-*
4. 전체 요소에 클래스 이름 지정 : 알아보기 쉽게 지정, style 작업하며 필요해지는 class는 추가
5. state변화 체크 : hover, focus, active, disabled는 기본. authentication 등으로 인해 많은 양의 변화가 있을 때는 note와 readme 남겨주기
6. 리팩토링 : 일부 components를 새 파일로 옮길 때는 고유의 스타일(width, color 등)을 선언하는 코드 위주로 옮기기. margin 등 화면 레이아웃에 관련된 특수한 선언은 레이아웃 파일의 일부로 남기는 게 낫다.

03 스타일 디테일

• <a> 영역 확장 : 글씨 외부의 일정 공간도 클릭할 수 있도록 display:block, padding 넣고, 그만큼 item 간격 재조정
• <strong class="badge"> : position:absolute로 똑 떼어다 얹기
• position:relative인 <div> 안에 2개의 child가 있을 때, div에 특별한 형태가 없다면 2nd child는 1st child 기준으로 위치를 잡음
• *모서리 곡률* : border-radius : (1) 50% 넣으면 사각형 전체 외곽선이 4등분되어 적용됨 (타원형) (2) (width or height)/2 px 이상의 숫자를 넣으면 뾰족한 꼭지점만 깎임
• 툴팁 만들기 : border 생기는 원리 이용! 크기 없는 ::before 블록에 위/아래와 왼/오 각각 같은 사이즈 줘 가며 모양 잡기. 툴팁에 border가 필요하면 ::after도 만들어 약간 빗겨가게 겹치면 눈속임 가능.