'float'에 해당되는 글 2건
- 2009.12.10 CSS : Float 흐름끊기 2
- 2009.12.09 CSS : Float
앞서 flow에 따른 float을 살펴 보았습니다.
실제로 float을 사용하다 보면 이리저리 예상치 못한 난관에 부딧히면서 머엉~ 해질때가 많은데요
그런 케이스를 몇개 추려서 한번 보도록 하겠습니다.
이 화면의 html 구조는 다음과 같습니다.
또한, CSS를 보도록 하겠습니다.
티스토리 스킨을 조금 만져봤던 분이라면 익숙한 구조일 것입니다 ^^;
레이아웃이 블로그 2단 스킨의 그것과 흡사합니다.
근데, 화면을 보면 뭔가 조금 이상해 보일겁니다..
넵. 화면에 회색배경으로 된 div 요소..
즉 container 부분의 높이가 자식 요소의 높이를 반영하지 않는 문제점이 보이네요.
이는 floating된 자식의 요소가 부모요소에게 자신의 크기를 전해주지 못해서 생기는 문제입니다.
위의 레이아웃인 경우 보통의 블로그 스킨을 생각하면 footer부분은 화면의 하단에 위치하기때문에
footer부분에서 float을 없애주면 됩니다.
위의 스타일처럼 clear:both; 를 지정해주면 float이 사라져 아래와 같이 left 요소의 하단에 길게 위치함을
확인 할 수 있습니다.
자, 그렇다면 만약에 이전의 화면처럼 원래 footer가 right 아래 위치해야 한다면 어떻게 해결을 할까요?
방법은 :after1 가상선택자를 이용하여 float을 clear 할 수 있습니다.
즉, 아래처럼 container에다 :after 가상선택자를 이용하여 clear:both를 주고 새로운 스타일을 주면 됩니다.
그러면 결과는 이렇게 변합니다.
또한, float은 각각의 크기에 민감합니다.
위의 상태에서 left 요소의 너비를 400px로 늘려서 확인을 해 보면 right 요소가 아래로 떨어지는것을
확인 할 수 있습니다.
부모 요소(container)의 너비가 700px인데,
자식 요소들이 각각 400px로 합이 800px가 되니 right 요소가 공간이 없어 아래로 떨어지는 현상입니다.
footer는 우리가 너비를 주지 않았기 때문에 유연하게 줄어든거죠 ^^;
특히 이러한 경우는 블로그 스킨에서 종종 나타나는 문제인데요, container가 고정 크기가 아닌 가변적인 크기거나
크기지정을 해 주지 않아서 브라우저의 너비가 충분히 넓을때는 문제없이 보이다가
브라우저의 너비가 좁아지면 해당 부모요소의 너비가 좁아지면서 내부의 자식 요소들의 레이아웃이 깨지기도 합니다.
해결법은 부모요소의 크기를 자식요소들 너비의 합과 같거나 더 큰 고정크기로 바꿔주면 해결됩니다 ^^
적다보니 float을 clear 하는 방법에서 글이 길어지네요..^^;
float에 대한 부분은 이걸로 마치도록 하고,
이후에 float에 관한 유용한 팁이 생각나면 다시 새로운 글로 적어보도록 하겠습니다. ^^
- 해당 요소의 뒷부분을 의미합니다. [본문으로]
'개발이야기' 카테고리의 다른 글
| HTML (4) | 2009.12.14 |
|---|---|
| CSS : Box Model (0) | 2009.12.11 |
| CSS : Float (0) | 2009.12.09 |
| CSS Position 이야기 (9) | 2009.12.08 |
| CSS Sprite 를 이용한 간단한 롤오버 메뉴 (2) | 2009.12.07 |
요즘 하루에 한개씩 글을 발행하게 되네요..^^;
오늘은 어제랑 비슷한거 같지만 다른 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을 가지고 레이아웃을 짜는 일이 없었으면 합니다 ^^
'개발이야기' 카테고리의 다른 글
| 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 |
