Web/CSS
tailwind 의 layout w/ Container
HobbyCoding
2023. 9. 3. 09:49
728x90
note1) columns-2 은 vertical 로 우선 채우고 다음 column 으로 넘어간다.
<div className="h-screen text-white Parent bg-slate-900">
<div className="columns-2">
<p>Well, let me tell you something, ...</p>
<p>Sure, go ahead, laugh...</p>
<p>Maybe we can live without...</p>
<p>Look. If you think this is...</p>
<p>Hear. If you think That is...</p>
</div>
</div>
note2) break-after-column" “ 이 element 를 처리하고 다음 column 으로 가라.
<div className="h-screen text-white Parent bg-slate-900">
<div className="columns-2">
<p>Well,className let me tell you something, ...</p>
<p>Sure, go ahead, laugh...</p>
<p>Maybe we can live without...</p>
<p className="break-after-column">Look. If you think this is...</p>
<p>Hear. If you think That is...</p>
</div>
</div>
note3) className="break-before-column" 인 element 이전 element 까지 표시하고, className="break-before-column" element 부터 새로운 column 에 표시를 한다.
<div className="h-screen text-white Parent bg-slate-900">
<div className="columns-2">
<p>Well,className let me tell you something, ...</p>
<p>Sure, go ahead, laugh...</p>
<p>Maybe we can live without...</p>
<p className="break-before-column">Look. If you think this is...</p>
<p>Hear. If you think That is...</p>
</div>
</div>
Container : container 로 된 <div> 는 media query 에 따른 element width 가 결정이 된다.
note4) media query 에 따라 image 와 <p> 들이 2개의 column 각각의 column 에 표시가 되거나 one column 에 모두 표시가 된다.
<div className="h-screen text-white Parent bg-slate-900">
<div className="container px-2 columns-lg" >
<img
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>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>
note5) relative 한 parent 아래에 absolute top-0 left-0 인 child element 는 parent 기준으로 top left 에 위치하게 된다
<div className="h-screen text-white Parent bg-slate-900">
<div className="container px-2">
<div className="relative bg-red-500 rounded-lg p-8 w-32 h-32">
<div className="absolute top-0 left-0 bg-green-500 rounded-lg w-24 h-24">
</div>
</div>
</div>
</div>green 으로 된 div 가 top left 에 붙어 있는 것을 볼 수 있다.
note6) -top-2 은 위로 2 point 더 올라간다. -left-2 도 왼쪽으로 2 point 더 간다.
<div className="h-screen text-white Parent bg-slate-900">
<div className="container px-2">
<div className="relative bg-red-500 rounded-lg p-8 w-32 h-32">
<div className="absolute -top-2 -left-2 bg-green-500 rounded-lg w-24 h-24">
</div>
</div>
</div>
</div>green div 가 왼쪽 위쪽으로 -2 point 더 shift 된 것을 볼 수 잇다.
note7) inset-2 : x,y 를 동시에 조정하고자 하는 경우 사용함
<div className="h-screen text-white Parent bg-slate-900">
<div className="container px-2">
<div className="relative bg-red-500 rounded-lg p-8 w-32 h-32">
<div className="absolute inset-2 bg-green-500 rounded-lg w-24 h-24">
</div>
</div>
</div>
</div>green div 가 red 기준으로 x,y 방향으로 2 point shift 되어 있다.
