1. float 속성
float 속성은 부유하는 대상을 만들 때 사용하는 스타일 속성입니다.
| 키워드 | 설명 |
| left | 태그를 왼쪽에 붙입니다 |
| right | 태그를 오른쪽에 붙입니다 |
<head>
<style>
</style>
</head>
<body>
<img src="cat.jpg" />
<p>This is cat</p>
</body>
<head>
<style>
img {
float: left;
}
</style>
</head>
<body>
<img src="cat.jpg" />
<p>This is cat</p>
</body>float 속성을 사용하면 그림을 글자 위에 띄울 수 있습니다. 원래 float 속성은 이러한 목적으로 만들어졌지만 현대에는 웹 페이지의 레이아웃을 만들 때 더 많이 사용합니다. [1] (221)
2. float 속성을 사용한 수평 정렬
1) float: left
<head>
<style>
.box {
width: 100px;
height: 100px;
background-color: red;
margin: 10px;
padding: 10px;
float: left;
}
</style>
</head>
<body>
<div class="box">1</div>
<div class="box">2</div>
</body>
2) float: right
<head>
<style>
.box {
width: 100px;
height: 100px;
background-color: red;
margin: 10px;
padding: 10px;
float: right;
}
</style>
</head>
<body>
<div class="box">1</div>
<div class="box">2</div>
</body>
3. float 속성을 사용한 레이아웃 구성
1) 레이아웃 구성
2) 기본 HTML 코드
<head>
<style>
</style>
</head>
<body>
<div id="header"></div>
<div id="navigation"></div>
<div id="wrap">
<div id="aside"></div>
<div id="section"></div>
</div>
<div id="footer"></div>
</body>
3) body 내용 입력
<body>
<div id="header"><h1>Header</h1></div>
<div id="navigation"><h1>Navigation</h1></div>
<div id="wrap">
<div id="aside">
<h1>Aside</h1>
<p>This is aside</p>
</div>
<div id="section">
<h1>Section</h1>
<p>This is section</p>
</div>
</div>
<div id="footer"><h1>Footer</h1></div>
</body>
4) style 적용 - body 중앙정렬
태그에 width 속성을 사용하고 margin-left 속성과 maring-right 속성에 auto 키워드를 적용하면 자동으로 중앙 정렬됩니다. [1] (225)
<head>
<style>
body {
width: 600px;
margin: 0 auto;
}
</style>
</head>
5) style 적용 - wrap, aside, section
"자손에 float 속성을 적용하면 부모의 overflow 속성에 hidden 키워드를 적용합니다." [1] (223)
<head>
<style>
body {
width: 600px;
margin: 0 auto;
}
#wrap {
overflow: hidden;
}
#aside {
width: 200px;
float: left;
}
#section {
width: 760px;
float: left;
}
</style>
</head>
6) style 적용 - 배경색 적용
<head>
<style>
body {
width: 960px;
margin: 0 auto;
}
#header { background-color: rgb(200, 200, 200); }
#navigation { background-color: rgb(200, 180, 180); }
#wrap { overflow: hidden; }
#aside {
background-color: rgb(200, 160, 160);
width: 200px;
float: left;
}
#section {
background-color: rgb(200, 140, 140);
width: 760px;
float: left;
}
#footer { background-color: rgb(200, 120, 120); }
</style>
</head>
Reference
[1] 모던 웹을 위한 HTML5+CSS3 바이블, 윤인성 (2019), 한빛미디어
'Study > HTML & CSS' 카테고리의 다른 글
| [CSS] 스타일 속성 - 위치 속성 (0) | 2022.11.01 |
|---|---|
| [CSS] 스타일 속성 - 박스 속성 (0) | 2022.10.31 |
| [CSS] 스타일 속성 - 가시 속성 (0) | 2022.10.31 |
| [CSS] 스타일 속성 - 단위 (0) | 2022.10.26 |
| [CSS] 선택자 (Selector) (0) | 2022.10.24 |
