플로트 관련 CSS 속성
이 글은 플로트 관련 CSS 속성에 대해 설명합니다.
float 및 clear 속성의 사용과 구문에 대해 배울 수 있습니다.
YouTube Video
미리보기를 위한 HTML
css-float.html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>CSS Properties Example</title>
7 <link rel="stylesheet" href="css-base.css">
8 <link rel="stylesheet" href="css-float.css">
9</head>
10<body>
11 <!-- Header -->
12 <header>
13 <h1>CSS Properties For Layout</h1>
14 </header>
15
16 <!-- Main content -->
17 <main>
18 <header>
19 <h2>Layout Related Properties</h2>
20 </header>
21 <article>
22 <h3>float</h3>
23 <section style="height: auto; color: black;">
24 <header><h4>float: left</h4></header>
25 <section class="sample-view">
26 <div class="float-left">float left</div>
27 <div class="content">
28 <p>
29 paragraph 1-1
30 paragraph 1-2
31 </p>
32 <p>paragraph 2</p>
33 </div>
34 <div class="clearfix"></div>
35 </section>
36 </section>
37 </article>
38 </main>
39</body>
40</html>플로트 관련 CSS 속성
float 및 clear 속성
1.float-left {
2 float: left;
3 width: 150px;
4 margin-right: 20px;
5 background-color: lightblue;
6}
7
8.content {
9 width: 300px;
10 height: 100px;
11}
12
13.content p {
14 background-color: lightblue;
15 margin: 10px;
16}
17
18.clearfix {
19 clear: both;
20 display: none;
21}float는 요소를 부모 요소 내에서 왼쪽이나 오른쪽으로 띄워 다른 요소들이 주위를 감쌀 수 있도록 하는 CSS 속성 중 하나입니다. float 속성은 주로 텍스트 주변에 이미지나 박스 요소를 배치하는 데 사용되지만, 최근에는 flex 및 grid와 같은 최신 레이아웃 방식이 주류가 되면서 사용이 줄어들고 있습니다.
float-left클래스에서는float속성이left로 설정됩니다. 적용된 요소는 부모 요소의 왼쪽으로 떠 있고, 다음 요소는 오른쪽으로 감쌉니다.clearfix클래스에서는clear속성이both로 설정됩니다. 이 클래스를 사용하면 다음 요소가 플로트된 요소를 감싸는 것을 방지할 수 있습니다. 여기에서 우리는 이미지를 플로트한 뒤 다음 요소가 떠다니는 것을 방지하여 레이아웃을 유지합니다.
float 사용 방법
값
left: 요소를 왼쪽으로 띄워 다른 요소가 오른쪽에서 감쌀 수 있도록 합니다.right: 요소를 오른쪽으로 띄워 다른 요소가 왼쪽에서 감쌀 수 있도록 합니다.none: 기본값이며 요소를 띄우지 않습니다.inherit: 부모 요소로부터float속성 값을 상속받습니다.
clear 속성
float을 사용할 때, 다음 요소가 플로트된 요소를 감쌀 수 있습니다. 이를 방지하기 위해clear속성이 사용됩니다.clear속성의 값은 다음과 같습니다:.left: 왼쪽으로 플로트된 요소를 피합니다.right: 오른쪽으로 플로팅된 요소를 피합니다.both: 왼쪽과 오른쪽 모두 플로팅된 요소를 피합니다.none: 요소들이 주위에 떠다니도록 허용합니다. 이 값은 기본값입니다.
노트
float를 사용할 때, 부모 요소의 높이가 플로팅된 요소의 높이를 무시하는 문제가 발생할 수 있습니다. 이 문제를 피하려면 부모 요소에clearfix기법을 사용하거나overflow: hidden;을 설정하세요.- 반응형 디자인이나 복잡한 레이아웃에서
float는flex또는grid보다 다루기 어려울 수 있으므로flex또는grid사용이 권장됩니다.
요약
float는 요소를 왼쪽이나 오른쪽으로 플로팅하여 텍스트나 기타 요소를 감싸도록 하는 오래된 기법이며, 여전히 간단한 레이아웃이나 이미지 감싸기 같은 경우에 가끔 사용됩니다. 하지만 더 유연하고 간편한 레이아웃을 만들기 위해서는 flexbox 또는 grid를 사용하는 것이 권장됩니다.
위의 기사를 보면서 Visual Studio Code를 사용해 우리 유튜브 채널에서 함께 따라할 수 있습니다. 유튜브 채널도 확인해 주세요.