본문 바로가기

Web/CSS

tailwind 의 display (inline, inline-block, block, float)

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