웹페이지를 개발할 때 요소들을 원하는 좌표에 위치시켜야 하는 경우가 있다. 이를 원활하게 위치하기 위해서는 poistion과 display의 속성에 대해서 제대로 알고 있어야 한다.
Position 속성은 태그를 어떻게 위치시킬지를 정의하는 것이다. 좌표를 지정해주기 위해서는 left, right, top, bottom 속성을 사용해야 한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
div{
display: inline-block;
margin: 20px;
width: 400px;
height: 200px;
border: 5px solid black;
}
.box1{
background: blueviolet;
}
.box2{
background: blue;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
postion 속성을 따로 명시하지 않았으므로 기본값인 default가 적용된 모습이다. 현재 코드에서 box2를 relative로 바꿔 보겠다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
div{
display: inline-block;
margin: 20px;
width: 400px;
height: 200px;
border: 5px solid black;
}
.box1{
background: blueviolet;
}
.box2{
position: relative;
top: 20px;
right: 100px;
background: blue;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
이와 같이 relative는 static이었을 때 어느 위치였는지를 기준으로 하여 상대적인 위치를 정한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
div{
display: inline-block;
border: 5px solid black;
}
.container{
width: 300px;
height: 300px;
}
.box1{
width: 100px;
height: 100px;
position: relative;
top: 50px;
left: 80px;
background: blueviolet;
}
.box2{
width: 100px;
height: 100px;
position: absolute;
top: 50px;
left: 80px;
background: blue;
}
</style>
</head>
<body>
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>
</html>
파란색 상자는 position:relative로 static이었을 때의 위치로부터 지정한 px이 떨어져있다. 이와 다르게 보라색 상자는 position:absolute로 브라우저 왼쪽 상단 기준으로 지정한 px이 떨어져있다. 그렇기 때문에 같은 px 값을 주었지만 다른 위치에 놓여져 있다.
fixed 속성은 스크롤에 상관없이 fixed한 요소가 지정한 위치에 계속 고정된다. 이는 홈페이지의 메뉴나 네비게이션처럼 유저들의 편의를 돕는 데에 유용한 역할을 한다.
Display 속성은 요소가 언제 어떻게 보이는가를 결정하는 속성이다. 이는 크게 4가지로 분류된다.