CSS - 속성 float (div 수평정렬)
float
- float 속성은 요소의 위치를 잡을 때 아주 중요한 역할을 하는 스타일 속성이다.
- float의 사전적 의미는 물위에 '떠있다'의 뜻을 가진다.
- 이미지와 텍스트를 함께 배치할 때 이 float 속성은 유용하다. 이미지에 float="left"속성을 주면 이미지는 왼쪽으로 배치되고 뒤따르는 텍스트는 이미지를 감싸며 배치된다.
- float된 요소는 부모 컨테이너의 가장 왼쪽이나 오른쪽으로 이동한다. float된 요소후에 추가되는 요소는 float 요소를 감싸면서 배치된다. float된 요소 이전에 추가된 요소는 float의 영향을 받지 않는다. float속성으로는 요소를 레이아웃의 왼쪽이나 오른쪽으로만 배치될 수 있다. 위쪽이나 아래쪽으로는 float할 수 없다.
- float 속성은 웹 페이지의 레이아웃을 잡을 때도 유용하게 사용된다.
- float:left or right => div안의 복수개의 div는 수직정렬이다. 이것을 수평정렬로 바꾼다. 그리고 ul li태그로 생성된 수직 정렬 목록을 수평목록으로 바꾼다.
- clear:both => div간 잘못된 css 간섭 적용을 막아주는 역할을 한다. clear 속성 값에 "both"을 적용하면 float의 left, right 모두 제거 된다. clear는 float흐름을 제거하는 속성이다. content본문 내용에 빈곳이 있을 경우 float속성이 적용된 상태이면 하단 footer영역이 빈영역 본문 content쪽으로 올라가 버려서 ui가 깨지는 현상이 발생한다. 이러한 문제를 해결하기 위해서는 footer 영역에 clear:both; css속성을 지정해서 본문 content영역에 지정된 float속성을 아래 footer영역에 영향을 못미치게 제거하면 footer하단 영역이 원래 위치로 돌아가서 ui가 잘못되는 현상을 막을 수 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My Blog Page</title>
<style>
#header{
width:100%; height:50px; background:yellow;
}
#nav{
width:30%; background:red; height:100px;
float:left;/*레이아웃을 왼쪽에 배치*/
}
#content{
width:70%; height:100px; float:right;/*레이아웃을 오른쪽에 배치*/
background:blue;
}
#footer{
width:100%; height:50px; background:aqua;
clear:both;/*위쪽의 레이아웃에 적용된 float속성을 제거함으로써 footer하단 영역이
content의 빈공백으로 올라가서 ui가 깨지는 형상을 막을 수 있다.*/
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">header</div>
<div id="nav">nav</div>
<div id="content">content</div>
<div id="footer">footer</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.outer{
background : yellow;
border: 1px solid red;
width:250px; height:100px;
}
.inner{
width:100px; height:100px;
border: 1px solid blue;
float:left;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">div1</div>
<div class="inner">div2</div>
<div class="inner">div3</div>
</div>
</body>
</html>
.outer의 witdh가 충분하지 않으면 .inner를 float:left를 했을 때 짤린다. inner의 div의 width를 계산(테두리+margin포함)해서 .outer의 width를 설정해야한다. 여기선 306px 이상으로 설정해야 div3까지 수평정렬이 된다.
'언어공부 > CSS' 카테고리의 다른 글
| CSS - 속성 정리 (2) / CSS3 애니메이션 (0) | 2021.07.15 |
|---|---|
| CSS - 속성 정리 (1) / 타입 선택자 css (0) | 2021.07.14 |
| CSS 스타일 시트 / CSS 선택자 문법 / CSS를 삽입하는 방법 (외부 스타일 시트방법, 내부 스타일 시트 방법, 인라인 스타일 시트방법) (0) | 2021.07.13 |
| (생활코딩) CSS 코드의 재사용 <link> (0) | 2021.04.05 |
| (생활코딩) CSS 미디어 쿼리 (0) | 2021.04.05 |
