left, right, top, bottom : 웹 요소의 위치를 정하는 속성
먼저 웹 문서에서 요소를 원하는 곳에 갖다 놓으려면 위치를 지정할 수 있어야 한다. 이때 사용하는 속성이 left, right, top, bottom이다.
즉 position 속성으로 기준 위치를 정한 뒤 요소의 위치를 left, right, top, bottom 속성에서 선택하고 속성값을 지정하면 된다.
| 종류 | 설명 |
| left | 기준 위치와 요소 사이에 왼쪽으로 얼마나 떨어져 있는지 지정 |
| right | 기준 위치와 요소 사이에 오른쪽으로 얼마나 떨어져 있는지 지정 |
| top | 기준 위치와 요소 사이에 위쪽으로 얼마나 떨어져 있는지 지정 |
| bottom | 기준 위치와 요소 사이에 아래쪽으로 얼마나 떨어져 있는지 지정 |
다음 예제는 left, right, top, bottom 속성을 사용해서 텍스트 단락을 자유롭게 배치한 것이다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Html-basic</title>
<style>
#pos1 {
position :absolute;
left: 50px;
top: 50px;
width: 200px;
}
#pos2 {
position: absolute;
right: 100px;
top: 100px;
width: 200px;
}
#pos3 {
position: absolute;
left : 100px;
bottom : 100px;
width: 200px;
}
</style>
</head>
<body>
<p id="pos1">예제 텍스트입니다. 예제 텍스트입니다. 예제 텍스트입니다. 예제 텍스트입니다. 예제 텍스트입니다. 예제 텍스트입니다. 예제 텍스트입니다. 예제 텍스트입니다. 예제 텍스트입니다. 예제 텍스트입니다. 예제 텍스트입니다. </p>
<p id="pos2">예제 텍스트입니다. 예제 텍스트입니다. 예제 텍스트입니다. 예제 텍스트입니다. 예제 텍스트입니다. 예제 텍스트입니다. 예제 텍스트입니다. 예제 텍스트입니다. 예제 텍스트입니다. 예제 텍스트입니다. 예제 텍스트입니다. </p>
<p id="pos3">예제 텍스트입니다. 예제 텍스트입니다. 예제 텍스트입니다. 예제 텍스트입니다. 예제 텍스트입니다. 예제 텍스트입니다. 예제 텍스트입니다. 예제 텍스트입니다. 예제 텍스트입니다. 예제 텍스트입니다. 예제 텍스트입니다. </p>
</body>
</html>
position : 배치 방법을 지정
position 속성은 웹 문서 안의 요소를 자유자재로 배치해 주므로 HTML과 CSS를 이용해 웹 문서를 만들 때 중요하다.
position 속성을 이용하면 텍스트나 이미지 요소를 나란히 배치할 수도 있고 원하는 위치를 선택할 수 있다.
position 속성의 속성값들은 다음과 같다.
| 종류 | 설명 |
| static | 문서의 흐름에 맞춰 배치합니다. 기본값입니다. |
| relative | 위칫값을 지정할 수 있다는 점을 제외하면 static과 같습니다. |
| absolute | relative값을 사용한 상위 요소를 기준을 위치를 지정해 배치합니다. |
| fixed | 브라우저 창을 기준으로 위치를 지정해 배치합니다. |
| sticky | static과 같이 일반적인 흐름을 따르다가, 스크롤 위치가 임계점에 이르면 fixed처럼 화면에 고정되도록 배치합니다. |
다음 예제의 첫 번째 단락과 두 번째 단락의 position 속성값은 각각 static과 relative를 사용했으므로 웹 문서의 흐름에 따라 요소가 위에서 아래로 자연스럽게 배치된다.
세 번째 단락으 position 속성값은 relative이면서 right와 top속성이 지정되었다. 원래는 두 번째 문단 밑에 위치해야 하지만 right, top 속성이 지정되었으므로 원래 위치에서 오른쪽으로 100px 이동하고 위로 50px 올라간 만큼 겹처서 배치됩니다.
마지막으로 오른쪽 위에 있는 검은색 상자는 fixed 값을 사용했으므로 웹 브라우저에서 스크롤 하더라도 항상 같은 위치에 나타납니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Html-basic</title>
<style>
p{
background: rgb(206, 206, 206);
width: 300px;
}
#static {position: static; }
#relative-1 {position: relative;}
#relative-2 {
position : relative;
left: 100px;
top: -50px;
}
#fixed {
width: 100px;
height: 100px;
background-color: black;
position: fixed;
right: 30px;
top: 30px;
}
</style>
</head>
<body>
<p id="static">예시 텍스트입니다. 예시 텍스트입니다. 예시 텍스트입니다. 예시 텍스트입니다. 예시 텍스트입니다. 예시 텍스트입니다. 예시 텍스트입니다. 예시 텍스트입니다. </p>
<p id="relative-1">예시 텍스트입니다. 예시 텍스트입니다. 예시 텍스트입니다. 예시 텍스트입니다. 예시 텍스트입니다. 예시 텍스트입니다. 예시 텍스트입니다. 예시 텍스트입니다. </p>
<p id="relative-2">예시 텍스트입니다. 예시 텍스트입니다. 예시 텍스트입니다. 예시 텍스트입니다. 예시 텍스트입니다. 예시 텍스트입니다. 예시 텍스트입니다. 예시 텍스트입니다. </p>
<p id="fixed"></p>
</body>
</html>
'📁Web Developing > CSS 기초' 카테고리의 다른 글
| IV. 배경꾸미기 - 2. 배경 이미지 지정하기 (0) | 2022.06.05 |
|---|---|
| IV. 배경꾸미기 - 1. 배경색과 배경 범위 지정하기 (0) | 2022.06.04 |
| III. 박스 모델 - 4. 웹 문서의 레이아웃 만들기 (0) | 2022.06.04 |
| III. 박스 모델 - 3. 여백 조절하기 (0) | 2022.06.04 |
| III. 박스 모델 - 2. 테두리 스타일 지정하기 (0) | 2022.06.04 |
댓글