레이아웃
요소 주위의 콘텐츠 래핑을 제어하는 유틸리티입니다.
Class | Styles |
---|---|
clear-left | clear: left; |
clear-right | clear: right; |
clear-both | clear: both; |
clear-start | clear: inline-start; |
clear-end | clear: inline-end; |
clear-none | clear: none; |
clear-left
유틸리티를 사용하여 앞서 왼쪽으로 플로팅된 엘리먼트 아래에 엘리먼트를 배치할 수 있습니다:
아마도 우리 같은 사람들은 도서관 없이도 살 수 있을지 모릅니다. 어쩌면요. 물론, 우리는 세상을 바꾸기에는 너무 늙었지만, 지금 바로 지역 도서관 지점에서 책을 펼치고 있는 그 아이는 어떨까요? 고양이와 다섯 중국 형제 그림에 오줌과 똥 그림이 그려져 있는 걸 발견한다면요? 그 아이는 더 나은 것을 받을 자격이 있지 않을까요? 보세요, 이게 연체료와 분실된 책에 관한 문제라고 생각한다면 다시 생각해 보세요. 이건 그 아이가 마음이 뒤틀리지 않고 책을 읽을 권리에 관한 문제입니다! 아니면, 어쩌면 그게 당신을 흥분시키는 걸지도 모르죠, 세인펠드. 어쩌면 그게 당신이 즐기는 방식일지도요. 당신과 당신의 좋은 친구들 말이에요.
<article> <img class="float-left ..." src="/img/snow-mountains.jpg" /> <img class="float-right ..." src="/img/green-mountains.jpg" /> <p class="clear-left ...">아마도 우리는 도서관 없이도 살 수 있을지 모릅니다...</p></article>
clear-right
유틸리티를 사용하면 요소를 앞서 오른쪽으로 플로팅된 요소들 아래에 배치할 수 있습니다.
아마도 우리 같은 사람들은 도서관 없이도 살 수 있을지 모릅니다. 어쩌면요. 물론, 우리는 세상을 바꾸기에는 너무 늙었지만, 지금 이 순간 지역 도서관에서 책을 펼치고 있는 그 아이는 어떨까요? 그 아이가 '고양이와 모자'나 '다섯 중국 형제' 책에서 오줌과 똥 그림을 발견한다면, 그 아이는 더 나은 것을 받을 자격이 있지 않을까요? 이건 연체료나 잃어버린 책에 관한 문제가 아닙니다. 이건 그 아이가 마음이 왜곡되지 않고 책을 읽을 권리에 관한 문제입니다. 아니면, 어쩌면 당신은 이런 게 재미있을지도 모르죠, 세인펠드. 어쩌면 당신과 당신의 친구들은 이런 걸로 즐거움을 느끼는 걸지도요.
<article> <img class="float-left ..." src="/img/green-mountains.jpg" /> <img class="float-right ..." src="/img/snow-mountains.jpg" /> <p class="clear-right ...">아마도 우리는 도서관 없이도 살 수 있을지 모릅니다...</p></article>
clear-both
유틸리티를 사용하면 앞서 플로팅된 모든 엘리먼트 아래에 엘리먼트를 배치할 수 있습니다:
Maybe we can live without libraries, people like you and me. Maybe. Sure, we're too old to change the world, but what about that kid, sitting down, opening a book, right now, in a branch at the local library and finding drawings of pee-pees and wee-wees on the Cat in the Hat and the Five Chinese Brothers? Doesn't HE deserve better? Look. If you think this is about overdue fines and missing books, you'd better think again. This is about that kid's right to read a book without getting his mind warped! Or: maybe that turns you on, Seinfeld; maybe that's how y'get your kicks. You and your good-time buddies.
<article> <img class="float-left ..." src="/img/snow-mountains.jpg" /> <img class="float-right ..." src="/img/green-mountains.jpg" /> <p class="clear-both ...">Maybe we can live without libraries...</p></article>
텍스트 방향에 따라 왼쪽 또는 오른쪽에 매핑되는 논리적 속성을 사용하는 clear-start
와 clear-end
유틸리티를 활용하세요:
ربما يمكننا العيش بدون مكتبات، أشخاص مثلي ومثلك. ربما. بالتأكيد، نحن أكبر من أن نغير العالم، ولكن ماذا عن ذلك الطفل الذي يجلس ويفتح كتابًا الآن في أحد فروع المكتبة المحلية ويجد رسومات للتبول والبول على القطة في القبعة والإخوة الصينيون الخمسة؟ ألا يستحق الأفضل؟ ينظر. إذا كنت تعتقد أن الأمر يتعلق بالغرامات المتأخرة والكتب المفقودة، فمن الأفضل أن تفكر مرة أخرى. يتعلق الأمر بحق ذلك الطفل في قراءة كتاب دون أن يتشوه عقله! أو: ربما يثيرك هذا يا سينفيلد؛ ربما هذه هي الطريقة التي تحصل بها على ركلاتك. أنت ورفاقك الطيبين.
<article dir="rtl"> <img class="float-left ..." src="/img/green-mountains.jpg" /> <img class="float-right ..." src="/img/green-mountains.jpg" /> <p class="clear-end ...">...ربما يمكننا العيش بدون مكتبات،</p></article>
엘리먼트에 적용된 클리어를 초기화하려면 clear-none
유틸리티를 사용하세요:
아마도 우리는 도서관 없이도 살 수 있을지 모릅니다. 여러분과 같은 사람들 말이죠. 아마도요. 물론, 우리는 세상을 바꾸기에는 너무 늙었지만, 지금 이 순간 지역 도서관에서 책을 펼치고 있는 그 아이는 어떨까요? '고양이와 모자'나 '다섯 중국 형제'에 그려진 오줌과 똥 그림을 보면서 말이죠. 그 아이는 더 나은 것을 받을 자격이 있지 않을까요? 보세요. 만약 여러분이 이것이 연체료나 분실된 책에 관한 문제라고 생각한다면, 다시 생각해보세요. 이것은 그 아이가 마음이 왜곡되지 않고 책을 읽을 권리에 관한 문제입니다. 아니면, 어쩌면 이것이 여러분을 흥분시키는 것일 수도 있죠, 세인펠드. 어쩌면 이것이 여러분이 즐기는 방식일지도 모릅니다. 여러분과 여러분의 좋은 친구들 말이죠.
<article> <img class="float-left ..." src="/img/green-mountains.jpg" /> <img class="float-right ..." src="/img/snow-mountains.jpg" /> <p class="clear-none ...">아마도 우리는 도서관 없이도 살 수 있을지 모릅니다...</p></article>
접두사 a clear
유틸리티 를 md:
와 같은 브레이크포인트 변형과 함께 사용하면 medium 화면 크기 이상에서만 유틸리티가 적용됩니다:
<p class="clear-left md:clear-none ..."> <!-- ... --></p>
변형 사용에 대해 더 알아보려면 변형 문서를 참고하세요.