소개

특별한 소개는 필요 없어요.

프로젝트는 제가 작업 중인 것이에요. 지금 보시다시피, clearly 우리는 문제가 있어 보이죠.

아이템들이 div를 채우지 못하고 이상하게 보여요. 이 부분을 함께 수정할 거에요!

기술 스택 - Tailwindcss & React.

디버깅 🐛

일반적으로 해결책을 찾기 전에 많이 고민하는 편이에요. 인터넷에서 div를 가운데 정렬하는 방법을 계속 찾느라 피곤한 거죠!!

그래서 저는 디버깅 과정과 아이디어 전체를 작성해서 UI 요소를 원하는 위치에 정확히 배치할 때 도움이 되도록 해놨어요!

무슨 문제가 있나요?

아래는 표 형식으로 나타내드리겠습니다.

이름	성별	나이
Jane Doe	여성	30
John Smith	남성	35

보시다시피, 전체 공간을 차지하고 있는 몇 가지 테일윈드 요소가 있는 div가 있습니다.

이 div를 찾는 가장 쉬운 방법은 검색에 해당 문자열을 입력하는 것입니다.

거기에 도착하면 다른 내용이 포함되어 있는 것을 볼 수 있습니다.

 {/*** 작은 워 그래프 ***/}
 <div className="bg-green-300 p-0.5 rounded-lg text-center hover:bg-green-200">
     <div className="md:flex md:flex-row p-0.5 gap-2 justify-center">
        <div className="mt-2 md:mt-0 flex-1">
             <InfoGraphs
                title="Players Ratio"
                subTitle=""
                imgPath="/clanArrowed.png"
                graphData={}
                tinyGraphTitle=""
                info={""} />
         </div>
.....
.....
.....

여기서 우리는 2개의 div를 가지고 있음을 볼 수 있습니다. 첫 번째와 두 번째 그리고 그런 다음 자체적으로 일부 div를 보유하는 InfoGraphs가 있습니다. 이것은 큰 프로젝트이기 때문에 완전히 분석하는 데 시간이 걸릴 것입니다!

그러나 F12를 사용하여 흥미로운 것을 발견했습니다!

실제로 메인 아래 두 번째 div이 문제를 일으키고 있는 것 같아요!

왜 아래까지 완전히 나오지 않는 걸까요?

여기에 수정 방법이 있어요!

 <div className="md:flex md:flex-row p-0.5 gap-2 justify-center md:h-full">
  <div className="mt-2 md:mt-0 flex-1">

마크다운 형식으로 변경하는 것을 추가해서 정말 잘 작동했네요!

이제 원하는 만큼만 가져가요!

결론

Tailwindcss를 사용하면 많은 문서를 활용할 수 있어서 작업이 훨씬 더 좋고 쉬워요!

이 기술적인 글이 유용했기를 바라며, 다음 글에서 뵙겠습니다!

즐거운 코딩, 엔지니어분들!

안전하고 건강하게 지내세요! 🚓

사용자 인터페이스 원하는 대로 만드는 방법

소개

디버깅 🐛

결론