웹솔루션개발 25년 노하우! 해피CGI의 모든것

HTML 구조                    class="absolute h-10 w-full bg-white rounded-lg shadow ease-out transition-transform transition-medium"        :style="{ transform: `translateY(calc(100% * ${selected}))` }"      >                                    type="button"            @click="select(0)"            :aria-selected="selected === 0"            class="py-2 px-3 w-full flex items-center focus:outline-n..

Css의 요소중 Grid만 이용하여 만들어진 탭메뉴입니다. 파일을 다운받아 압축파일을 열어보시면 index.html 파일과 style.css 파일로 구성이 되어 있습니다. css root 변수로 이루어져 있으며 그리드로 만들어진 탭메뉴입니다. 자바스크립트를 이용하지않고 css로만 이루어진 탭메뉴이며 가볍게 쓰실수 있을것 같습니다.

css로 제작된 반응형 탭 브라우저의 크기에 따라 탭의 디자인 간소화 됩니다. 브라우저의 크기가 900px 이상일때 브라우저의 크기가 900px 미만일때 탭의 텍스트가 사라집니다.