CSS 왕초보 탈출하기 05 - float 속성 (1/3) what the....f..

CSS 왕초보 탈출하기 05 - float 속성 (1/3) what the....f..

 

float 속성이란 무엇일까?

사전적 의미로 띄우다. 부유하다. 라는 의미를 가지고 있다. 

 

float: left

해당 요소를 좌측으로 띄운다.

 

float: right

해당 요소를 오른쪽으로 띄운다.

 

float: none

해당요소를 float 적용을 해제한다.

 

float: inherit

부모요소에서 상속 받는다.

 

 

띄운다는게 뭐야???

이미지를 어떻게 띄워서 택스트와 함께 배치할 것인가?

---

위와같은 글자로 가득한P태그가 있다. 이 사이에 신문처럼, 매거진처럼, 좌측 또는 우측에 이미지를 넣고 싶다.

 

문단 시작 전의 div에 float left를 적용한 모습. float:right는 따로 연습해보시라.

 

그럼P태그 내부 택스트 중간에 float요소가 위치하면 어떻게 될까???

 

 

이렇게 p태그 내부의 텍스트 중간에도 삽입이 가능하다. div-img클레스가 들어간 위치 직전의 택스트와, 직후의 택스트를 보면 float요소가 어디서 시작하는지 알 수 있다.

 

 

신문같은 거 보면, 우측이나 좌측에 그림이 있고 그 옆에 텍스트들이 이미지 옆으로 있는데 그걸 생각하면 쉽다.

(애초에 그걸 위해 나온 속성이기도 함)

 

약간 예쁘게 만들어볼까?

 

플룻요소의 마진을 활용하여 간격을 맞춘 모습.

 

 

 

 

---

다음시간에는

 

float속성을 레이아웃에서 이용해보는 방법을 알아보자.