css float 속성 이해하기
- 웹 언어 배우기/CSS
- 2018. 12. 31. 07:00
float 속성은 css에서 정렬하기 위해 사용되는 속성입니다. 이뿐만 아니라, 다단의 레이아웃을 구성할 때, 이미지 슬라이더 등에서도 활용할 수 있습니다.
위 사진과 같이 이미지 옆에 글을 쓸 때에서도 사용할 수 있습니다. 이와 비슷하게 display 속성에도 이같이 응용할 수 있는데 이 둘의 차이점은 여백입니다.
float 속성 사용법
float : none | left | right
none : 기본 속성으로 적용되지 않는다는 의미의 속성값
left : 적용된 태그에 대해서 왼쪽 정렬 하는 속성값
right : 적용된 태그에 대해서 오른쪽 정렬 하는 속성값
<html>
<head>
<style>
.layout{height:310px}
header{width:310px;height:40px;background-color:beige;}
.main aside{float:left;width:50px;height:250px;background-color:antiquewhite;}
.main .content{float:left;width:250px;height:250px;}
.main .content article{height:200px;background-color:darksalmon;}
.main .content footer{height:50px;background-color:whitesmoke;}
</style>
</head>
<body>
<div class="layout">
<header>top menu</header>
<div class="main">
<aside>aside</aside>
<footer>footer</footer>
</div>
</div>
</body>
</html>
이 글을 공유하기