1. Position이란?
말 그대로 요소를 배치할 때 사용하는 속성이다.
좌표값을 사용한다
X(Left), Y(top) 좌표
좌표를 지정하는 방식이 여러 개 제공된다 ( 좌표계 > 기준점 )
2. Position의 종류
2 - 1 . Position - static
- 정적좌표이며 기본값이다 ( 디폴트값 )
- FlowLayout 방식이다.
- 워드프로세서 방식이다
- 코딩 순서대로 출력된다 ( 위 > 아래, 왼쪽 > 오른쪽 )
- 좌표값이 지원 안된다 ( Left , Top 사용 불가능하다)
2 - 2 . Position - absolute
- 절대 좌표이다
- 기준점은 문서의 좌측 상단
- 모든 태그가 동일하게 문서의 좌측 상단을 원점으로 한다
- 원래 있던 공간이 유지되지 않는다.
- 기준점(원점)은 자신의 부모에 가장 최근 position이 static이 아닌 태그를 원점으로 한다.
( 위치를 지정할 때 부모요소에 relative 속성을 주고 위치를 잡으려는 자식요소에 absolute 속성을 지정하여
위치를 잡는다. )
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>relative</title>
<style>
* {
box-sizing: border-box;
margin: 0px;
/* 테두리 크기까지 고려해서 요소 크기 지정 */
}
#container1 {
border: 5px solid red;
}
#container2 {
border: 5px solid green;
position: relative;
/* top: 20px;
left: 30px; */
}
#container3 {
border: 5px solid blue;
position: relative;
}
div {
width: 300px;
height: 300px;
}
#child1 {
border: 2px dashed yellow;
background-color: violet;
width: 50px;
height: 50px;
position: absolute;
top: 30px;
left: 50px;
}
#child2 {
border: 2px dashed black;
background-color: yellow;
width: 150px;
height: 150px;
}
#child3 {
border: 2px dashed dodgerblue;
background-color: red;
width: 50px;
height: 50px;
position: absolute;
top: 30px;
left: 50px;
}
</style>
</head>
<body>
<div id="container1">div1</div>
<div id="container2">
div2
<div id="child1">child1</div>
</div>
<div id="container3">
div3
<div id="child2">
child2
<div id="child3">child3</div>
</div>
</div>
</body>
</html>
div1에는 div1 만 있고 div2에는 안에 child1이 있고 , div3안에 child2가 있으며 child2 안에 child3가 있다.
child1에는 position이 absolute 속성이고 child2는 position 속성이 없으며 child3도 absolute 속성이다.
div1은 position 속성이 없고 div2 , 3 에는 relative 속성이다.
child1은 div2 안에 있는데 div2가 relative 속성이니 child1의 원점은 div2의 좌측최상단이 된다.
좌측 최상단에서 top으로 30px만큼 , left로 50px만큼 떨어져 있으니 위의 그림에 보라색배경으로 위치된다.
child2는 div3안에 있고 속성이 없기 때문에 그대로 나온다.
child3은 child2안에 있고 absolute이기 때문에 그위의 부모인 child2가 속성이 없으므로 한층 더 올라가서 속성이 relative인 dlv3 안에 top으로 30px만큼 , left로 50px만큼 자리 잡은 것이다.
2 - 3 . Position - relative
- 상대 좌표이다
- 기준점은 원점이다
- 태그가 각각 자신의 원래 위치를 원점으로 한다
- 본래 있던 공간은 유지된다
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>relative</title>
<style>
* {
box-sizing: border-box;
margin: 0px;
/* 테두리 크기까지 고려해서 요소 크기 지정 */
}
#container1 {
border: 5px solid red;
position: static;
}
#container2 {
border: 5px solid green;
position: relative;
bottom: 30px;
/* margin-top: 30px; */
}
#container3 {
border: 5px solid blue;
position: relative;
top: 20px;
}
div {
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div id="container1">div1</div>
<div id="container2">div2</div>
<div id="container3">div3</div>
</body>
</html>
div1은 static이므로 반응이 없고
div2은 relative
div3도 relative이다.
div2가 relative이기 때문에 이동해도 그 자리는 그대로 남아 div3의 위치가 변하지 않았다.
2 - 4 . Position - fixed
- 고정 좌표이다
- 기준점(원점)은 브라우저 화면 좌측 최상단이다.
- 스크롤에 반응하지 않고 화면에 고정된다.
- 원래 있던 공간은 사라진다.
- 헤더나 배너 등을 고정시킬 때 사용한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>fixed</title>
<style>
* {
box-sizing: border-box;
margin: 0px;
/* 테두리 크기까지 고려해서 요소 크기 지정 */
}
body {
height: 3000px;
}
#container1 {
border: 5px solid red;
}
#container2 {
border: 5px solid green;
/* top: 20px;
left: 30px; */
}
#container3 {
border: 5px solid blue;
position: fixed;
top: 0px;
right: 0px;
}
div {
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div id="container1">div1</div>
<div id="container2">div2</div>
<div id="container3">div3</div>
</div>
</body>
</html>
2 - 5 . Position - sticky
- 스크롤을 따라 움직인다.
- 스크롤과 함께 사용되는 경우가 많다.
- 스크롤을 내릴 때 메뉴가 상단에 고정되는 상황에서 활용된다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>sticky</title>
<style>
* {
box-sizing: border-box;
margin: 0px;
/* 테두리 크기까지 고려해서 요소 크기 지정 */
}
body {
height: 3000px;
}
#container1 {
border: 5px solid red;
}
#container2 {
border: 5px solid green;
}
#container3 {
border: 5px solid blue;
position: sticky;
top: 0px;
}
div {
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div id="container1">div1</div>
<div id="container2">div2</div>
<div id="container3">div3</div>
</div>
</body>
</html>div1 , 2 , 3 중에서 div3 만 top 0px에 position을 sticky로 지정했다.
'Visual Studio Code > Visual Studio Code icia 32일차' 카테고리의 다른 글
| Visual Studio Code Float에 대해서 (0) | 2023.04.06 |
|---|---|
| Visual Studio Code 여백 ( padding , margin ) (0) | 2023.04.06 |
| Visual Studio Code table , list 만들기 (0) | 2023.04.06 |
| Visual Studio Code 가상 선택자에 대해서 (0) | 2023.04.06 |
| Visual Studio Code 선택자에 대해서 (0) | 2023.04.06 |
