강의를 참고해 절대 위치와 상대 위치에 대해 알아봅니다.
절대 위치와 상대 위치는 position 위치에 대한 요소를 의미합니다.
절대 위치는 다른 객체에 영향받지 않고 지정한 위치나 속성에 따라 고정값을 가지는 위치를 의미합니다. 절대값이며, 부모 요소를 기준으로 위치를 정하게 됩니다.상대 위치는 자신의 위치에서 상대적인 위치로 이동이 되는 속성입니다. 다른 객체를 이용할 수 있고, 간단히 이동하고자 할때 사용하기도 합니다.
Introduction
보통 도형이나 박스 혹은 객체들을 만들어줄때 크기나 위치를 지정해주기도 합니다.
크기 속성으로는 width (너비 - 가로) 와 height (높이 - 세로) 속성이 있고,위치 속성으로는 position : absolute | relative 외로 left : 50px, top : 80px 등으로 지정해주기도 합니다.
position : absolute | relative전체 코드 (position.html)
<head>
<title> CSS Property Basic </title>
<style>
div {
}
.a {
font-weight:bold;
}
.b {
width:500px; height:70px;
background-color:yellow;
position:absolute;
line-height:0px;
left:30px; top:70px;
}
.c {
width:500px; height:70px;
background-color:chartreuse;
position:absolute;
line-height:0px;
left:40px; top:100px;
}
.d {
width:500px; height:70px;
background-color:Cyan;
position:relative;
margin:60px 0px;
left:50px; top:80px;
}
</style>
</head>
<body>
<div class="a">
<h1>positioning style3</h1>
</div>
<div class="b">
<h3>절대 위치 설정 적용 - left 30px, top 70px</h3>
</div>
<div class="c">
<h3>절대 위치 설정 적용 - left 40px, top 100px</h3>
</div>
<div class="d">
<h3>상대 위치 설정 적용 - left 50px, top 80px</h3>
</div>
</body>Result
CSS의 절대위치와 상대위치에 대해 알아보았습니다. 큰 공간에 하나하나 배치해가며 순서대로 보여지게 할 수도 있지만, 이처럼 절대위치와 상대위치를 적용하여 원하는 부분에 위치시킬 수도 있습니다.
'Programming > HTML - CSS' 카테고리의 다른 글
| [CSS 기초] Transition / Transform 효과 (간단한 애니메이션) (0) | 2022.05.03 |
|---|---|
| [CSS 기초] 간단한 홈페이지 디자인 만들기 (Homepage Design) (0) | 2022.04.27 |
| [CSS 기초] 박스 그림자 / 테두리 지정 (Box Shadow / Outline) (0) | 2022.04.25 |
| [CSS 기초] 선택자 (클래스선택자 / 구조선택자) 예제 (0) | 2022.04.11 |
| [HTML 기초] 간단한 홍보책자 만들기 (0) | 2022.04.10 |
