이전까지 세로의 배치를 했다면 이제 가로배치의 핵심 플롯(float)을 알아보자.
사실 세로로 배치하는건 쉽고 간단하지만 항상 문제가 되는것이 바로 가로 정렬이다.

 

플롯(float)은 [부유하다], [떠있다] 라는 의미를 지니고 있다.
기본적으로 테이블을 사용하지 않고 마크업을하면 아래로 쭉~나열되는데
원하는 부분을 띄워서 오른쪽에 배치하거나 띄워서 왼쪽에 배치하거나...

이런식으로 가로로 연결하여 배치해 나가는 것이다.


이 플롯의 개념만 정확히 이해하고 사용할 수 있어도 웹표준코딩의 기본 레이아웃을 어느정도 잡을수 있다.
물론 테이블을 사용해버리면 쉽겠으나 테이블로 레이아웃을 잡는건 웹표준과 웹접근성의

권장사항에 어긋나므로...

 

 

어쨌든 이 플롯을 확실히 이해하기 위해서는 앞전의 블럭박스(Block box), 인라인박스(Inline box), 라인박스(Line box)의 개념을 정확히 알고 성질을 파악해야 한다.

 

블럭박스(Block box), 인라인박스(Inline box), 라인박스(Line box) 보러가기

 


이러한 블럭박스나 인라인박스에 float를 주면 플롯박스라는 다른 성질로 변하면서

기존 고유의 성질이 바뀌어 버린다.
예를들어 한칸을 다 차지해야 직성이 풀리는 성질인 블럭박스가

float을 줌과 동시에 플롯박스 성질로 변하여 부분으로 들어가 다른것과 함께 배치될 수 있는것이다.

 


일단 이론적인 플롯의 사용법은 간단하다.

 

띄워서 왼쪽으로 배치

float:left;


띄워서 오른쪽으로 배치
float:right;

left 나 right 말고도 none 이나 inherit 가 있으나 많이 사용하지 않으므로 일단 패스.

 

 

 

자, 그럼 플롯이 실제 어떻게 사용되는지를 보자.

 

이미지와 나열된 글이 있고 이미지에 float:left를 줘서 이미지 우측에 글을 배치시키려고 한다.
이때 이 이미지가 어떻게 떠서 이동하는지 눈에는 보이지 않지만 아주 천천히 그 경로를 보자면 아래와 같다.

 

 

1.이미지가 공중으로 뜬다.
2.문장이 이미지 밑으로 들어간다.
3.문장의 블럭박스는 그대로 있는 상태에서 텍스트들을 감싼 라인박스만 이미지영역만큼 우측으로 밀려난다.
(만일 이를 직접 확인하기 위해 p에(블럭박스) 실제로 border를 넣어보면 이미지 밑에부터 테두리가 쳐진다.)

 

 

 

 

 

위에서는 이해를 돕기위해 중간부터 테두리를 넣었지만

테두리를 치지 않더라도 보이지 않는 가상의 선들이 위와같이 존재한다고 생각하면 된다.

 

실제로 문장부분에 테두리가 필요해 p에 스타일을 준다면 당연히 테두리는 이미지 아래까지 기어들어갈 것이고,
p에 문장의 가로값을 지정하려 width값을 주었는데

들어가있는 이미지 크기보다 width값이 작다면 p안에 들어있는 텍스트는 이미지 밑으로 다시 밀려난다.

 

float은 옆으로 배치하는거라고 했고 분명 float을 사용했는데 왜 옆으로 배치되지 않는 것인지...

테두리가 어째서 내 의도대로 안쳐지는지...
위의 개념을 확실히 알고있지 않으면 도대체 왜? 이런 현상이 벌어지는지 자체를 알 수 없는것이다.


