한줄인 네비게이션바를 모바일화면에서 두줄로 출력하는 방법

🤔 NavBar라고 불리우는 네비게이션바를 두줄로 출력하는 방법

퍼블리싱 작업에서 한줄인 div를 두줄로 나눠서 출력하는 방법에 대해

🧐  hidden을 사용하여서 만들기

<div>
  <div className="xl:hidden">
    {/*내용*/}
  </div>
  <div className="xl:inline hidden">
    {/*내용*/}
  </div>
</div>

 

tailwind 기준으로 크기를 지정하여 hidden을 이용하여 컨텐츠를 가리고 넣는 방식으로 진행하였다

하지만 단점은 하나의 내용을 수정하려면 두개다 수정해야하는 번거로움이 발생하였다

😆  flex-row flex-col 적극 사용하기

크기에 따라서 flex-col과 flex-row를 사용해서 컨텐츠들을 적절히 배치해줬다

div가 추가로 필요하지만 한번의 내용만 수정할 수 있어서 편리했다

 

      <div className="flex flex-col xl:flex-row">
        {/*상단*/}
        <div>
          {/*내용*/}
        </div>
        {/*하단*/}
        <div>
          {/*내용*/}
        </div>
        {/*한줄로 보일때 추가해야할 내용*/}
        <div className="xl:inline hidden"></div>
      </div>

 

💪 출처 및 도움주신분들