아이템 선택영역 코드 개선

첫 시도

<div class="flex-grow relative">
    <div class="flex w-full h-full absolute">
        <div class="flex-grow"></div>
        <div class="flex-grow w-6 rounded-lg bg-blue-300"></div>
        <div class="flex-grow"></div>
    </div>
    <div class="flex flex-col text-white relative">
        <div>수</div>
        <div>25</div>
    </div>
</div>
<div class="flex-grow relative">
    <div class="flex w-full h-full absolute justify-center">
        <div class="w-8 rounded-lg bg-blue-300"></div>
    </div>
    <div class="flex flex-col text-white relative">
        <div>수</div>
        <div>25</div>
    </div>
</div>

.justify-center 를 사용하여 flex 콘텐츠를 중앙정렬 할 수 있기 때문에 3개의 div를 만들고 가운데를 사용하는 형태의 코드를 피할 수 있었다. ㅎ

더 좋은 아이디어

<div class="flex-grow mx-2">
    <div class="flex flex-col">
        <div>화</div>
        <div>24</div>
    </div>
</div>
<div class="flex-grow mx-2 bg-blue-300 rounded-lg">
    <div class="flex flex-col text-white">
        <div>수</div>
        <div>25</div>
    </div>
</div>
<div class="flex-grow mx-2">
    <div class="flex flex-col">
        <div>목</div>
        <div>26</div>
    </div>
</div>

선택 영역을 표현하기 위한 별도의 div를 추가하던 방식을 요일을 담는 div를 활용하여 배경을 표현하는 방식으로 수정했다. 덕분에 배경을 표현하던 div와 position 관련 코드를 제거할 수 있었다.

다른 요일과 div가 붙어 보이지 않도록 요일마다 .mx-2 마진을 추가했다.

상단 이미지처럼 스크린 사이즈가 늘어났을 때 선택영역도 같이 늘어나는 차이가 생겼지만 더 좋아보인다.

결론

역시 잠을 자야…

Leave a comment

Your email address will not be published. Required fields are marked *