position 속성은 웹문서 안의 요소들을 자유자재로 배치해주는 속성으로 HTML과 CSS를 이용해 웹문서를 만들 때 중요하게 사용하는 속성 중 하나입니다.
position 속성을 이용하면 텍스트나 이미지를 나란히 배치할 수 있고 여러 개의 요소를 가로나 세로로 원하는 위치에 배치할 수도 있습니다.
이렇게 요소를 다양하게 배치하려면 position 속성에서 사용하는 속성 값의 특성을 이해하고 필요에 따라서 값을 선택해야 합니다.
position 속성 중 static을 제외한 나머지 속성 값에서는 좌표를 이용해 각 요소의 위치를 조절할 수 있습니다.
이때 위치는 top과 bottom, left, right로 지정합니다.
- top 위쪽으로부터 얼마나 떨어져 있는지를 나타냅니다
- bottom 아래쪽으로부터 얼마나 떨어져 있는지를 나타냅니다
- left 왼쪽에서 얼마나 떨어져 있는지
- right 오른쪽에서 얼마나 떨어져 있는지
좌표값은 양수와 음수 모두 사용이 가능합니다.
static 속성- 문서의 흐름대로 배치하기
position 속성의 기본값으로 요소를 나열한 순서대로 배치하며 top이나 bottom, left, right 같은 속성 값을 사용할 수 없습니다.
static 속성은 블록 요소는 위에서 아래로 쌓이고, 인라인 요소는 같은 줄에 순서대로 배치됩니다.
<예제>
|
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS 포지셔닝</title>
<style>
#fx {
position: fixed;
top: 5px;
right: 5px;
width: 100px;
height: 100px;
background: crimson;
}
#content {
width: 400px;
}
p {
line-height: 30px;
}
.static{
width: 300px;
height: 100px;
background-color: darkkhaki;
}
</style>
</head>
<body>
<h2>position: static;</h2>
<p>위치를 가진 요소 : static; 특별한 방법으로 배치되지 않습니다. 항상 페이지의 정상적인 흐름에 따라 배치됩니다.</p>
<div class="static">
position: static;
</div>
</body>
</html>
|
cs |
<결과>
다시말해 position: static;는 특별한 방식으로 배치되지 않습니다. 항상 페이지의 정상적인 흐름에 따라 배치됩니다.
relative 속성-문서의 흐름에 따라 위치 지정하기
relative속성도 static에서처럼 나열한 순서대로 배치된다는 공통점이 있습니다.
차이점은 top이나 bottom, left, right 같은 속성 값을 사용할 수 있으며 좌표값을 사용해 위치를 지정할 수 있다는 점입니다.
아래의 파란색 사각형을 정의하는. box2의 포지션을 지정하지 않거나 static으로 지정했다면 두 개는 나란히 표시될 것입니다.
하지만. box2의 포지션을 relative로 지정한다면 다음 예제의 좌표를 지정할 수 있습니다.
이렇게 하면 원래 표시되었어야 할 위치를 기준으로 왼쪽으로 60px, 아래로 40px 이동해 표시됩니다.
|
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS 포지셔닝</title>
<style>
.box1{
float:left;
width:100px;
background:#ffd800;
margin-right:10px;
padding:20px;
}
.box2 {
position:relative; /* 포지션 relative */
left:-60px; /*좌표값 지정*/
top:40px; /*좌표값 지정*/
width:300px;
background:#0094ff;
float:left;
padding:20px;
}
</style>
</head>
<body>
<div class="box1">박스1</div>
<div class="box2">박스2</div>
</body>
</html>
|
cs |
좌표의 left값은 오른쪽으로 갈수록 커지고 top값은 아래로 갈수록 커집니다.
예제에서 left:-60px이므로 왼쪽으로 60px만큼 이동한 것입니다.
absolute 속성-원하는 위치에 배치하기
absolute 속성을 사용하면 문서의 흐름과 상관없이 top이나 bottom, left, right 같은 속성 값을 이용해 요소를 원하는 위치에 배치할 수 있습니다.
이때 기준이 되는 위치는 가장 가까운 부모나 조상 요소중 포지션 속성이 relative인 요소입니다.
그래서 absolute를 사용하려면 그 요소를 감싸는 <div>를 만들고 포지션을 relative로 지정한 뒤 이동을 원하는 요소를 absolute 지정해놓고 사용해야 합니다.
<예제>
|
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS 포지셔닝</title>
<style>
#wrap{
position:relative;
width:300px;
height:300px;
border:1px solid #ccc;
}
.box{
position:absolute;
width:50px;
height:50px;
background:#0094ff;
}
#crd1{ top:0; left:0; }
#crd2{ top:0; right:0; }
#crd3{ bottom:0; left:0; }
#crd4{ bottom:0; right:0; }
#crd5{ top:100px; left:100px; }
</style>
</head>
<body>
<div id="wrap">
<div class="box" id="crd1">1</div>
<div class="box" id="crd2">2</div>
<div class="box" id="crd3">3</div>
<div class="box" id="crd4">4</div>
<div class="box" id="crd5">5</div>
</div>
</body>
</html>
|
cs |
① 작은 상자를 감싸는 영역은 #wrap이라는 id 선택자를 이용해 position:relative;으로 지정합니다.
위에서 설명했던 것과 같이 absolute를 사용하려면 그 요소를 감싸는 <div>를 만들어줘야 하기 때문입니다.
② 위치를 지정할 작은 상자는. box라는 선택자를 이용해 position:absolute;로 지정합니다.
<결과>
위치를 지정할 absolute; 속성의 5번 상자가 왼쪽에서 100px, 위쪽에서 100px 떨어진 결과입니다.
이렇게 자유자재로 요소를 배치하기 위해서는 반드시 붐 요소가 relative로 지정되어야 합니다.
fixed속성-브라우저 창 기준으로 배치하기
fixed도 absolut 속성 값처럼 문서의 흐름과 상관없이 위치를 좌표로 결정합니다.
하지만 부모 요소가 아닌 브라우저 창이 기준이 됩니다.
브라우저 창의 왼쪽 위 꼭짓점을 원점으로 두고 좌표가 계산되며 한번 배치되면 fixed라는 이름처럼 브라우저 창을 스크롤하더라도 계속 고정되어 표시합니다.
<예제>
|
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS 포지셔닝</title>
<style>
#fx{
position:fixed;
top:5px;
right:5px;
width:100px;
height:100px;
background:crimson;
}
#content { width:400px; }
p { line-height:30px;}
</style>
</head>
<body>
<div id="fx"></div>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. </p>
<p>Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac... </p>
</div>
</body>
</html>
|
cs |
<결과>
브라우저 창의 높이를 줄인 후 화면을 스크롤해도 상자가 계속 같은 자리에 표시되는 것을 확인할 수 있습니다.
'CSS' 카테고리의 다른 글
| <div>태그와 <span>태그 (0) | 2020.04.13 |
|---|---|
| float속성 / float,clear (0) | 2020.04.13 |
| 여백을 조절하는 속성 / margin,padding (0) | 2020.04.12 |
| 가상 선택자 (0) | 2020.04.07 |
| 속성 선택자 (0) | 2020.04.07 |
