이번에는 css의 float 속성에 대해서 알아보겠습니다.
제가 블로그에 포스팅했었던 전 글들을 보면 그 코드에도 태그들의 화면상 배치를 위해 float 속성을
꽤 많이 활용한 것을 볼 수 있습니다.
ex)
header .spot li {float:left; position: relative;}
이런 식으로 태그를 화면상에서 왼쪽이나 오른쪽 등으로 배치시키고 싶을 때 주로 사용하게 됩니다.
- 정의
float은 원래 '뜨다'라는 뜻의 단어로써, 해당 속성값으로 css를 주게 되면 그 태그는 뜻 그대로
떠서 block과 같은 다른 요소에 방해받지 않고 배치를 시킬 수 있습니다.
(https://www.youtube.com/watch?v=xara4Z1b18I)
저는 이 영상을 보고 float의 개념에 대해 쉽게 이해할 수 있었습니다.
먼저 예제 코드를 짜기 전에 이 영상의 내용을 머리에 담아둔 후 예제 코드의 실행 결과를 보면 그래도
어느 정도는 알 수 있을 것입니다.
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style: none;
}
ul li {
width: 200px;
height: 200px;
}
#red {
background: red;
}
#green {
background: green;
}
#blue {
background: blue;
}
#yellow {
background: yellow;
}
</style>
</head>
<body>
<ul>
<li id="red"></li>
<li id="green"></li>
<li id="blue"></li>
<li id="yellow"></li>
</ul>
</body>
</html>
일단 이게 기본 코드입니다.
그럼 화면에 list 순서상으로 이렇게 배치가 될 것입니다.
저 영상에서도 그렇고 float 속성은 뜬다고 했었죠?
저 페이지를 3D의 공간이라고 생각하고, 만약 빨간색 li 태그에 float left 속성값을 준다면
어떻게 될까요?
빨간색은 붕 떠서 위쪽에 갈 것이고(left이기 때문에), 나머지 밑에 있는 리스트들은
빨간색이 위로 붕 떴기 때문에 빨간색 자리에 초록색과 파란색, 노란색이 올라올 것입니다.
근데 초록색이 빨간색 자리로 올라왔는데 위쪽에 float 속성으로 빨간색이 떠 있으니 가려져서
초록색은 보이지 않고 빨간색, 파란색, 노란색 순서대로 보이게 될 것입니다.
자, 우리 예상이 맞는지 한 번 코드로 볼까요?
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style: none;
}
ul li {
width: 200px;
height: 200px;
}
#red {
background: red;
float: left;
}
#green {
background: green;
}
#blue {
background: blue;
}
#yellow {
background: yellow;
}
</style>
</head>
<body>
<ul>
<li id="red"></li>
<li id="green"></li>
<li id="blue"></li>
<li id="yellow"></li>
</ul>
</body>
</html>
우리 예상대로 보이게 되었습니다.
그럼 지금 초록색은 빨간색 때문에 보이지 않는 상태인데, 여기서 초록색 li 태그에도 float 속성을 준다면
어떻게 되겠습니까?
(한 번 속으로 생각을 하고 밑을 봐 주시면 더욱 기억에 남을 것 같습니다.)
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style: none;
}
ul li {
width: 200px;
height: 200px;
}
#red {
background: red;
float: left;
}
#green {
background: green;
float: left;
}
#blue {
background: blue;
}
#yellow {
background: yellow;
}
</style>
</head>
<body>
<ul>
<li id="red"></li>
<li id="green"></li>
<li id="blue"></li>
<li id="yellow"></li>
</ul>
</body>
</html>
이렇게 나오게 됩니다.
위의 내용을 생각하면서 이 상황에 대해 설명을 하면,
빨간색 혼자 float으로 위에 떠 있는 상황에서 초록색, 파란색, 노란색은 밑에서 리스트의 원래 속성대로
배치되어 있었습니다.
그 상황에서 초록색 영역도 float left로 띄어 버리면, 이미 떠 있던 빨간색 옆으로 붙게 될 것이고 남은
파란색과 노란색은 원래의 초록색 자리가 비었으니 올라갈 것입니다.
근데 원래의 초록색 자리는 위에 빨간색이 있으니 올라간 파란색은 빨간색에 의해 가려질 것이고,
그 밑에 붙은 노란색만 보이게 되어 저런 화면이 나오는 것입니다.
이번 글에서는 float의 기본 속성과 예시를 알아 봤습니다.
float 속성의 특징 때문에 css를 할 때 여러 문제가 발생할 수 있는데, float의 특징을 잘 기억하면서
다루시길 바랍니다.
다음 글은 float 속성과 연결되는 clear 속성에 대해 알아보겠습니다.
'웹 개발 > 주요 태그, 속성들' 카테고리의 다른 글
| display flex 속성 (0) | 2021.12.17 |
|---|---|
| html 리스트 태그 (0) | 2021.12.16 |
| css background 속성 (0) | 2021.12.16 |
| css clear 속성 (0) | 2021.12.16 |
| css 접두어 webkit, moz, ms, o 의미 (0) | 2021.12.16 |
댓글