1. float ?
이미지나 텍스트를 정렬할때 사용하는 CSS속성이다.
2. float의 속성값
- float : left 왼쪽 배치
- float : right 오른쪽 배치
- float : inherit 부모값에 상속
- float : none 기본값
* position:absolute가 사용된 경우 float 속성 무시된다.
3. float 적용 예시
[float 속성이 없는 경우]
<div>요소는 대표적인 블록(block) 요소로 float 속성이 없어 아래로 쭉 나열된다.
<html>
<head>
<style>
div{width: 50px; height: 50px;}
</style>
</head>
<body>
<div style="background-color:red;">1</div>
<div style="background-color:orange;">2</div>
<div style="background-color:green;">3</div>
</body>
</html>
[float: left가 적용된 경우]
<div>에 float: left 가 모두 적용되어 있어 왼쪽에 쭉 나열된다.
<html>
<head>
<style>
div{width: 50px; height: 50px;}
</style>
</head>
<body>
<div style="float: left; background-color:red;">1</div>
<div style="float: left; background-color:orange;">2</div>
<div style="float: left; background-color:green;">3</div>
</body>
</html>
[float: left와 float:right가 같이 적용된 경우]
1,2번<div>박스는 왼쪽에서 쭉 나열되고 3번<div>박스는 창의 맨 오른쪽에 배치된다.
<html>
<head>
<style>
div{width: 50px; height: 50px;}
</style>
</head>
<body>
<div style="float: left; background-color:red;">1</div>
<div style="float: left; background-color:orange;">2</div>
<div style="float: right; background-color:green;">3</div>
</body>
</html>
'개발' 카테고리의 다른 글
| display: table로 너비가 동일한 메뉴버튼 만들기 (0) | 2022.08.18 |
|---|---|
| CSS로 말풍선(tooltip) 만들기 (0) | 2022.08.17 |
| float 적용 시 발생하는 부모의 높이 문제 해결 방법 (0) | 2022.08.16 |
| clear 알아보기 (0) | 2022.08.16 |
| 목록을 만드는 태그 (0) | 2022.08.15 |
댓글