웹 문서를 만들 때 각 요소들을 원하는 위치에 배치하고자 하는 경우 position 속성을 사용하면 됩니다. position 속성의 값은 static, absolute, relative, fixed 총 4가지가 있습니다.
| position 속성 값 | 설명 |
| static | 기본값. 위->아래, 좌->우 순으로 배치. |
| relative | 요소의 원래 static 위치를 기준으로 상대적으로 배치. |
| absolute | 가장 가까운 relative를 기준으로 상대적으로 배치. |
| fixed | 고정된 위치. |
(실습1) static
static은 position의 값을 따로 지정하지 않았을 때 기본으로 지정되어 있는 기본값입니다. static은 위에서 아래로, 왼쪽에서 오른쪽으로 요소들을 배치합니다.
<head>
<style>
div{
width:30px;
height:30px;
text-align:center;
color:white;
}
.one{
background-color : red;
position : static;
/*float:left;*/
/*float:right;*/
}
.two{
background-color : blue;
position : static;
/*float:left;*/
/*float:right;*/
}
.three{
background-color : blueviolet;
position : static;
/*float:left;*/
/*float:right;*/
}
</style>
</head>
<body>
<div class="one">A</div>
<div class="two">B</div>
<div class="three">C</div>
</body>
아래의 사진은 위의 코드를 실행한 결과입니다. 위쪽 -> 아래쪽으로 배치된 것을 확인하실 수 있습니다.
여기서 한가지 의문이 생길 수도 있습니다. 이전에 static 값은 위쪽 -> 아래쪽으로 배치하는 것 뿐만 아니라 왼쪽 -> 오른쪽으로도 배치한다고 언급했는데 오른쪽에 빈공간이 있음에도 줄바꿈이 되어 있습니다. 이는 div가 블록 레벨의 성질을 지니기 때문입니다. 따라서, 줄바꿈을 방지하려면 추가로 코드를 작성해주어야합니다. 이는 ' float : left; '라는 코드를 한 줄 추가해주면 해결됩니다.
만약, 왼쪽부터 배열하는 것이 아닌 오른쪽부터 배열하고 싶다면 ' float : right; '라는 코드를 한 줄 추가하시면 됩니다.
(실습2) relative
relative는 요소의 원래 static 위치를 기준으로 요소들을 상대적으로 배치합니다. 원래 자신이 있어야하는 위치에서 설정한 값만큼 이동한 위치에 요소를 배치하는 것입니다. 예를 들어, position : relative; 이고 left:10px;이라면 원래 자신이 있어야하는 위치에서 왼쪽으로 10px만큼 떨어진 곳에 요소를 배치합니다.
<head>
<style>
div{
width:30px;
height:30px;
text-align:center;
color:white;
}
.one{
background-color : red;
position : relative;
left :10px;
}
.two{
background-color : blue;
position : relative;
}
.three{
background-color : blueviolet;
position : relative;
left : 5px;
top : -10px;
}
</style>
</head>
<body>
<div class="one">A</div>
<div class="two">B</div>
<div class="three">C</div>
</body>
(실습3) absolute
absolute는 가장 가까운 relative를 기준으로 상대적으로 요소들을 배치합니다. position이 relative인 요소가 없다면 웹브라우저 화면의 가장 왼쪽 위 모서리를 기준으로 요소들을 배치합니다.
<head>
<style>
div{
width:30px;
height:30px;
text-align:center;
color:white;
}
.one{
background-color : red;
position : absolute;
left : 80px;
}
.two{
background-color : blue;
position : absolute;
}
.three{
background-color : blueviolet;
position : absolute;
top : 80px;
}
</style>
</head>
<body>
<div class="one">A</div>
<div class="two">B</div>
<div class="three">C</div>
</body>
위의 코드를 실행한 결과를 보면 absolute가 기준으로 삼을만한 부모 요소가 없기 때문에 웹 브라우저 화면의 가장 왼쪽 위 모서리를 기준으로 요소들을 배치했음을 알 수 있습니다. B의 경우 absolute값 외에 지정된 좌표값이 없기 때문에 화면의 가장 왼쪽 위 모서리에 배치됩니다. A의 경우 left : 80px로 위치값이 지정되어 있기 때문에 화면의 가장 왼쪽 위 모서리를 기준으로 왼쪽으로 80px이 떨어진 곳에 배치됩니다. C의 경우 top : 80px로 위치값이 지정되어 있기 때문에 화면의 가장 왼쪽 위 모서리를 기준으로 위쪽에서 80px이 떨어진 곳에 배치됩니다.
(실습4) fixed
fixed는 요소에 좌표값을 주면 그 요소의 위치는 고정되며 변하지 않습니다. 위치의 기준은 body(보통 웹 브라우저 화면의 가장 왼쪽 위 모서리)입니다.
<head>
<style>
div{
width:30px;
height:30px;
text-align:center;
color:white;
}
.one{
background-color : red;
position : fixed;
left :80px;
top : 80px;
}
.two{
background-color : blue;
position : fixed;
left : 80px;
}
.three{
background-color : blueviolet;
position : fixed;
top : 80px;
}
</style>
</head>
<body>
<div class="one">A</div>
<div class="two">B</div>
<div class="three">C</div>
</body>
위의 코드를 실행한 결과를 보면 A의 경우 left : 80px; top : 80px; 로 지정되어 있기 때문에 웹브라우저 화면의 가장 왼쪽 위 모서리에서 왼쪽과 위쪽으로부터 80px 떨어진 곳에 배치됨을 확인할 수 있습니다. B의 경우 left : 80px;, C의 경우 top : 80px; 임으로 각각 웹브라우저 화면의 가장 왼쪽 위 모서리에서부터 왼쪽으로 80px 위쪽응로부터 80px 떨어진 곳에 배치됨을 확인하실 수 있습니다.
'Programming > HTML5 & CSS3' 카테고리의 다른 글
| [CSS] Grid 사용하는 법 (0) | 2021.02.05 |
|---|---|
| [CSS] 미디어쿼리 사용하는 법 (0) | 2021.02.04 |
| [CSS] 배치 형태 - display (0) | 2021.01.30 |
| [CSS] 다단 만드는 법 (0) | 2021.01.29 |
| [CSS] 글자 스타일 (0) | 2021.01.28 |
