▣ float
· 화면을 구성하는 요소 간의 관계를 고려하여 각 요소를 배치하는 방법
| 속성값 | 설명 |
| inherit | 요소를 감싸는 부모 요소의 float 속성을 상속받는다. |
| left | 요소를 왼쪽으로 떠 있는 상태로 만든다. |
| right | 요소를 오른쪽으로 떠 있는 상태로 만든다. |
| none | float 속성을 적용하지 않는다 (요소를 떠 있지 않게 한다.) |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>float 속성 사용하기</title>
<style>
img {
width: 140px;
height: 140px;
float: right;
margin: 0 0 10px 10px;
}
</style>
</head>
<body>
<p>float 속성은 웹 문서의 레이아웃을 설계하는 과정에서 많이 사용하는 속성입니다. </p>
<p><img src="btoblogo.jpg" alt="btoblogo">
float 속성은 특정 요소를 떠 있게 해줍니다. 여기서
'떠 있다'라는 말의 의미는 특정 요소가 기본 레이아웃에서 벗어나 웹 문서의
왼쪽이나 오른쪽에 이동하는 것을 말합니다. float 속성은 복잡한 형태의
레이아웃을 구성하는 데 필요한 핵심 속성으로, 특정 요소가 주변 요소와
자연스럽게 어울리도록 해줍니다. 주의할 점은 float 속성을 사용할 때 요소의
위치가 고정되면 안되기 때문에 position 속성의 absolute를 사용하면 안됩니다.</p>
</body>
</html>
▣ clear
· float 속성이 적용되지 않도록 할 때 사용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.div1 {
float: left;
width: 100px;
height: 50px;
margin: 10px;
border: 3px solid #73AD21;
}
.div2 {
border: 1px solid red;
}
.div3 {
float: left;
width: 100px;
height: 50px;
margin: 10px;
border: 3px solid #73AD21;
}
.div4 {
border: 1px solid red;
clear: left;
}
</style>
</head>
<body>
<h2>float 속성 사용</h2>
<div class="div1">div1</div>
<div class="div2">div2 - float 속성을 사용하여 대상 요소를 웹 문서에 배치하면 그 다음 요소에도 똑같은 속성이 적용됩니다.
하지만 float 속성이 사용되는 것을 원하지 않을때도 있습니다. 이때 clear 속성을 사용합니다.
다양한 레이아웃 설계할 때에는 float 속성과 clear 속성을 적절히 잘 사용해야 합니다.</div>
<h2>float 속성 사용</h2>
<div class="div3">div3</div>
<div class="div4">div4 - clear 속성은 float 속성이 적용되는 것을 원하지 않는 요소에 사용하여 float 속성을 초기화 시킵니다.
float: left;를 사용했다면 clear: left;로, float: right;를 사용했다면 clear: right;로 초기화합니다.
float 속성 값이 left 인지 right 인지 상관없이 무조건 초기화하고 싶다면 clear: both;를 사용합니다.
보통 clear: both;를 많이 사용합니다.</div>
</body>
</html>
▣ overflow
· auto로 설정하면 이미지가 박스 영역을 벗어나는 현상을 해결할 수 있음
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
img {
width: 300px;
height: 200px;
}
div {
border: 3px solid #73AD21;
}
.img1 {
float: right;
}
.fix {
overflow: auto;
}
.img2 {
float: right;
}
</style>
</head>
<body>
<p>이미지가 박스 영역을 벗어남</p>
<div><img src="btob.jpg" alt="image" class="img1">
이미지가 오른쪽 정렬로 되어 있는데, 박스 영역을 벗어났습니다.</div>
<p>overflow: auto; 속성을 사용하여 해결</p>
<div class="fix"><img src="btob.jpg" alt="image" class="img2">이미지가 박스 영역을 벗어날 경우에는 overflow 속성을 auto로 설정하여 해결합니다.</div>
</body>
</html>
▣ 시맨틱 문서 구조에서 float 속성의 사용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
border: 3px solid blue;
}
.fix {
overflow: auto;
}
nav {
float: left;
width: 200px;
border: 3px solid #73AD21;
}
section {
margin-left: 206px;
border: 3px solid red;
}
</style>
</head>
<body>
<div class="fix">
<nav>
<span>목차</span>
<ul>
<li><a target="_blank" href="http://www.google.com">Google</a></li>
<li><a target="_blank" href="http://www.apple.com">Apple</a></li>
<li><a target="_blank" href="http://www.w3.org">W3C</a></li>
<li><a target="_blank" href="http://www.oracle.com">Oracle</a></li>
<li><a target="_blank" href="http://www.adobe.com">Adobe</a></li>
<li><a target="_blank" href="http://www.amazon.com">Amazon</a></li>
<li><a target="_blank" href="http://www.Mysql.com">Mysql</a></li>
</ul>
</nav>
<section>
<span>section 1</span>
<p>float 속성은 시맨틱 문서 구조에 유용하게 사용할 수 있습니다.
예를 들면 nav나 aside에 float 속성을 추가하면 떠다니는 내비게이션 또는 사이드 바를 만들 수 있습니다.</p>
</section>
<section>
<span>section 2</span>
<p>시맨틱 문서 구조에 float 속성을 적용할 때는 footer 부분에 적용되지 않도록 해야합니다. </p>
</section>
</div>
</body>
</html>
▣ z-index
· 한 요소 위에 다란 요소를 쌓을 때 사용
· z-index 속성값이 작을수록 아래에 쌓임
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box1 {
position: absolute;
top: 0px;
left: 0px;
width: 100px;
height: 100px;
background-color: lightblue;
z-index: 3;
}
#box2 {
position: absolute;
top: 30px;
left: 30px;
width: 100px;
height: 100px;
background-color: yellow;
z-index: 2;
}
#box3 {
position: absolute;
top: 60px;
left: 60px;
width: 100px;
height: 100px;
background-color: yellowgreen;
z-index: 1;
}
</style>
</head>
<body>
<div id="box1">box #1</div>
<div id="box2">box #2</div>
<div id="box3">box #3</div>
</body>
</html>