728x90
note1)
display: inline, : 부분적으로 다음줄로 wrap 이 가능하다
display: inline-block : 부분적으로 wrap 이 되지 않고, 통째로 다음 line 으로 wrap 이 된다.
display: block : element 전제가 그 line 전체를 차지한다.
<div>
When controlling the flow of text, using the CSS property
<span className="inline bg-sky-500">display: inline</span>
will cause the text inside the element to wrap normally.
While using the property <span className="inline-block bg-sky-500">display: inline-block</span>
will wrap the element to prevent the text inside from extending beyond its parent.
Lastly, using the property <span className="block bg-sky-500">display: block</span>
will put the element on its own line and fill its parent.
</div>
</div>
inline 된 element 가 wrap 되는 것을 보여주고 있다
note2) float-left : position element on the left
float-right : position element on the right
<div className="h-screen text-white Parent bg-slate-900">
<div className="container px-2" >
<img className="float-left w-64"
src="https://images.unsplash.com/photo-1691966103673-2d7056b71c90?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyfHx8ZW58MHx8fHx8&auto=format&fit=crop&w=600&q=60"
alt=""
/>
<img className="float-right w-32"
src="https://images.unsplash.com/photo-1691966103673-2d7056b71c90?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyfHx8ZW58MHx8fHx8&auto=format&fit=crop&w=600&q=60"
alt=""
/>
<p className="clea-none">1 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo culpa porro rem hic, deserunt commodi aliquid? Illo repellat quis harum voluptatum accusantium cupiditate natus, pariatur hic quia,
voluptatibus blanditiis eligendi.</p>
<p>2 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo culpa porro rem hic, deserunt commodi aliquid? Illo repellat quis harum voluptatum accusantium cupiditate natus, pariatur hic quia,
voluptatibus blanditiis eligendi.</p>
<p>3 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo culpa porro rem hic, deserunt commodi aliquid? Illo repellat quis harum voluptatum accusantium cupiditate natus, pariatur hic quia,
voluptatibus blanditiis eligendi.</p>
<p>4 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo culpa porro rem hic, deserunt commodi aliquid? Illo repellat quis harum voluptatum accusantium cupiditate natus, pariatur hic quia,
voluptatibus blanditiis eligendi.</p>
<p>5 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo culpa porro rem hic, deserunt commodi aliquid? Illo repellat quis harum voluptatum accusantium cupiditate natus, pariatur hic quia,
voluptatibus blanditiis eligendi.</p>
<p>6 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo culpa porro rem hic, deserunt commodi aliquid? Illo repellat quis harum voluptatum accusantium cupiditate natus, pariatur hic quia,
voluptatibus blanditiis eligendi.</p>
<p>7 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo culpa porro rem hic, deserunt commodi aliquid? Illo repellat quis harum voluptatum accusantium cupiditate natus, pariatur hic quia,
voluptatibus blanditiis eligendi.</p>
<p>8 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo culpa porro rem hic, deserunt commodi aliquid? Illo repellat quis harum voluptatum accusantium cupiditate natus, pariatur hic quia,
voluptatibus blanditiis eligendi.</p>
<p>9 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo culpa porro rem hic, deserunt commodi aliquid? Illo repellat quis harum voluptatum accusantium cupiditate natus, pariatur hic quia,
voluptatibus blanditiis eligendi.</p>
<p>10 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo culpa porro rem hic, deserunt commodi aliquid? Illo repellat quis harum voluptatum accusantium cupiditate natus, pariatur hic quia,
voluptatibus blanditiis eligendi.</p>
<p>11 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo culpa porro rem hic, deserunt commodi aliquid? Illo repellat quis harum voluptatum accusantium cupiditate natus, pariatur hic quia,
voluptatibus blanditiis eligendi.</p>
<p>12 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo culpa porro rem hic, deserunt commodi aliquid? Illo repellat quis harum voluptatum accusantium cupiditate natus, pariatur hic quia,
voluptatibus blanditiis eligendi.</p>
</div>
</div>아래 left, right 로 image가 position 되고 있는 것을 볼 수 있다.
note3) clear-both : position an element below all preceding floated elements.
<div className="h-screen text-white Parent bg-slate-900">
<div className="container px-2" >
<img className="float-left w-64"
src="https://images.unsplash.com/photo-1691966103673-2d7056b71c90?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyfHx8ZW58MHx8fHx8&auto=format&fit=crop&w=600&q=60"
alt=""
/>
<img className="float-right w-32"
src="https://images.unsplash.com/photo-1691966103673-2d7056b71c90?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyfHx8ZW58MHx8fHx8&auto=format&fit=crop&w=600&q=60"
alt=""
/>
<p className="clear-both">1 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo culpa porro rem hic, deserunt commodi aliquid? Illo repellat quis harum voluptatum accusantium cupiditate natus, pariatur hic quia,
voluptatibus blanditiis eligendi.</p>
<p>2 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo culpa porro rem hic, deserunt commodi aliquid? Illo repellat quis harum voluptatum accusantium cupiditate natus, pariatur hic quia,
voluptatibus blanditiis eligendi.</p>
<p>3 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo culpa porro rem hic, deserunt commodi aliquid? Illo repellat quis harum voluptatum accusantium cupiditate natus, pariatur hic quia,
voluptatibus blanditiis eligendi.</p>
<p>4 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo culpa porro rem hic, deserunt commodi aliquid? Illo repellat quis harum voluptatum accusantium cupiditate natus, pariatur hic quia,
voluptatibus blanditiis eligendi.</p>
<p>5 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo culpa porro rem hic, deserunt commodi aliquid? Illo repellat quis harum voluptatum accusantium cupiditate natus, pariatur hic quia,
voluptatibus blanditiis eligendi.</p>
<p>6 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo culpa porro rem hic, deserunt commodi aliquid? Illo repellat quis harum voluptatum accusantium cupiditate natus, pariatur hic quia,
voluptatibus blanditiis eligendi.</p>
<p>7 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo culpa porro rem hic, deserunt commodi aliquid? Illo repellat quis harum voluptatum accusantium cupiditate natus, pariatur hic quia,
voluptatibus blanditiis eligendi.</p>
<p>8 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo culpa porro rem hic, deserunt commodi aliquid? Illo repellat quis harum voluptatum accusantium cupiditate natus, pariatur hic quia,
voluptatibus blanditiis eligendi.</p>
<p>9 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo culpa porro rem hic, deserunt commodi aliquid? Illo repellat quis harum voluptatum accusantium cupiditate natus, pariatur hic quia,
voluptatibus blanditiis eligendi.</p>
<p>10 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo culpa porro rem hic, deserunt commodi aliquid? Illo repellat quis harum voluptatum accusantium cupiditate natus, pariatur hic quia,
voluptatibus blanditiis eligendi.</p>
<p>11 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo culpa porro rem hic, deserunt commodi aliquid? Illo repellat quis harum voluptatum accusantium cupiditate natus, pariatur hic quia,
voluptatibus blanditiis eligendi.</p>
<p>12 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo culpa porro rem hic, deserunt commodi aliquid? Illo repellat quis harum voluptatum accusantium cupiditate natus, pariatur hic quia,
voluptatibus blanditiis eligendi.</p>
</div>
</div>clear-both 된 element 는 이전에 floating 된 element 이후에 표시되는 것을 볼 수 있다.
note4) clear-right : position an element below any preceding right-floated elements.
<div className="h-screen text-white Parent bg-slate-900">
<div className="container px-2" >
<img className="float-left w-64"
src="https://images.unsplash.com/photo-1691966103673-2d7056b71c90?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyfHx8ZW58MHx8fHx8&auto=format&fit=crop&w=600&q=60"
alt=""
/>
<img className="float-right w-32"
src="https://images.unsplash.com/photo-1691966103673-2d7056b71c90?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyfHx8ZW58MHx8fHx8&auto=format&fit=crop&w=600&q=60"
alt=""
/>
<p className="clear-right">1 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo culpa porro rem hic, deserunt commodi aliquid? Illo repellat quis harum voluptatum accusantium cupiditate natus, pariatur hic quia,
voluptatibus blanditiis eligendi.</p>
<p>2 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo culpa porro rem hic, deserunt commodi aliquid? Illo repellat quis harum voluptatum accusantium cupiditate natus, pariatur hic quia,
voluptatibus blanditiis eligendi.</p>
<p>3 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo culpa porro rem hic, deserunt commodi aliquid? Illo repellat quis harum voluptatum accusantium cupiditate natus, pariatur hic quia,
voluptatibus blanditiis eligendi.</p>
<p>4 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo culpa porro rem hic, deserunt commodi aliquid? Illo repellat quis harum voluptatum accusantium cupiditate natus, pariatur hic quia,
voluptatibus blanditiis eligendi.</p>
<p>5 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo culpa porro rem hic, deserunt commodi aliquid? Illo repellat quis harum voluptatum accusantium cupiditate natus, pariatur hic quia,
voluptatibus blanditiis eligendi.</p>
<p>6 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo culpa porro rem hic, deserunt commodi aliquid? Illo repellat quis harum voluptatum accusantium cupiditate natus, pariatur hic quia,
voluptatibus blanditiis eligendi.</p>
<p>7 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo culpa porro rem hic, deserunt commodi aliquid? Illo repellat quis harum voluptatum accusantium cupiditate natus, pariatur hic quia,
voluptatibus blanditiis eligendi.</p>
<p>8 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo culpa porro rem hic, deserunt commodi aliquid? Illo repellat quis harum voluptatum accusantium cupiditate natus, pariatur hic quia,
voluptatibus blanditiis eligendi.</p>
<p>9 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo culpa porro rem hic, deserunt commodi aliquid? Illo repellat quis harum voluptatum accusantium cupiditate natus, pariatur hic quia,
voluptatibus blanditiis eligendi.</p>
<p>10 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo culpa porro rem hic, deserunt commodi aliquid? Illo repellat quis harum voluptatum accusantium cupiditate natus, pariatur hic quia,
voluptatibus blanditiis eligendi.</p>
<p>11 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo culpa porro rem hic, deserunt commodi aliquid? Illo repellat quis harum voluptatum accusantium cupiditate natus, pariatur hic quia,
voluptatibus blanditiis eligendi.</p>
<p>12 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo culpa porro rem hic, deserunt commodi aliquid? Illo repellat quis harum voluptatum accusantium cupiditate natus, pariatur hic quia,
voluptatibus blanditiis eligendi.</p>
</div>
</div>
clear-right된 element 는 이전에 right floating 된 element 이후에 표시되는 것을 볼 수 있다.
note5) clear-left : position an element below any preceding left-floated elements.
<div className="h-screen text-white Parent bg-slate-900">
<div className="container px-2" >
<img className="float-left w-64"
src="https://images.unsplash.com/photo-1691966103673-2d7056b71c90?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyfHx8ZW58MHx8fHx8&auto=format&fit=crop&w=600&q=60"
alt=""
/>
<img className="float-right w-32"
src="https://images.unsplash.com/photo-1691966103673-2d7056b71c90?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyfHx8ZW58MHx8fHx8&auto=format&fit=crop&w=600&q=60"
alt=""
/>
<p className="clear-left">1 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo culpa porro rem hic, deserunt commodi aliquid? Illo repellat quis harum voluptatum accusantium cupiditate natus, pariatur hic quia,
voluptatibus blanditiis eligendi.</p>
<p>2 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo culpa porro rem hic, deserunt commodi aliquid? Illo repellat quis harum voluptatum accusantium cupiditate natus, pariatur hic quia,
voluptatibus blanditiis eligendi.</p>
<p>3 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo culpa porro rem hic, deserunt commodi aliquid? Illo repellat quis harum voluptatum accusantium cupiditate natus, pariatur hic quia,
voluptatibus blanditiis eligendi.</p>
<p>4 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo culpa porro rem hic, deserunt commodi aliquid? Illo repellat quis harum voluptatum accusantium cupiditate natus, pariatur hic quia,
voluptatibus blanditiis eligendi.</p>
<p>5 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo culpa porro rem hic, deserunt commodi aliquid? Illo repellat quis harum voluptatum accusantium cupiditate natus, pariatur hic quia,
voluptatibus blanditiis eligendi.</p>
<p>6 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo culpa porro rem hic, deserunt commodi aliquid? Illo repellat quis harum voluptatum accusantium cupiditate natus, pariatur hic quia,
voluptatibus blanditiis eligendi.</p>
<p>7 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo culpa porro rem hic, deserunt commodi aliquid? Illo repellat quis harum voluptatum accusantium cupiditate natus, pariatur hic quia,
voluptatibus blanditiis eligendi.</p>
<p>8 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo culpa porro rem hic, deserunt commodi aliquid? Illo repellat quis harum voluptatum accusantium cupiditate natus, pariatur hic quia,
voluptatibus blanditiis eligendi.</p>
<p>9 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo culpa porro rem hic, deserunt commodi aliquid? Illo repellat quis harum voluptatum accusantium cupiditate natus, pariatur hic quia,
voluptatibus blanditiis eligendi.</p>
<p>10 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo culpa porro rem hic, deserunt commodi aliquid? Illo repellat quis harum voluptatum accusantium cupiditate natus, pariatur hic quia,
voluptatibus blanditiis eligendi.</p>
<p>11 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo culpa porro rem hic, deserunt commodi aliquid? Illo repellat quis harum voluptatum accusantium cupiditate natus, pariatur hic quia,
voluptatibus blanditiis eligendi.</p>
<p>12 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo culpa porro rem hic, deserunt commodi aliquid? Illo repellat quis harum voluptatum accusantium cupiditate natus, pariatur hic quia,
voluptatibus blanditiis eligendi.</p>
</div>
</div>
clear-left 된 element 는 이전에 left floating된 element 이후에 표시되는 것을 볼 수 있다.
note6) clear-none : reset any clears that are applied to an element.
<div className="h-screen text-white Parent bg-slate-900">
<div className="container px-2" >
<img className="float-left w-64"
src="https://images.unsplash.com/photo-1691966103673-2d7056b71c90?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyfHx8ZW58MHx8fHx8&auto=format&fit=crop&w=600&q=60"
alt=""
/>
<img className="float-right w-32"
src="https://images.unsplash.com/photo-1691966103673-2d7056b71c90?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyfHx8ZW58MHx8fHx8&auto=format&fit=crop&w=600&q=60"
alt=""
/>
<p className="clear-none">1 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo culpa porro rem hic, deserunt commodi aliquid? Illo repellat quis harum voluptatum accusantium cupiditate natus, pariatur hic quia,
voluptatibus blanditiis eligendi.</p>
<p>2 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo culpa porro rem hic, deserunt commodi aliquid? Illo repellat quis harum voluptatum accusantium cupiditate natus, pariatur hic quia,
voluptatibus blanditiis eligendi.</p>
<p>3 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo culpa porro rem hic, deserunt commodi aliquid? Illo repellat quis harum voluptatum accusantium cupiditate natus, pariatur hic quia,
voluptatibus blanditiis eligendi.</p>
<p>4 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo culpa porro rem hic, deserunt commodi aliquid? Illo repellat quis harum voluptatum accusantium cupiditate natus, pariatur hic quia,
voluptatibus blanditiis eligendi.</p>
<p>5 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo culpa porro rem hic, deserunt commodi aliquid? Illo repellat quis harum voluptatum accusantium cupiditate natus, pariatur hic quia,
voluptatibus blanditiis eligendi.</p>
<p>6 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo culpa porro rem hic, deserunt commodi aliquid? Illo repellat quis harum voluptatum accusantium cupiditate natus, pariatur hic quia,
voluptatibus blanditiis eligendi.</p>
<p>7 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo culpa porro rem hic, deserunt commodi aliquid? Illo repellat quis harum voluptatum accusantium cupiditate natus, pariatur hic quia,
voluptatibus blanditiis eligendi.</p>
<p>8 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo culpa porro rem hic, deserunt commodi aliquid? Illo repellat quis harum voluptatum accusantium cupiditate natus, pariatur hic quia,
voluptatibus blanditiis eligendi.</p>
<p>9 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo culpa porro rem hic, deserunt commodi aliquid? Illo repellat quis harum voluptatum accusantium cupiditate natus, pariatur hic quia,
voluptatibus blanditiis eligendi.</p>
<p>10 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo culpa porro rem hic, deserunt commodi aliquid? Illo repellat quis harum voluptatum accusantium cupiditate natus, pariatur hic quia,
voluptatibus blanditiis eligendi.</p>
<p>11 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo culpa porro rem hic, deserunt commodi aliquid? Illo repellat quis harum voluptatum accusantium cupiditate natus, pariatur hic quia,
voluptatibus blanditiis eligendi.</p>
<p>12 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo culpa porro rem hic, deserunt commodi aliquid? Illo repellat quis harum voluptatum accusantium cupiditate natus, pariatur hic quia,
voluptatibus blanditiis eligendi.</p>
</div>
</div>
'Web > CSS' 카테고리의 다른 글
| tailwind 의 layout w/ flex (2/2) (0) | 2023.10.09 |
|---|---|
| tailwind 의 layout w/ grid (0) | 2023.10.07 |
| tailwind 의 layout w/ Container (0) | 2023.09.03 |
| tailwind 의 layout w/ flex (1/2) (0) | 2023.09.03 |
| tailwind 의 layout w/ grid(inc setup) (0) | 2023.09.03 |
