가끔은 나무만 보지말고 숲을 보고 작업을 하자!

모든페이지에서 사용하는 global navigation bar나 lnb footer 같은것과

각각 의 페이지에서 사용하는 컴포넌트를 분리할 필요가 있다.

<aside> 💡 inline요소에게는 transform 속성을 먹일 수 없다.

</aside>

not 선택자 사용!

detail-item중에 마지막 요소가 아닌 녀석들한테 가상요소 선택자를 주고 margin 과 content를 준다.

&-detail-item {
      a:hover {
        text-decoration: underline;
      }

      &:not(:last-child)::after {
        margin: 0 8px;
        content: '|';
      }
    }

Global-header 포지셔닝 작업!

global header ( gnb + lnb ) 는 항상 상당 고정이 필수!

기본적으로 position : fixed 된다.

글로벌 nav로는 gnb와 lnb가 있는데 이 둘을 감싸는 global-header를 만들고,