블럭요소 p는 가로값을 주지않으면 항상 100를 차지한다.
때문에 이미지 옆으로 밀려나있는 라인박스 때문에 글들이 이미지 옆에서 나오다가 이미지가 끝나는 순간
다시 전체영역인 블럭박스로 돌아가 이미지 아래쪽으로 글이 흘러내리는 것이다.
이는 이미지를 상단 우측이나 좌측에 글과 함께 배치시킨 네이버 뉴스글 같은데서 볼 수 있다.

 

 

 

 

실전

 

아래는 이미지대신 200x200 사이즈의 박스하나를 만들고 빨간테두리를 친 후 클래스네임 photo로 지정해 float:left 를,문장에는 파란 테두리를 치고 가로값 500픽셀을 주었다.

 

 

 

 

 

 

그럼 결과는 아래와 같은 모습이 된다.

분명 문장에 테두리를 주어도 이미지 아래까지 들어가 있는걸 알 수 있다.

이 때, 가로값 500px은 이미지를 포함한 파란테두리 값이다.

 

 

 

 

 

글이 길어지면 물론 빨간 박스 아래까지 내려가고,

 

 

 

 

 

문장 <p>의 width값만 500에서 150px로 바꾼다면 이미지200px보다 작기 때문에 아래로 내려간다.

 

 

 

 

그럼 글이 길어져도 이미지 아래의 영역을 침범하지 않고 이미지 옆쪽으로 나란히 나오게 하려면 어떻게 해야할까?

 

간단하다.
글에도 같이 float을 주어 함께 띄우면 된다.

(이건 다음 포스팅에서 좀 더 자세히 설명하겠음)

 

[웹표준코딩 가로배치의 핵심] 떠서 이동하는 float의 이해② by S

 

 

 

 
 
 
 

 

Posted by 두여자 Y&S

댓글을 달아 주세요

  1. 비밀댓글입니다

    2013.06.21 17:16 [ ADDR : EDIT/ DEL : REPLY ]
    • 설명이 잘되어 있다면 제가 배운 선생님이 강의를 잘 해주셨다는거겠죠^^
      전 최대한 정리해서 초보들도 알아보기 쉽게 옮겨놨을뿐 ㅎㅎ

      갑자기 웹표준 하시려면 힘들겠네요.
      열심히하세요~
      고생해서 끝내고나면 자신에게 그만큼 많이 도움될거라 생각합니다.^^

      2013.06.22 11:56 신고 [ ADDR : EDIT/ DEL ]
  2. 나그네

    이제 막 기초 책으로 떼운상태에서
    float이 정확하게 이해가 안가서 보고있는데,
    진짜 도움많이됩니다.
    감사합니다~

    2013.09.20 19:01 [ ADDR : EDIT/ DEL : REPLY ]
    • 네 저도 배울때 float이 개념잡기 어렵드라구요.
      도움되셨다니 다행이네요~^^

      2013.09.22 23:37 신고 [ ADDR : EDIT/ DEL ]
  3. 헤븡

    잘 봤어요~
    감사한 마음으로 작게나마 광고라도 클릭 열심히 하고 가요! :)

    2013.11.18 11:54 [ ADDR : EDIT/ DEL : REPLY ]
  4. simplymango

    우와 이렇게 이해하기 쉽고 자세하게 설명해서 ㅠㅠ참좋네요 !!!!!!!!!!!!!!!!!
    감사합니다

    2013.12.05 02:33 [ ADDR : EDIT/ DEL : REPLY ]
  5. 비밀댓글입니다

    2015.01.15 17:34 [ ADDR : EDIT/ DEL : REPLY ]
    • 본문에 작성해서 사이드에 떠있는 배너를 만든다는게 무슨말씀이신지 잘 모르겠네요;;
      티스토리 블로그를 기준으로 말씀하신건가요?
      티스토리 본문글에서 사이드에 떠있는 배너를 넣는건 불가능합니다.
      엄연히 영역이 다르거든요..
      부모박스안에 자식박스가 있다 생각하시면 자식안에서 무슨짓을해도 부모에게 영향을 미치지 못하는것과 같은 이치입니다.

      2015.01.16 20:59 신고 [ ADDR : EDIT/ DEL ]