[CSS] 9. Float, 이미지와 텍스트를 한 번에 사용하기

• 참고 : https://developer.mozilla.org/ko/docs/Learn/CSS/CSS_layout/Floats

1. Float는 언제 쓰는가?

---

주로 신문 기사같은 레이아웃. 즉, 사진 옆에 사진과 겹치지 않도록 글을 배치하고 싶을 때 사용한다

text는 float를 피해간다.

<h1>간단한 float 예제</h1>

<div class="box">float</div>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. </p>

<p>Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>

<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>

body {
  width: 90%;
  max-width: 900px;
  margin: 0 auto;
  font: .9em/1.2 Arial, Helvetica, sans-serif
}

.box {
  float: left;
  margin-right: 15px;
  width: 150px;
  height: 100px;
  border-radius: 5px;
  background-color: rgb(207,232,220);
  padding: 1em;
}

출처 : https://developer.mozilla.org/ko/docs/Learn/CSS/CSS_layout/Floats

• float:left를 적용한 경우, margin-right를 통해서 오른쪽 text와 float의 간격을 벌릴 수 있다.

• 첫번째 단락의 <p>태그에 special이라는 클래스를 적용해서 작성해 본다.

• p태그는 본래 자기 크기를 유지하고 있고 단순히 float된 부분만 피해간다.

.special {
  background-color: rgb(79, 185, 227);
  padding: 10px;
  color: #fff;
}

2. Float의 영향을 받고 싶지 않다면

---

clear라는 속성을 사용해서 float의 영향을 막을 수 있다.

• 두번째 단락의 <p>태그에 cleared라는 태그를 적용해서 작성해 본다.

• float:left 이므로, clear:left 로 해야 적용된다. clear:right는 의미 없고 clear:left, clear:right 가 합쳐진 clear:both 명령어를 사용할 수도 있다.

.cleared {
    clear:left;
}

두번째 단락부터 float의 영향없이 아래로 줄바꿈이 된 것을 확인할 수 있다.

Uploaded by N2T