프로젝트를 하다보면 css에 float를 99프로 사용하게 되었는데,
단순히 정렬하는 기능이라고 알았지 구체적으로 뭐하는 녀석인지 궁금하여
float에 대해서 찾아보았다 🧐
float는 ?
한마디로 풍선 불어올리기라고 생각하면 좋을 것 같다! (부스트코트에서 풍선처럼 붕붕 띄운다고 생각하라고 하셨다)
float는 left와 right가 있다.
float의 기능을 이해하기 위하여 아래 예시를 만들어보깅
<style>
.a {
}
.b {
float: left;
}
.c{
}
</style>
<body>
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
</body>
원래대로라면, a->b->c 순으로 정렬이 되있겠지만
b가 float가 적용되면 풍선처럼 위로 붕~ 뜬다 생각하고,
c가 b가 공중위로 떠올라있으니 어? b자리가 비어있네? 하고 b자리로 들어가는 것!
'✍ 따뜻한 개발 공부' 카테고리의 다른 글
| [Servlet] Header의 정보는 어떻게 가져올까~? (0) | 2022.07.30 |
|---|---|
| [Servlet] 3.0 이전 버전에서는 서블릿 mapping을 어떻게 해야할까? / WEB.xml에서 서블릿 맵핑하는 방법 (0) | 2022.07.29 |
| [Servlet] 서블릿이란? / 서블릿, JSP 의 차이를 알아보자 🔍 (0) | 2022.07.27 |
| [CSS] div를 inline 속성으로 바꾸고 싶어 / display , position, float 의 역할 (0) | 2022.07.26 |
| [CSS] 폰트 사이즈 지정하기 / px은 알겠는데 1em 너는 생소해! (0) | 2022.07.25 |
댓글