전체 문서의 맥락에서 벗어나서 존재하는 친구는 <aside></aside> 로 만든다.

dropdown menu! or collapse

3개의 버튼 (커뮤니티, 스토어, 인테리어시공)이 있고 눌렀을때, 펼쳐지는 컴포넌트가 있다.

<aside> 💡 3개의 요소가 같기 때문에 처음에 하나로 마크업 및 스타일을 하고 추가로 나머지 2개를 만든다.

</aside>

마크업 보강할때는 grid system이 어떻게 먹는지 고민을 하자.

sidebar는 그리드 시스템이 적용되지 않으므로 container로 묶을 필요가 없다.

1. div로 영역들을 묶는다!
2. class 이름을 부여한다.

글자수 제한을 생각한다! (글자 수가 겁나 많을때를 생각한다.)

1. 🧑🏻‍🎨 왈…: 그냥 아이디를 두줄에 걸쳐 표현해주세요. (아바타만 건들면됨)

<aside> 💡 flex-shrink : 0 : flex로 배치된 친구들중에서 flex-shrink를 0으로 준 친구는 무조건 자기 사이즈를 가지게 된다.

</aside>

<aside> 💡 사달라 아바타에 flex-shrink : 0 를 준 모습. 대신 오른쪽 텍스트 영역이 줄어든다.

</aside>

1. 🧑🏻‍🎨 왈…: 아이디를 한줄로 나타내고 길어지면 …으로 나타내야함.

   overflow를 먼저 이해해야함. overflow를 사용할려면 그 기준이 되는 요소의 width 와 height를 정확히 명시 해주어야한다.

   &-user {
       padding: 32px 0;
       a {
         @include flexbox(start);
         @include text-style(14, $primary);
   			// anchor에 넓이를 줘서 overflow를 사용 할 수 있게 만듬
         width: 100%;
         font-weight: 700;
       }
   
       .avartar-24 {
         flex-grow: 0;
   			// 아바타 사진은 절대 줄어 들면 안됨!
         flex-shrink: 0;
         margin-right: 8px;
       }
   
       .username {
   			// username 부분은 나머지 공간을 다 먹도록 flex-grow : 1
         flex-grow: 1;
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
       }
     }
   

   // ...공식
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;