🤔 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>
💪 출처 및 도움주신분들
'퍼블리싱 및 CSS' 카테고리의 다른 글
div를 감싸고 있는 input에 focus 효과주는법 (0) | 2024.05.13 |
---|---|
간단한 스크롤바 없애기 + 드래그 기능 (tailwind) (0) | 2024.05.07 |