CSS HTML 태그 배치 방법 position 속성 정리
HTML 태그 위치 지정 top, right, bottom, left 속성
HTML 태그에서 기준이 되는 자리 위치에서 네 방향을 기준으로 원하는 위치로 태그 위치를 이동시킬 수 있으며, 단위로는 px 등을 지정하여 px 만큼 떨어진 위치에 지정하는 방식입니다.
속성 | 설명 |
top | 태그 기준 위치로부터 위쪽으로 지정한 숫자 만큼 이동 |
right | 태그 기준 위치로부터 오른쪽으로 지정한 숫자 만큼 이동 |
bottom | 태그 기준 위치로부터 아래쪽로 지정한 숫자 만큼 이동 |
left | 태그 기준 위치로부터 왼쪽으로 지정한 숫자 만큼 이동 |
HTML 태그 배치 방식 지정 postion 속성
position 속성을 사용하면 HTML 태그를 원하는 방식으로 배치할 수 있게 배치 방식을 변경할 수 있습니다.
원하는 위치에 고정시킨다던가 웹문서 흐름에서 벗어난 배치도 가능합니다.
속성값 | 설명 |
static | 원래 문서 흐름 상 배치(기본값) |
relative | 방향 위치 속성을 사용해 위치를 조절이 가능하다는 것을 제외하면 static과 동일한 기능 |
absolute | relative로 지정한 상위 요소를 기준으로 자신의 위치를 지정 |
fixed | 웹 브라우저를 기준으로 방향 위치 속성을 사용해 배치 결정. |
위에서 설명한 top, right, bottom, left의 위치 속성을 사용하기 위해서는 position 속성 값을 static이 아닌 다른 속성값(relative, absolute, fixed)으로 지정한 후 원하는 방향의 속성을 사용해 지정해서 HTML태그의 위치를 변경시킵니다.
```postion 및 방향 위치(top, right, bottom, left) 속성 예제들
이미지 위에 HTML 태그의 위치 변경 예제
- HTML 태그 및 기본 CSS 작성
- 움직이려는 태그(h1)의 상위 요소 position : relative 속성 지정
- 움직이려는 태그 position : absolute 속성 지정
- 이동을 원하는 방향의 속성과 함께 거리만큼 속성값 지정
<style>
* {
box-sizing : border-box;
}
body {
width : 1200px;
margin : 0 auto;
}
div {
width : 700px;
height : 400px;
background-image: url(./earth.jpg);
background-size: cover;
margin-top : 50px;
position: relative;
}
h1 {
color: #2fc600;
position: absolute;
left : 10px;
top : 200px;
}
</style>
</head>
<body>
<div>
<h1>우리의 소중한 지구</h1>
</div>
</body>
</html>
 |
| HTML 태그의 위치를 자유롭게 이동시키기 위해서는 position 속성을 사용해야 합니다. |