Tailwind -실습

✔️ html (마크업)

<div class="p-10">
  <figure class="">
    <img class="" src="/images/faces/face1.jpg" alt="슬비쌤" />
    <figcaption class=""><span class="">온라인</span></figcaption>
  </figure>
  <figure class="">
    <img class="" src="/images/faces/face1.jpg" alt="슬비쌤" />
    <figcaption class=""><span class="sr-only">오프라인</span></figcaption>
  </figure>
</div>

• alt - 이미지를 볼 수 없는 상황에서 대체 텍스트
• sr-only - 공간 차지하지 않고 보이지도 않게 할 수 있음 (screen reader)
• figcontents

✔️ 방법 1 - position

 <div class="p-10 flex gap-5 border-black border-2 m-10">
      <figure class="relative size-16">
        <img class="rounded-full" src="../faces/face1.jpg" alt="슬비쌤" />
        <figcaption
          class="absolute size-[18px] rounded-full bg-primary-100 right-0 bottom-0 border-white border-2"
        >
          <span class="sr-only">온라인</span>
        </figcaption>
      </figure>
      <figure class="relative size-16">
        <img class="rounded-full" src="../faces/face1.jpg" alt="슬비쌤" />
        <figcaption
          class="absolute size-[18px] rounded-full bg-grayscale-100 right-0 bottom-0 border-white border-2"
        >
          <span class="sr-only">온라인</span>
        </figcaption>
      </figure>
    </div>

✔️ 방법 2 - grid

<figure class="size-16 grid grid-cols-1 grid-rows-1">
        <img class="rounded-full" src="../faces/face1.jpg" alt="슬비쌤" />
        <figcaption
          class="size-[18px] rounded-full bg-primary-100 border-white border-2 justify-self-end"
        >
          <span class="sr-only">온라인</span>
        </figcaption>
</figure>