[css] float(none, left, right) 의 속성
반응형
[css] float(left, right, none) 의 속성
float 은 해당 요소를 어떻게 정렬할지를 정의하는 css 속성이다.
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 영역이 오른쪽 정렬되어 왼쪽에 글자가 붙게 된다.
clear(none, both, left, right) 속성에 대해 배워 보자
반응형
'develop > css' 카테고리의 다른 글
| [css] overflow (visible, hidden, scroll, auto) 속성 (0) | 2017.10.23 |
|---|---|
| [css] 여백 (margin, padding) 속성 (0) | 2017.09.26 |
| [css] position (static, relative, absolute, fixed) 의 속성 (1) | 2017.09.25 |
| [css] clear(none, both, left, right) 의 속성 (0) | 2017.09.24 |
| [css] display (none, inline, inline-block, block) 와 visibility (visible, hidden, collapse) 의 차이 (0) | 2017.09.23 |
TAGS.