비전공자를 위한 HTML/CSS

들어가기 전에

모든 요소는 기본적으로 보통의 흐름에 따라 위에서 아래로, 그리고 좌측에서 우측으로 배치됩니다.

요소 박스의 경계대로 차례대로 배치되며 float 속성은 요소를 보통의 흐름에서 벗어나

독자적인 공간 위에 배치되게 됩니다.

float을 이용하면 주변 요소들과 더욱 자연스럽게 배치될 수 있지만, floating 되지 않은

주변 요소들에도 영향을 주기 때문에 잘 이해하고 사용해야 합니다.

핵심키워드

float

학습하기

float 속성

요소를 float(요소를 보통의 흐름에서 벗어나게 함) 시킬지 지정하는 속성입니다.

기본 값 : none

float: none | left | right | initial | inherit;

< 속성 값 >

none	float 시키지 않음(기본값)
left	좌측으로 float 시킴
right	우측으로 float 시킴

요소를 보통의 흐름에서 벗어나 띄어지게 함

주변 텍스트나 인라인 요소가 주위를 감싸는 특징이 있음

: 대부분 요소의 display 값을 block으로 변경함 (display 값 변경 예외: inline-table, flex 등)

코드실습

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>float</title>
  <style>
.container {
  border: 1px dashed #aaa;
  padding: 15px;
  clear: both;
}
.container div, .container span {
  width: 100px;
  height: 100px;
  border: 1px solid #aaa;
  color: #fff;
}
.container :nth-child(1) {
  background-color: green;
}
.container :nth-child(2) {
  background-color: skyblue;
}


</style>
</head>
<body>
  <h2>요소를 보통의 흐름에서 벗어나 띄워지게 함</h2>

  <div class="container" style="width:400px;">
    <div style="float:left;">Box1</div>
    <div style="float:left;">Box2</div>
  </div>

  <h2 style="margin-top:100px;">주변 텍스트나 인라인요소가 주위를 감싸는 특징이 있음.</h2>
  <div class="container" style="width:400px;">
    <div style="float:left;">Box1</div>
    <div style="float:right;">Box2</div>
    <p>CSS 속성(property) float 은 한 요소(element)가 보통 흐름(normal flow)으로부터 빠져 텍스트 및 인라인(inline) 요소가 그 주위를 감싸는 자기 컨테이너의 좌우측을 따라 배치되어야 함을 지정합니다. 부동(floating) 요소 는 float 의 계산값(computed value)이 none이 아닌 요소입니다.</p>
  </div>

  <h2>대부분의 요소에 display 값을 block으로 변경함.</h2>
  <div class="container" style="width:400px;">
    <span style="float:left;">inline1</span>
    <span>inline2</span>
  </div>
</body>
</html>

참고자료

CSS float property
https://www.w3schools.com: Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, and XML.

CSS float property
https://www.w3schools.com: Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, and XML.