Front End/Tailwind CSS
[Tailwind] Layout Position
닥치고개발
2022. 10. 22. 23:48
728x90
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdn.tailwindcss.com"></script>
<title>TailwindCSS</title>
</head>
<body>
<!-- Positioning -->
<div class="relative w-1/2 h-12 bg-red-200">
<p>Parent Element</p>
<div class="absolute bottom-0 right-0 bg-red-500">
<p>Absolute Child</p>
</div>
</div>
<!-- Top left corner -->
<div class="relative h-32 bg-yellow-100 w-1/2">
<!-- <p>This is body</p> -->
<div class="absolute top-0 left-0 bg-yellow-500 h-16 w-16"></div>
</div>
<!-- Top right corner -->
<div class="relative h-32 bg-yellow-100 w-1/2">
<!-- <p>This is body</p> -->
<div class="absolute top-0 right-0 bg-yellow-500 h-16 w-16"></div>
</div>
<!-- Bottom left corner -->
<div class="relative h-32 bg-yellow-100 w-1/2">
<!-- <p>This is body</p> -->
<div class="absolute bottom-0 left-0 bg-yellow-500 h-16 w-16"></div>
</div>
<!-- Bottom right corner -->
<div class="relative h-32 bg-yellow-100 w-1/2">
<!-- <p>This is body</p> -->
<div class="absolute bottom-0 right-0 bg-yellow-500 h-16 w-16"></div>
</div>
<!-- Span top edge -->
<div class="relative h-32 w-32 bg-yellow-100">
<div class="absolute inset-x-0 top-0 bg-yellow-500 h-16"></div>
</div>
<!-- Span left edge -->
<div class="relative h-32 w-32 bg-yellow-100">
<div class="absolute inset-y-0 left-0 bg-yellow-500 w-16"></div>
</div>
<!-- Span right edge -->
<div class="relative h-32 w-32 bg-yellow-100">
<div class="absolute inset-y-0 right-0 bg-yellow-500 w-16"></div>
</div>
<!-- Span bottom edge -->
<div class="relative h-32 w-32 bg-yellow-100">
<div class="absolute inset-x-0 bottom-0 bg-yellow-500 h-16"></div>
</div>
<!-- Display Classes -->
<!-- inline 엘리먼트를 사용할 때 주의할 점은, width와 height 속성을 지정해도 무시된다는 것입니다. 왜냐하면 해당 태그가 마크업하고 있는 컨텐트의 크기 만큼만 공간을 차지하도록 되어 있기 때문입니다. 또한, margin과 padding 속성은 좌우 간격만 반영이 되고, 상하 간격은 반영이 되지 않습니다. -->
<!-- display 속성이 block으로 지정된 엘리먼트는 전후 줄바꿈이 들어가 다른 엘리먼트들을 다른 줄로 밀어내고 혼자 한 줄을 차지합니다. 대표적인 block 엘리먼트로 <div>이나 <p>, <h1> 태그 등을 들 수 있습니다. -->
<!-- block 엘리먼트는 inline 엘리먼트와 달리 width, height, margin, padding 속성이 모두 반영이 됩니다. -->
<!-- 기본적으로 inline 엘리먼트처럼 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치되지만, block 엘리먼트처럼 width와 height 속성 지정 및 margin과 padding 속성의 상하 간격 지정이 가능합니다. 다시 말해서, 내부적으로는 block 엘리먼트의 규칙을 따르면서 외부적으로 inline 엘리먼트의 규칙을 따르게 되는 것이지요. -->
<div>
Lorem ipsum dolor sit <span class="inline font-bold">inline</span>amet consectetur adipisicing elit.
Facilis <span class="inline-block w-30 font-bold">inline-block</span>excepturi ipsam amet sunt fugit quo enim optio in animi,
porro <span class="block font-bold">block</span>suscipit at repudiandae pariatur reprehenderit
fugiat deserunt <span class="hidden font-bold">hidden</span>officia commodi vero?
</div>
<!-- Z-Index -->
<div class="relative h-36">
<div class="absolute left-10 w-24 h-24 bg-blue-300 z-40">1</div>
<div class="absolute left-20 w-24 h-24 bg-blue-400">2</div>
<div class="absolute left-40 w-24 h-24 bg-blue-500 z-10">3</div>
<div class="absolute left-60 w-24 h-24 bg-blue-600 z-20">4</div>
<div class="absolute left-80 w-24 h-24 bg-blue-700 z-30">5</div>
</div>
<!-- Floats -->
<div class="w-1/2">
<img class="h-48 w-48 float-left m-4" src="https://ichef.bbci.co.uk/news/976/cpsprodpb/17638/production/_124800859_gettyimages-817514614.jpg.webp" alt="">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet ullam dignissimos sed culpa ratione aliquid quisquam neque eaque nisi! Ullam ipsum eaque officiis, possimus suscipit animi repellendus unde excepturi eligendi.
</p>
</div>
</body>
</html>
<!-- Position Classes
static position: static;
fixed position: fixed;
absolute position: absolute;
relative position: relative;
sticky position: sticky;
-->
<!-- Display Classes
block display: block;
inline-block display: inline-block;
inline display: inline;
flex display: flex;
inline-flex display: inline-flex;
table display: table;
grid display: grid;
inline-grid display: inline-grid;
contents display: contents;
list-item display: list-item;
hidden display: none;
-->
<!-- Z-Index
z-0 z-index: 0;
z-10 z-index: 10;
z-20 z-index: 20;
z-30 z-index: 30;
z-40 z-index: 40;
z-50 z-index: 50;
z-auto z-index: auto;
-->
<!-- Float
float-right float: right;
float-left float: left;
float-none float: none;
-->
728x90