article
comment
[CSS] float
2022. 8. 14. 23:10ㆍcoding tutorial/CSS
1. 이미지와 텍스트의 배치를 위한 float
float 은 '뜨다'라는 의미이며, 웹페이지에서 이미지를 어떻게 띄워서 텍스트와 함께 배치할 것인가에 대한 속성.
- inherit : 부모 요소에서 상속
- left : 왼쪽에 부유하는 블록 박스를 생성. 페이지 내용은 박스 오른쪽에 위치하며 위에서 아래로 흐름
- right : 오른쪽에서 부유하는 블록 박스를 생성. 페이지 내용은 박스 왼쪽에 위치하며 위에서 아래로 흐름. 이후 요소에 clear 속성이 있으면 페이지 흐름이 달라짐. none 이 아니라면 display 속성은 무시된다.
- none : 요소를 부유시키지 않음
left와 right을 통해 부유 속성을 지정 시 display는 무시된다. (none은 제외) 또한 이후 요소에 clear 속성이 있으면 페이지 흐름이 달라진다.
[예제]
<html>
<head>
<style>
.float-container{
width: 320px;
border: 2px solid #09c;
}
.float-container img{
float: left;
margin: 5px;
padding: 5px;
border: 2px solid #90C;
}
</style>
</head>
<body>
<div class="float-container">
<img src="/images/attach/earth.jpg">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</body>
</html>
[결과]
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
2. 레이아웃에서의 float
float 속성은 원래 이미지와 텍스트 배치 용도로 등장했지만, 레이아웃용으로 많이 사용한다. <div> 태그를 float 속성 및 width, height 속성 등을 이용해 레이아웃을 배치하는 방식이다.
[예제]
<html>
<head>
<style>
.ex-layout{ height: 310px }
.menu{
width: 300px;
height: 40px;
border: 2px solid #09c;
background-color: #d7f5ff;
}
.main .left-menu{
float: left;
width: 50px;
height: 254px;
border: 2px solid red;
background-color: #ffe7d5;
}
.main .content{
float: left;
width: 250px;
height: 250px;
}
.main .content .article{
height: 200px;
border: 2px solid blue;
background-color: #e2e9ff;
}
.main .content .comment{
height: 50px;
border: 2px solid purple;
background-color: #ffddff;
}
</style>
</head>
<body>
<div class="ex-layout">
<div class="menu">global menu</div>
<div class="main">
<div class="left-menu">left menu</div>
<div class="content">
<div class="article">article</div>
<div class="comment">comment</div>
</div>
</div>
</div>
</body>
</html>
[결과]
출처:
https://ofcourse.kr/css-course/float-%EC%86%8D%EC%84%B1
'coding tutorial > CSS' 카테고리의 다른 글
| [CSS] 반응형 단위 em과 rem의 쓰임 (0) | 2023.03.08 |
|---|---|
| [CSS] header 영역(navigation) 한 줄 정렬하고 상단에 고정 하기 (0) | 2022.09.05 |
| [CSS] footer 영역 하단에 고정하기 (with position: absolute;) (0) | 2022.08.14 |
| [CSS] position (0) | 2022.08.14 |
| [CSS] Flexbox (0) | 2022.08.14 |