CSS의 Flex, Grid 및 Positioning: Ultimate Tailwind CSS 가이드

좋아요, 프런트 엔드 영웅 ?‍♂️?‍♀️, Tailwind를 사용하여 CSS Flex, Grid 및 Positioning에 대한 본격적인 튜토리얼을들어보겠습니다. CSS 트위스트 ! 우리는 중앙 정렬 마법, 미친 위치 지정, 반응형 레이아웃 및 그 사이의 모든 것에 대해 이야기하겠습니다. 따라서 레이아웃을 길들이고, 브라우저 문제를 처리하고, 모든 것이 제멋대로인 것처럼 보일 때 침착함을 유지할 수 있는 능력을 얻을 수 있는 레이아웃 원더랜드를 여행할 준비를 하세요.

---

1. Flexbox(Flex)와 그 슈퍼파워
Flexbox는 1차원 레이아웃(한 번에 한 행 또는 열)의 Jedi와 같습니다. 항목 간격을 균등하게 두고, 항목을 중앙에 배치하고, 모바일에서 지저분해 보이지 않는 반응형 레이아웃을 만드는 데 도움이 됩니다.
시작하기: flex 및 flex-col먼저 Tailwind의 flex 유틸리티를 사용하여 컨테이너를 'flex 컨테이너'로 만드세요. 항목을 연속으로 원하십니까? 그냥 플렉스. 칼럼에 필요하신가요? flex-col을 추가합니다. 참 쉽죠.

<div>



<p>대신 해당 항목을 열로 원하시나요?<br>
</p>

<pre class="brush:php;toolbar:false"><div>



<h3>
  
  
  필수 Flex 속성
</h3>

<div><table>
<thead>
<tr>
<th>Property</th>
<th>Tailwind Class</th>
<th>What it Does</th>
</tr>
</thead>
<tbody>
<tr>
<td>justify-content</td>
<td>justify-center, justify-end</td>
<td>Aligns items along the main axis</td>
</tr>
<tr>
<td>align-items</td>
<td>items-center, items-end</td>
<td>Aligns items along the cross axis</td>
</tr>
<tr>
<td>flex-wrap</td>
<td>flex-wrap, flex-nowrap</td>
<td>Wraps items to the next line when needed</td>
</tr>
<tr>
<td>flex-grow</td>
<td>flex-grow-0, flex-grow</td>
<td>Allows items to grow</td>
</tr>
<tr>
<td>flex-shrink</td>
<td>flex-shrink-0, flex-shrink</td>
<td>Allows items to shrink</td>
</tr>
<tr>
<td>flex-basis</td>
<td>basis-1/2, basis-full</td>
<td>Sets the initial size of an item</td>
</tr>
</tbody>
</table></div>

<h3>
  
  
  Flexbox를 사용한 센터링: Tailwind의 "Just Center It" 솔루션 ?‍♀️
</h3>

<p>Flexbox는 센터링을 어리둥절하게 하는 것부터 justify-center와 items-center라는 두 가지 클래스로 수행합니다.<br>
</p>

<pre class="brush:php;toolbar:false"><div>




<hr>

<p><strong>2. CSS 그리드: 레이아웃을 위한 2차원 마법</strong> 그리드는 Flexbox의 큰 형제입니다. 행 <em>및</em> 열을 제어하려는 2D 레이아웃에 적합합니다. 갤러리, 복잡한 레이아웃 또는 수직 및 수평 모두 구조가 필요한 모든 것이 필요할 때 사용하면 됩니다.</p>

<h3>
  
  
  그리드 레이아웃 설정
</h3>

<p>기본 그리드를 설정하려면 먼저 그리드 및 Grid-cols-* 클래스로 열을 정의하세요.<br>
</p>

<pre class="brush:php;toolbar:false"><div>



<p>이 설정에서는 gap-4 덕분에 3개의 동일한 열과 그 사이에 약간의 여유 공간이 제공됩니다.</p>

