요소 영역, 정렬 float

 

출처 : https://electronic-moongchi.tistory.com/21?category=710947

 

 

[css] float(left, right, none) 의 속성

 

 

float 은 해당 요소를 어떻게 정렬할지를 정의하는 css 속성이다. <br>로 띄우거나 하지 마라...

 

float 속성은 묶음 태그(block element) 만 적용할 수 있다.

 

묶음 태그 : <div> <p> <ol> <ul> <table> <img> 등

 

 

 

 

 

 float 의 속성 사용법 

 

 

none (기본값) : 정렬하지 않는다.

 

left : 왼쪽으로 정렬한다.

 

right: 오른쪽으로 정렬한다.

 

 

기본 html 소스

소스보기

 

 

실행 결과는 다음과 같다.

 

 

 

 

 

 

 

 

이제부터 위의 html 문서에서 float 속성을 적용해 보자.

 

1. float: none

 

div {

width: 100px;

height: 100px;

float: none;

}

 

float: none 속성은 기본값으로 block element 기본 속성을 그대로 유지한다.

 

 

 

2. float: left

 

div {

width: 100px;

height: 100px;

float: left;

}

 

float: left 는 div(block element) a 영역이 왼쪽 정렬되어 오른쪽에 다음 글자가 붙게 된다.

 

 

 

 

3. float: right

 

div {

width: 100px;

height: 100px;

float: right;

}

 

float: right 는 div(block element) a 영역이 오른쪽 정렬되어 왼쪽에 글자가 붙게 된다.