Note > tailwindcss

Tailwind CSS는 Adam Wathan, Steve Schoger, Jonathan Reinink, David Hemphill이 개발한 CSS 프레임워크입니다. 이 프레임워크는 CSS를 작성하는데 필요한 반복적인 작업을 줄이고, 빠르고 일관성 있는 디자인 시스템을 구축하기 위해 만들어졌습니다.

이전에는 CSS를 작성할 때 클래스 이름을 매번 작성하고, 이를 스타일 시트에서 정의하는 방식을 사용했습니다. 이는 일관성 있는 디자인 시스템을 만드는 데 어려움을 겪기도 했고, 반복적인 작업으로 인해 생산성이 떨어지기도 했습니다. Tailwind CSS는 이러한 문제를 해결하기 위해, 자주 사용하는 스타일을 클래스로 추상화하고, 이를 빠르게 적용할 수 있는 방식을 제공합니다. 이를 통해 CSS를 빠르고 일관성 있게 작성할 수 있으며, 생산성을 높일 수 있습니다.

container 클래스는 반응형 웹 디자인을 위한 그리드 시스템을 제공하며, 내부에 있는 콘텐츠를 중앙에 배치할 수 있도록 해줍니다.

이 클래스는 웹 페이지의 전체 너비를 사용하지 않고, 일부 공간을 비워 두는 것으로 컨텐츠의 가독성을 높일 수 있습니다.

mx-auto 클래스는 부모 요소의 가로 방향 중앙에 자식 요소를 배치합니다.

이 클래스는 margin-left와 margin-right 속성을 모두 auto로 설정하여 가로 방향으로 중앙 정렬합니다.

<div class="container mx-auto">
  <h1 class="text-3xl font-bold">Hello, World!</h1>
  <p class="text-lg">This is an example of using Tailwind CSS classes.</p>
</div>

Table Layout - Tailwind CSS

table-auto를 사용하여 테이블이 셀 내용에 맞게 열 크기를 자동으로 조정할 수 있도록합니다.

<table class="table-auto">
  <thead>
    <tr>
      <th>Song</th>
      <th>Artist</th>
      <th>Year</th>
    </tr>
  </thead>

설정 하지 않았을때 (position: static ) 기본은 요소가 일반적인 문서 흐름에 따라 다른 요소와 겹치지 않고 자연스럽게 쌓이며 배치됩니다. top, right, bottom, left 속성 무시: static 위치 속성을 가진 요소는 top, right, bottom, left 속성을 사용하여 위치를 조절할 수 없습니다.

position: relative; 부모 요소의 컨텍스트 내에서 동작합니다.

position: absolute; 부모 요소의 컨텍스트 내에서 동작합니다.

position: relative;

부모 요소 내에서 자신의 원래 위치를 기준으로 상대적인 위치를 조절합니다.

부모 요소의 레이아웃 흐름에 영향을 미치지 않으며, 다른 요소와 겹치지 않습니다.

부모 요소의 위치를 변경할 때, position: relative;로 설정된 자식 요소도 함께 움직이지만, 다른 요소에 영향을 주지 않습니다.

position: absolute;

부모 요소 중에서 position 속성이 static이 아닌(기본 값) 첫 번째 부모 요소를 기준으로 위치를 결정합니다.

부모 요소의 레이아웃 흐름에서 제거되며, 다른 요소와 겹칠 수 있습니다.

부모 요소의 위치를 변경하면 position: absolute;로 설정된 자식 요소도 영향을 받아 위치가 변경됩니다.

position: sticky

스크롤될 때 일정 위치에서 고정되도록 하는 속성입니다.부모 요소의 영향을 받습니다.top, right, bottom, left 속성을 사용하여 고정되는 위치를 지정할 수 있습니다.

position: fixed;

viewport 기준 절대 좌표 고정입니다.

display: inline-block; /* 또는 display: inline-flex; */