html css float 이번 글에서는 레이아웃을 조절할 때 많이 사용하는 기능 중의 하나인 float에 대해서 알아보겠습니다. 단어의 뜻에서 알 수 있듯이 어딘가 위에 떠 있다는 의미인데요. 이 속성을 이용하면 레이아웃의 배치가 바뀌게 되면 함께 위치가 바뀌게 돼서, 고정되어 있는 것들과는 구분됩니다. 어떤 요소를 문서의 오른쪽이나 왼쪽에 떠 있게 하는 건데요. 이때 해당 요소에 postion 속성을 적용 했다면 absolute를 사용하면 안됩니다. css position 속성에 대해서 좀 더 알고 싶으시면 아래 글 참고 하시면 됩니다.
http://godvow.tistory.com/39 ◀◀ [css postion 속성]
■ float 속성을 적용하기 위해서는 스타일에서 [float : left 또는 right]을 입력해주면 되거든요. 글로 설명하는 것보다 이미지를 이용해서 예제를 만들어 보겠습니다.
■ 이미지를 한 장 넣었구요. 이 그림과 텍스트들이 float 속성에 따라서 어떻게 바뀌는지 확인해보려고 텍스트를 넉넉하게 입력했습니다.
■ 기본 속성은 float : none 이기 때문에 이미지와 텍스트가 순서대로 출력되는데요. 이제 이미지에 float 속성을 주겠습니다.
■ 스타일에서 이미지 속성에 float : left 값을 넣었습니다. 이미지가 왼쪽으로 떠 있게 되는데요. 아래 그림에서 확인해볼게요.
■ float 속성이 어떤 기능을 하는지 알겠죠? 그럼 반대로 [float : right]를 입력해서 결과를 보고 마무리하겠습니다.
■ float 값을 right로 설정했으니까 당연히 그림이 오른쪽으로 떠 있게 되겠죠?
■이렇게 해서 html css에서 float의 속성에 대해서 알아봤습니다. 수고하셨습니다.