<h3>
  
  
  필수 그리드 속성
</h3>

<div><table>
<thead>
<tr>
<th>Property</th>
<th>Tailwind Class</th>
<th>What it Does</th>
</tr>
</thead>
<tbody>
<tr>
<td>grid-template-columns</td>
<td>grid-cols-3, grid-cols-6</td>
<td>Defines the number of columns</td>
</tr>
<tr>
<td>grid-template-rows</td>
<td>grid-rows-1, grid-rows-2</td>
<td>Defines the number of rows</td>
</tr>
<tr>
<td>gap</td>
<td>gap-4, gap-6</td>
<td>Adds space between grid items</td>
</tr>
<tr>
<td>grid-column</td>
<td>col-span-1, col-span-2</td>
<td>Sets the column span of an item</td>
</tr>
<tr>
<td>grid-row</td>
<td>row-span-1, row-span-2</td>
<td>Sets the row span of an item</td>
</tr>
</tbody>
</table></div>

<h3>
  
  
  그리드를 이용한 센터링: Easy Peasy
</h3>

<p>모든 것이 그리드 중앙에 위치하길 원하시나요? 이것을 시도해 보십시오:<br>
</p>

<pre class="brush:php;toolbar:false"><div>



<p><em>부적절한 행동에 대한 대처 요령</em><br>
반응형 레이아웃에서 가장 흔히 발생하는 문제 중 하나는 모든 것을 작은 화면에 맞추는 것입니다. Grid와 Flex가 작동하기 시작할 때 수행할 작업은 다음과 같습니다.</p>

<ul>
<li>
<strong>화면 크기에 따라 열 조정</strong> : sm:grid-cols-2 또는 lg:grid-cols-4와 같은 반응형 클래스를 사용하여 화면 너비에 따라 레이아웃을 전환합니다.
</li>
</ul>
<pre class="brush:php;toolbar:false"><div>


<ul>
<li>
<strong>오버플로 처리</strong>: 콘텐츠가 잘리거나 넘쳐나는 경우 Tailwind의 오버플로 자동 또는 오버플로 숨김 클래스를 사용하면 이러한 괴물을 길들이는 데 도움이 될 수 있습니다.</li>
</ul>

<hr>

<p><strong>3. 위치 지정: 상대, 절대, 고정 및 고정(가끔 오작동하는 방식도 포함) ?️‍♂️</strong> CSS 위치 지정은 장난꾸러기 고양이를 길들이는 것과 같을 수 있습니다. 요령을 모르면 <em>그것</em>이 원하는 곳으로 이동합니다. 다음은 각각의 작동 방식과 작동을 시작할 때를 위한 몇 가지 팁입니다. 상대: 가만히 있으면서 조정하세요<br>
상대 위치 지정을 사용하면 문서의 일반적인 흐름을 유지하면서 요소를 약간 조정할 수 있습니다. 작은 넛지에 적합합니다!<br>
</p>

<pre class="brush:php;toolbar:false"><div>



<p>absolute: 앵커가 필요한 자유 부동 요소absolute는 흐름에서 요소를 제거하여 가장 가까운 위치의 상위 항목(상대 또는 유사한 요소)에 고정합니다. 상대적 부모가 없으면 몸체에 고정됩니다.</p>

<ul>
<li>
<strong>프로 팁</strong>: 배치를 제어하려면 항상 절대 요소에 상대 상위 요소를 제공하세요.
</li>
</ul>

<pre class="brush:php;toolbar:false"><div>



<p>고정: 스크롤해도 항상 거기에 있습니다. 고정 요소는 페이지가 스크롤되는 경우에도 한 위치에 유지됩니다. 이는 고정된 탐색 모음에 적합하지만 중요한 콘텐츠와 겹치면 모바일에서 성가실 수 있습니다.</p>

