안녕하세요.
이번에 Position 속성에 대해 공부해 보겠습니다.
첫번째로 Position에는 5가지의 속성이 존재합니다.
| position: static; | positon을 지정 하지 않았다면 기본값으로 들어가는 속성입니다. (이동이 불가합니다) |
| position: relative; | 현재 위치에서 자유롭게 이동 가능한 속성입니다. |
| position: absolute; | 절대적으로 위치를 이동가능한 속성입니다. |
| position: fixed; | 항상 화면에 고정되어있는 속성입니다. |
| position: sticky; | 스크롤영역 기준으로 움직이는 속성입니다. |
예를 들며 보겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Layout Project</title>
<link rel="stylesheet", href="project2.css">
</head>
<body>
<div class="red box">red
<div class="blue box">blue
<div class="green box">green</div>
<div class="yellow box">yellow</div>
</div>
</div>
</body>
</html>.box{
}
.red{
background-color: #e46e80;
position: relative;
width: 300px;
height: 300px;
}
.blue{
background-color: #5195ee;
border:2px dotted black;
position: absolute;
inset: 70px;
}
.green{
background-color: #32b9c1;
position: relative;
height: 50px;
width: 60px;
top: 20px;
left: 163px;
border-radius: 30cqh;
display: flex;
justify-content: center;
align-items: center;
}
.yellow{
background-color: yellow;
width: 50px;
height: 50px;
position: absolute;
left: 240px;
bottom: 10px;
border-radius:4cqh;
font-size: smaller;
display: flex;
justify-content: center;
align-items: center;
}
위 코드를 작성해 보았습니다.
red는 자식요소로 Blue를 가지고 있고
Blue는 Green 과 yellow를 자식요소로 <Div>태그로 가지고 있습니다.
Html를 조금 공부해보셨다면 RedBox 안에 BlueBox가 들어가있고
BlueBox안에 Yellow와 GreenBox가 들어간
이러한 구조를 생각 하셨을겁니다.
하지만 Postion 속성을 준 값은 어떻게 나왔는지 보시곘습니다
위와 같이 GreenBox는 부모요소이며 absolute속성인 blueBox 밖을 나와
가장 가까운 부모요소이며 reiative속성인 RedBox까지 나올수 있게 되었고
YellowBox는 absolute속성이기 때문에 부모요소인 Blue와 RedBox 밖으로 나올 수 있게 되었습니다.
이처럼 Position속성을 정의해주고 Left, Right, Top, Bottom을 이용하여 이동할 수 있습니다.
그리고 BlueBox처럼 redBox의 중앙의 위치하고 싶다면 inset이라는 요소를 사용하여
Left, Right, Top, Bottom를 하나하나 입력하지 않고 쉽게 사용 가능합니다.
감사합니다.
'HTML, CSS' 카테고리의 다른 글
| [HTML/CSS] 개발자 도구 (0) | 2024.08.20 |
|---|---|
| [HTML] HTML 기본구조와 태그 (0) | 2024.07.17 |
| [CSS] display 속성 : inline, inline-block (0) | 2024.07.15 |
| [CSS] display 속성 : block (0) | 2024.07.15 |
| HTML, CSS란 무엇인가? (0) | 2024.06.19 |
