Y&S 두 여자의 말랑말랑 생활공감

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

앞에서 이미지 밑으로 흘러내리는 글의 레이아웃을 봤다면

이번에 테이블을 사용한 듯 가로로 나란히 배치되는 레이아웃을 보자.

이미지에 float:left를 써서 왼쪽에 붙게했을때 글은 자연스럽게 이미지 아래로 흐르지만

글이 길어져도 레이아웃을 유지한채 이미지 옆에 배치시키면서 테두리를 둘러야할때가 있다.

이때는 글에도 역시 float을 써주면 되는데 실제로 해보면 아래와 같다.
200x200사이즈의 이미지를 하나 넣고 이미지와 글에 각각 { float:left; }를 주고

글에는 2픽셀짜리 파란색 테두리를 쳤다.

이렇게 되면 블럭박스가 글과 함께 움직이기 때문에 이때 사용한 가로사이즈 300픽셀은

온전히 글의 넓이가 되는것이다.
테두리도 역시 글에만 제대로 둘러진다.

(만약 이와 똑같이 했는데 이미지옆에 글이 같은 높이로 붙지 않는다면 리셋css를 사용하지 않았기 때문이므로 아래글을 참고할것.)

http://yslife.tistory.com/402

여기서 엥? 오른쪽에 붙이는데 글은 float:right 아냐? 라고 생각할수도 있다.
그렇지만 이렇게 하면 두개가 나란히 붙는게 아니라 아래와 같이 브라우저창을 기준으로 양쪽끝에 붙는다.

만일 글에다 float:right 를 사용하려면 그림과 글을 감싸고있는 부모인 mother에 넓이값을 지정해주면 되는데

그림이 200px, 글의 가로값이 300px이라고
mother의 가로값에 500픽셀을 준다면 아래와 같은 형태가 되어버린다.

왜 그럴까?

바로 글에 둘러진 테두리 2픽셀값을 생각하지 않았기 때문이다.
테두리 양쪽 4픽셀을 합하여 총 504픽셀이 되는데 부모의 width값을 500픽셀로 주었더니

들어갈 자리가 모자라서 밑으로 밀려내려가는 것.

이때, 가로값이 모자라는 상황에서 둘다 float:left 였다면 글이 아래로 내려가면서 왼쪽으로 붙는건 당연하다.

이렇게 되면 float을 써놓고도 전혀 먹지 않은듯 하니 이유를 모르면 여기서부터 헤매기 시작한다.

그렇다면 mother에 width값을 504px로 바꿔주거나 <p>의 width값을 296px로 바꿔준다면

글에다 float:right를 써도 원래대로 나란히 붙게 할 수 있을 것이다. 

이만큼 width값을 지정할땐 단 1픽셀만 어긋나도 민감한 상황이니 주의할것!

그런데 만일 부모인 mother에 테두리를 친다면 어떻게 될까?

여기서 글과 그림은 float의 사용으로 모두 공중에 떠있는 상태이기 때문에

부모 mother에 4픽셀짜리 검은색 테두리라인을 넣어보면
전체를 감쌀거라 생각했던 라인은 글과 그림을 무시하고 그대로 위쪽으로 붙어버리는 웃기는 상황이 발생한다.
(위에 붙은 검은색 라인은 위와 아래가 붙어버렸기때문에 4+4해서 총 8픽셀의 두께를 가진다.)

그렇기때문에 바뀌어버린 플롯의 성질을 어느순간 다시 제자리로 만들어야 할 때가 있다.
이를 플롯클리어 시킨다고 하는데 이는 다음 포스팅에서 다루겠음.

 

 

 

       

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

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

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

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

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

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

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

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

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

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

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

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