한 걸음씩
[Web] Floating for CSS layout 본문
1. Floats
► CSS Float
- 요소를 띄어서 텍스트 및 인라인 요소가 그 주위를 감싸도록 하는 배치
- 왼쪽 혹은 오른쪽으로 띄워 Normal flow에서 벗어남
- 텍스트 열 내부에 떠다니는 이미지를 포함하면서도 해당 이미지의 좌우에 텍스트를 둘러싸는 간단한 레이아웃을 구현하기 위해 도입
- 신문 레이아웃
- 전체 레이아웃을 구성하는 데 사용되었으나, Flexbox와 Grid의 등장으로 인해 원래 목적으로 돌아감
<head>
<style>
.box{
width: 10rem;
height: 10rem;
border: 1px solid black;
margin: 10px;
background-color: lightcoral;
}
.float-left{
float: left;
}
.float-right{
float: right;
}
</style>
</head>
<body>
<div class="box float-left">float-left</div>
<p> ... </p>
<div class="box float-right">float-right</div>
<p> ... </p>
</body>
block의 성질을 무너뜨리기 때문에 위와 같이 전체 layout이 깨지는 것을 방지하기 위해 추가적인 작업이 필요하다
<!-- clearfix : 무너진 레이아웃 보수 -->
<!-- html에 의미없는 박스를 만들기보다 css로 작업하기 -->
[...]::before (or ::after) { <!-- before|after은 해당 박스의 왼쪽 오른쪽을 뜻함 -->
content: ''; <!-- 해당하는 구역에 빈 박스를 만들어준다 -->
display: block; <!-- clear를 사용하려면 속성이 block이어야 함 -->
clear: left|right|both; <!-- float left|right|both에 영향을 받지 않겠다 -->
}
https://developer.mozilla.org/ko/docs/Learn/CSS/CSS_layout/Floats
Floats | MDN
원래 텍스트 블록 내에서 float 이미지를 위한 float 속성은 웹 페이지에서 다단 레이아웃을 생성할 용도로 가장 널리 사용되는 도구 중 하나로 자리매김했었습니다. flexbox와 grid의 출현과 함께 floa
developer.mozilla.org
https://developer.mozilla.org/ko/docs/Web/CSS/float
float - CSS: Cascading Style Sheets | MDN
CSS 속성(property) float 은 한 요소(element)가 보통 흐름(normal flow)으로부터 빠져 텍스트 및 인라인(inline) 요소가 그 주위를 감싸는 자기 컨테이너의 좌우측을 따라 배치되어야 함을 지정합니다.
developer.mozilla.org
'Web' 카테고리의 다른 글
| [Web] Semantic Web (0) | 2023.03.02 |
|---|---|
| [Web] Flexible box for CSS layout (1) | 2023.02.28 |
| [Web] Positioning for CSS layout (0) | 2023.02.27 |
| [Web] The box model (0) | 2023.02.23 |
| [Web] Fundamentals of HTML and CSS (0) | 2023.02.22 |
'Web' Related Articles
more
