'인라인요소'에 해당되는 글 1

  1. 2009.12.09 CSS : Float
2009. 12. 9. 20:33 | 개발이야기

요즘 하루에 한개씩 글을 발행하게 되네요..^^;
오늘은 어제랑 비슷한거 같지만 다른 Float에 대해서 이야기를 해 볼까 합니다.

Float을 사전에서 찾아보니.. 원래 단어의 의미는 부유하다, 표류하다, 둥둥 떠있는 등의 의미가 나오는데요
Float을 이해하려면 요소들이 배치되는 flow(흐름)을 알고 있어야 합니다.

Flow란 브라우저가 요소들을 페이지에 배치하기 위해 사용하는 것으로,
파일의 가장 위에서 아래로 요소의 흐름을 따라가며 만나는 각각의 요소를 보여주게 됩니다.
보여주는 과정에서 블럭 요소를 고려하면서 각각에 라인 브레이크를 넣어주게 됩니다.

어제의 예제를 보면 position을 주지 않은 제일 첫번째의 결과를 놓고 보면
div요소는 결국 블럭요소이므로 각 요소마다 라인 브레이크를 넣어
각각의 요소가 탑 쌓듯 쌓여있는 모습을 보여주게 되는 것입니다.

블럭요소와는 달리 인라인요소의 경우, flow는 위에서 아래로 쌓이는 형태가 아닌
수평으로 왼쪽에서 오른쪽으로 바짝 붙어 흐른다고 생각하면 됩니다[각주:1] ^^

이러한 흐름중에서 float은 단어의 뜻 그대로 flow 에서 해당 요소를 '띄운다' 라고 보시면 됩니다.

그렇다면 아래의 예제를 통해서 float을 익혀보도록 하겠습니다.

HTML

CSS

위의 예제를 저장해서 보면 다음과 같이 요소들이 배치되는 것을 확인 할 수 있습니다.

<div>나 <h1>, <p>와 같은 블럭 요소들은 아까 말한것처럼 위에서 아래로 흐르고,
일반 글자나 <strong> 과 같은 인라인 요소들은 왼쪽에서 오른쪽으로 흐르는것을 확인 할 수 있습니다.[각주:2]

여기서 #img_area 에다가 다음과 같이 속성을 한번 각각 바꿔보도록 하겠습니다.

float:right

float:left

위 스타일의 적용 결과는 각각 다음과 같습니다.

float:right

float:left


즉, float 속성에 의해 블럭요소가 어느쪽에 떠다니는지를 결정 짓게 되는데요,
브라우저는 일반적인 flow에 따라 요소를 배열 하다가 float으로 떠있는 요소를 만날 때,
해당부분 (왼쪽, 오른쪽)으로 둥둥 떠다니게 밀어 넣습니다.
그리고 해당 요소를 일반적인 flow에서 배제를 하도록 합니다.
그 다음 그 이후에 나오는 요소들을 float 속성이 들어간 요소의 경계를 존중 하면서,
나머지 공간에 기존의 flow대로 흘려 보여주게 됩니다.

기본적인 원리는 flow에서 둥둥 떠 다니는 것이지만,
겹쳐지면 안되기때문에 그 경계는 존중을 해 주는 셈이지요 ^^

이러한 float을 이용하면 상하로 쌓이는 기존의 flow를 좌우로 쌓이게 바꿀 수 있습니다.
다음의 문서를 살펴보도록 하겠습니다.

이 문서를 열어보면 다음과 같이 리스트가 생성이 됩니다.

  • menu 01
  • menu 02
  • menu 03
  • menu 04

li 요소가 블럭요소이기 때문에 각각의 리스트는 상하로 쌓이게 되는데요,
이 것을 다음과 같이 css에서 float을 주게 되면 flow가 바뀌게 됩니다.

  • menu 01
  • menu 02
  • menu 03
  • menu 04


이러한 float과 어제 다룬 position을 잘 이용하면 원하는곳에 요소들을 속속 배치할 수 있게 됩니다.
조금 더 보태서, 뒤에 다룰 박스모델과 함께 이용을 하면 위치잡는데 혼선이 없이 잡아줄수 있습니다 ^^

이번 이야기를 가지고 더이상은 불필요하게 table을 가지고 레이아웃을 짜는 일이 없었으면 합니다 ^^



  1. 일반적으로 텍스트를 넣을때의 경우를 생각하면 상상하기 쉽습니다. 위치를 지정해주지 않은 상태에서 img태그와 일반 문자는 서로 어울리지 못하고 위 아래로 떨어지지만, a태그나 em태그 등의 태그는 계속 오른쪽으로 추가되는 것을 확인 할 수 있습니다. [본문으로]
  2. poem_wrap 블럭은 전체 레이아웃을 위해 잡아두었습니다. [본문으로]

'개발이야기' 카테고리의 다른 글

CSS : Box Model  (0) 2009.12.11
CSS : Float 흐름끊기  (2) 2009.12.10
CSS Position 이야기  (9) 2009.12.08
CSS Sprite 를 이용한 간단한 롤오버 메뉴  (2) 2009.12.07
IE8 다음 지도 API Polyline문제  (9) 2009.11.24