Flowbite로 Tailwind CSS 아바타 구성요소 구축

웹사이트용 UI 인터페이스를 구축할 때 제가 가장 좋아하는 기술 중 하나는 Tailwind CSS와 Flowbite입니다.

Tailwind CSS은 클래스를 사용할 때 유틸리티 우선 접근 방식으로 인해 빠르게 성장하는 CSS 프레임워크입니다. 이렇게 하면 CSS 파일에 코딩할 필요 없이 HTML에서 직접 페이지를 매우 쉽게 빌드할 수 있으며 프로젝트 전체에서 동일한 클래스를 유지할 수도 있습니다.

Flowbite은 드롭다운, 모달, 탐색 모음, 회전식 슬라이더 등과 같은 대화형 요소를 포함하여 Tailwind CSS의 유틸리티 클래스로 구축된 가장 인기 있는 구성 요소 라이브러리입니다.

오늘은 Tailwind CSS 및 Flowbite를 사용하여 아바타 구성 요소를 빌드하는 방법을 보여 드리고자 합니다.

Tailwind CSS 아바타

아바타 구성 요소는 웹 사이트에서 사용자 프로필의 시각적 식별자로 사용할 수 있습니다. 일반적으로 이미지 요소로 구성됩니다.

Flowbite의 간단한 예를 확인해 보겠습니다.

<img class="w-10 h-10 rounded-full" src="https://flowbite.com/docs/images/people/profile-picture-5.jpg" alt="Rounded avatar">

보시다시피 이미지 요소에 rounded-full 클래스를 적용하기만 하면 됩니다.

테두리를 사용하여 아바타 구성 요소에 대해 더 흥미로운 스타일을 만들어 보겠습니다.

<img class="w-10 h-10 p-1 rounded-full ring-2 ring-gray-300 dark:ring-gray-500" src="https:/flowbite.com/docs/images/people/profile-picture-5.jpg" alt="Bordered avatar">

대박! 사용자의 온라인 상태를 표시하기 위해 이미지에 상대적인 녹색 또는 빨간색 점을 추가하여 Flowbite에서 또 다른 예를 들 수 있습니다.

<div class="relative">
    <img class="w-10 h-10 rounded-full" src="https://flowbite.com/docs/images/people/profile-picture-5.jpg" alt="">
    <span class="top-0 left-7 absolute  w-3.5 h-3.5 bg-green-400 border-2 border-white dark:border-gray-800 rounded-full"></span>
</div>

사용자가 기본적으로 아바타를 설정하지 않은 경우 다음 SVG 예제를 자리 표시자로 사용할 수도 있습니다.

<div class="relative w-10 h-10 overflow-hidden bg-gray-100 rounded-full dark:bg-gray-600">
    <svg class="absolute w-12 h-12 text-gray-400 -left-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path></svg>
</div>

자세한 내용은 Tailwind CSS Avatar examples on Flowbite에서 확인하실 수 있습니다.

Flowbite - Tailwind CSS 구성 요소

더 많은 Tailwind CSS 구성 요소에 액세스하려면 드롭다운, 모달, 탐색 모음 등과 같은 최대 30개의 구성 요소가 포함된 Flowbite 구성 요소 라이브러리를 확인할 수 있습니다.

Flowbite - Tailwind CSS Components