z-index
- HTML 요소의 위치를 설정하게 되면 위치 및 방식에 따라 요소가 겹칠 수 있음
- 겹쳐지는 요소들이 쌓이는 순서를 결정할 때 z-index를 사용
- 순서는 숫자의 크기가 클수록 위에 위치하고 작을수록 아래 위치하게 됨
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>z-index</title>
<style>
div#wrapper { position: relative; }
div.box {
position: absolute;
width: 200px;
height: 200px;
border: 1px solid black;
font-size: 25px;
}
#b1 {
left:50px;
top: 50px;
background-color: deeppink;
z-index: 100;
}
#b2 {
left: 120px;
top: 70px;
background-color: gold;
z-index: 1;
}
#b3 {
left: 70px;
top: 110px;
background-color: deepskyblue;
z-index: 10;
}
</style>
</head>
<body>
<h2>z-index</h2>
<div id="wrapper">
<div id="b1" class="box">1번째 div</div>
<div id="b2" class="box">2번째 div</div>
<div id="b3" class="box">3번째 div</div>
</div>
</body>
</html>
float
- HTML 요소가 주면(수평으로 나열된)의 다른 요소들과 자연스럽게 어울리도록 만듦
- float를 적용받은 요소의 다음에 나오는 모든 요소들이 끌어올려짐
- float를 적용받은 요소의 다음에 나오는 요소방향을 결정(left, right)
- 컨텐츠 크기 만큼만 영역을 설정(블록)
- float를 적용받은 요소는 다른 요소(배경)보다 위에 위치
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>float1</title>
<style>
img {
float: left;
margin-right: 20px;
}
</style>
</head>
<body>
<h2>float1</h2>
<img src="./gift.png" alt="선물">Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis repellat placeat tempore excepturi animi eaque architecto ratione, enim tempora quo alias consequatur assumenda officia nam vero libero laudantium eius consequuntur. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eaque ex veritatis sint porro neque, quae quibusdam dolorum a vel fugit eum dignissimos eos fugiat natus reiciendis, quos quis consectetur voluptas?
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>float2</title>
<style>
div {
padding: 20px;
}
#box1 {
background-color: gold;
float: left;
margin-right: 20px;
}
#box2 {
background-color: deeppink;
float: left;
margin-right: 20px;
}
#box3 {
background-color: greenyellow;
float: left;
margin-right: 20px;
}
#box4 {
background-color: deepskyblue;
float: right;
}
</style>
</head>
<body>
<h2>float2</h2>
<div id="box1">박스1</div>
<div id="box2">박스2</div>
<div id="box3">박스3</div>
<div id="box4">박스4</div>
</body>
</html>
clear
- float 속성이 적용된 이후 나타나는 요소들의 동작을 조절
- float 속성이 적용되면 그 이후에 등장하는 모든 요소들은 정확한 위치를 설정하기 힘듦
- clear 속성을 이용하여 float 이후에 등장하는 요소들이 더이상 float 속성에 영향을 받지 않도록 설정(left, right, both)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>clear</title>
<style>
body { margin: 20px 30px; max-width: 800px;}
p {
padding: 10px;
text-align: center;
font-size: 20px;
}
#p1 {
float: left;
width: 38%;
background-color: gold;
margin-bottom: 20px;
}
#p2 {
float: right;
width: 54%;
background-color: deepskyblue;
}
#p3 {
clear: both;
background-color: deeppink;
}
</style>
</head>
<body>
<h2>clear</h2>
<div id="p1">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores ex inventore placeat excepturi praesentium quo temporibus optio est quod cumque doloremque ad autem eveniet voluptatem, quam, libero, cupiditate minus neque?</p>
</div>
<div id="p2">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores ex inventore placeat excepturi praesentium quo temporibus optio est quod cumque doloremque ad autem eveniet voluptatem, quam, libero, cupiditate minus neque?</p>
</div>
<div id="p3">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores ex inventore placeat excepturi praesentium quo temporibus optio est quod cumque doloremque ad autem eveniet voluptatem, quam, libero, cupiditate minus neque?</p>
</div>
</body>
</html>
클리어 적용 전(좌)과 후(우)
'코딩 > Web' 카테고리의 다른 글
| CSS 미디어 쿼리 (0) | 2024.04.11 |
|---|---|
| CSS 레이아웃, flex (0) | 2024.04.11 |
| CSS Position (0) | 2024.04.09 |
| CSS 박스 모델 (0) | 2024.04.09 |
| CSS 배경 (0) | 2024.04.09 |
