※ CSS position
- 요소의 위치를 결정하는 방식을 설정한다.
1. 정적(static)위치 지정방식
- 기본값이다. HTML 요소의 위치를 결정하는 기본적인 방식이다. top, left, right, bottom 속성들을 사용할 수 없다. 단순히 웹 페이지의 흐름에 따라 차례대로 요소들의 위치를 결정하는 방식이다.
2. 상대(relative)위치 지정방식
- HTML 요소의 기본 위치(static)를 기준으로 위치를 재설정하는 방식이다. 기본 위치는 정적위치 지정방식일 때 결정되는 위치를 의미한다.
<head>
<title>상대위치 지정방식</title>
<style>
div {
padding: 20px;
margin: 20px;
width: 300px;
height: 50px;
border: 1px solid red;
}
.relative1 {
position: relative;
left: 150px;
background-color: antiquewhite;
}
.relative2 {
position: relative;
right: -50px;
top: -50px;
background-color: rgba(0, 255, 0, 0.3);
}
</style>
<head>
<body>
<div>기존 박스</div>
<div class="relative1">상대위치 지정방식1</div>
<div class="relative2">상대위치 지정방식2</div>
</body>
3. 고정(fixed)위치 지정방식
- 뷰포트를 기준으로 위치를 설정하는 방식이다. 웹 페이지가 스크롤 되어도 고정위치로 지정된 요소는 항상 같은 곳에 위치한다.
* 뷰포트: 가상의 화면으로 화면 디스플레이상의 표시 영역을 뜻한다. 모바일 뷰포트는 상하 좌우로 스크롤을 움직이거나 줌인, 줌아웃을 통해 뷰포트를 변경하며 사용한다.
<head>
<title>고정위치 지정방식</title>
<style>
p {
border: 1px solid red;
padding: 10px;
width: 400px;
}
#content {
border: 1px solid blue;
padding: 10px;
width: 1000px;
margin: 0 auto;
}
#content > p:nth-child(even) { margin-left: 570px; }
#fix{
width: 75px;
height: 75px;
border: 1px solid olive;
background-color: darkturquoise;
position: fixed;
right: 20px;
bottom: 20px;
border-radius: 50%;
}
</style>
</head>
<body>
<div id="fix"></div>
<div id="content">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
</body>
4. 절대(absolute) 지정방식
- 뷰포트를 기준으로 위치를 설정하는 방식이다. 조상위치를 기준으로 위치를 지정할 수 있다. 조상요소를 가지지 않으면 body 요소를 기준으로 위치를 결정한다. 조상요소 중에서도 위치가 설정된 조상요소를 기준으로 한다. 위치가 설정된 조상요소란 정적위치 지정방식을 제외한 방식을 말한다. 상대 · 고정 · 절대위치 지정방식으로 위치가 설정된 조상요소를 의미한다.
<head>
<title>절대위치 지정방식</title>
<style>
#wrap {
width: 500px;
height: 500px;
border: 3px solid red;
position: relative;
}
.box {
width: 50px;
height: 50px;
background-color: blueviolet;
border: 1px solid cadetblue;
color: white;
text-align: center;
line-height: 50px;
position: absolute;
}
#ab1 { right: 0px; top: 0px; }
#ab2 { left: 0px; bottom: 0px; }
#ab3 { right: 0px; bottom: 0px; }
#ab4 { left: 225px; top: 225px; }
</style>
</head>
<body>
<div id="wrap">
<div class="box" id="ab1">1</div>
<div class="box" id="ab2">2</div>
<div class="box" id="ab3">3</div>
<div class="box" id="ab4">4</div>
<div class="box" id="ab5">5</div>
</div>
</body>
5. z-index
- HTML 요소의 위치를 설정하게 되면 위치 및 방식에 따라 겹칠 수 있다. 겹쳐지는 요소들이 쌓이는 순서를 결정할 때 사용한다. 순서는 음수, 양수를 모두 사용할 수 있고 크기가 클수록 위에 위치하고, 작을수록 아래에 위치하게 된다.
<head>
<title>z-index</title>
<style>
div#container {
position: relative;
border: 1px solid black;
}
div.box {
position: absolute;
width: 200px;
height: 200px;
border: 1px solid red;
}
#b1 {
left: 50px; top: 50px;
background-color: deeppink;
}
#b2 {
left: 100px; top: 100px;
background-color: deepskyblue;
z-index: 100;
}
#b3 {
background-color: gold;
z-index: 50;
}
</style>
</head>
<body>
<div id="container">
<div class="box" id="b1"></div>
<div class="box" id="b2"></div>
<div class="box" id="b3"></div>
</div>
</body>
6. float
- HTML 요소가 주변(수평으로 나열된)의 다른 요소들과 자연스럽게 어울리도록 만들어 준다. float를 적용받은 요소의 다음 요소들이 위로 끌어올려진다. float 를 적용받은 요소의 방향(left, right)을 결정해야 한다. float를 적용받은 요소는 다른 요소보다 위쪽에 위치한다. 박스들을 수평방향으로 정렬할 시 사용한다. float를 적용받은 요소는 콘텐츠 크기만큼만 영역을 설정한다.
7. clear
- float 속성이 적용된 이후 나타나는 요소들의 동작을 조절한다. float 속성이 적용되면 그 이후에 등장하느 요소들의 정확한 위치를 설정하기 어렵다. clear 속성을 사용하여 이후에 등장하는 요소들이 더 이상 float 속성에 영향을 받지 않도록 성정한다.
<head>
<title>float - 2</title>
<style>
#box1 {
padding: 20px;
background-color: gold;
float: left;
margin-right: 20px;
}
#box2 {
padding: 20px;
background-color: pink;
float: left;
margin-right: 20px;
}
#box3 {
padding: 20px;
background-color: lightblue;
float: right;
height: 100px;
}
/* content가 있다면 이런 식으로 해도 된다. */
/* #box3::after {
clear: both;
} */
#box4 {
padding: 20px;
background-color: lightgreen;
clear: both;
/* margin-right: 20px; */
}
</style>
</head>
<body>
<h2>float - 2</h2>
<div id="box1">박스 - 1</div>
<div id="box2">박스 - 2</div>
<div id="box3">박스 - 3</div>
<div id="box4">박스 - 4</div>
</body>
float - 2
'CSS' 카테고리의 다른 글
| 국비 수업 29일 차(22.11.11.) - flex 2, 미디어 쿼리 (0) | 2022.11.14 |
|---|---|
| 국비 수업 29일 차(22.11.11.) - flex 1 (0) | 2022.11.14 |
| 국비 수업 27일 차(22.11.09.) - 박스 모델 (0) | 2022.11.11 |
| 국비 수업 26일 차(22.11.08.) - CSS 텍스트 (0) | 2022.11.10 |
| 국비 수업 26일 차(22.11.08.) - CSS 컬러 (0) | 2022.11.09 |