<ul>
<li>
<strong>프로 팁</strong>: 필요한 경우 작은 화면에서 고정 요소를 숨길 수 있는 반응형 클래스를 추가하세요.
</li>
</ul>

<pre class="brush:php;toolbar:false"><div>



<p>숨겨진 sm:block을 사용하여 모바일에서 숨기기:<br>
</p>

<pre class="brush:php;toolbar:false"><div>



<p>sticky: Scrollsticky 요소는 스크롤 지점에 도달할 때까지 상대 요소처럼 작동한 다음 고정됩니다. 필요할 때만 스크롤을 따라가려는 헤더에 적합합니다.</p>

<ul>
<li>
<strong>끈적끈적한 특징</strong> : 끈적끈적이 작동하려면 컨테이너가 스크롤할 수 있을 만큼 충분히 높아야 합니다. 그렇지 않으면 전혀 달라붙지 않을 수 있습니다.
</li>
</ul>

<pre class="brush:php;toolbar:false"><div>




<hr>

<p><strong>4. 전환 및 변형: 부드러운 이동 및 시각적 변화 ?</strong><br>
변환은 문서 흐름에서 실제로 위치를 이동하지 않고도 요소를 이동, 회전, 크기 조정 및 기울일 수 있습니다.</p>
<h3>
  
  
  순풍 변환 기본 사항
</h3>

<p>translate-x-*,translate-y-*,rotate-*,scale-*를 사용하여 요소의 위치를 ​​시각적으로 조정합니다.<br>
</p>
<pre class="brush:php;toolbar:false"><div>



<h3>
  
  
  호버 효과를 위한 부드러운 전환
</h3>

<p>부드러운 애니메이션을 만들려면 시작 상태에서 전환-*를 사용하세요. Tailwind의 전환-변환, 전환 불투명도 및 모든 전환 유틸리티를 사용하면 이 작업이 쉬워집니다.<br>
</p>

<pre class="brush:php;toolbar:false"><div>




<hr>

<p><strong>5. 콘텐츠 중앙 정렬: Flexbox, Grid 및 강력한 "Place" 유틸리티</strong><br>
사물을 중심에 두는 것은 놀라울 정도로 어려울 수 있습니다. 최고의 요령은 다음과 같습니다.</p>

<ul>
<li>
<strong>Flexbox</strong> : justify-center 및 items-center를 사용하세요.</li>
<li>
<strong>Grid</strong> : place-items-center는 수직 및 수평 모두 중앙에 배치하는 트릭을 수행합니다.
</li>
</ul>

<pre class="brush:php;toolbar:false"><div>




<hr>

<p><strong>6. 문제 해결 팁: Flex 및 Grid가 다른 화면에서 오작동하는 경우</strong></p>

<ul>
<li>
<strong>그리드 또는 유연한 접근 방식 고수</strong> : 너무 많이 혼합하면 예상치 못한 결과가 발생할 수 있습니다.</li>
<li>
<strong>반응형 클래스 사용</strong> : Tailwind의 반응형 유틸리티(sm:, md:, lg:)는 레이아웃을 적절하게 적용하는 데 도움이 됩니다.</li>
<li>
<strong>오버플로 수정</strong>: Overflow-hidden 또는 Overflow-auto와 같은 클래스를 통해 콘텐츠를 점검할 수 있습니다.</li>
</ul>


<hr>

<p><strong>최종 생각: 평온함을 유지하고 순풍을 일으키세요?</strong> 프런트엔드 레이아웃의 특이한 점은 프로세스의 일부이지 적이 아니라는 점을 기억하세요. Tailwind의 유틸리티 클래스와 몇 가지 위치 지정 요령을 사용하면 가장 까다로운 레이아웃도 전문가처럼 처리할 수 있습니다. 상황이 옆으로 가면? 숨을 쉬고 양쪽 정렬 센터를 추가하고 기억하세요: 이것이 가능합니다.</p>


          </div>