position 속성
1. position 속성 : 요소 배치 방법 지정하기
position : static | relative | absolute | fixed
텍스트나 이미지를 화면 상에 배치하기 위해 사용되는 요소이다.
position의 static 속성 값을 제외하고 나머지 속성 값은 좌표를 이용하여 요소의 배치를 지정할 수 있다.
top : 위쪽에서 얼마나 떨어져 있는지 나타낸다. 문서의 최상단이 top 0 이다.
right : 오른쪽에서 얼마나 떨어져 있는지 나타낸다. 문서의 가장 오른쪽 변이 right 0 이다.
bottom : 아래쪽에서 얼마나 떨어져 있는지 나타낸다. 문서의 하단이 bottom 0 이다.
left : 왼쪽에서 얼마나 떨어져 있는지 나타낸다. 문서의 가장 왼쪽 변이 left 0이다.
2. static 속성 값 - 문서의 흐름대로 배치하기
static 속성 값은 position 속성의 기본 값으로 좌표 속성을 사용할 수 없다는 특징이 있다.
기존의 요소들은 static 속성 값으로 지정되어 문서 상 작성된 흐름대로 배치되는 것이다.
예시와 같은 박스가 있다고 해보자.
<style>
.box {
height: 100px;
padding: 10px;
font-weight: bold;
margin: 10px;
}
.box1 {
width: 25%;
background-color: coral;
}
.box2 {
width: 65%;
background-color: cornflowerblue;
}
</style>
</head>
<body>
<div class="box box1">박스 1</div>
<div class="box box2">박스 2</div>
</body>
position 속성이 현재 static 인 상태에서는 문서 상에서 작성된 흐름대로 배치가 된다.
이 배치를 수직 구조가 아닌 수평 구조로 변경하고 싶을 때에는 float 속성을 활용할 수 있다.
<style>
.box {
height: 100px;
padding: 10px;
font-weight: bold;
margin: 10px;
}
.box1 {
width: 25%;
background-color: coral;
float: left;
}
.box2 {
width: 65%;
background-color: cornflowerblue;
float: right;
}
</style>
</head>
<body>
<div class="box box1">박스 1</div>
<div class="box box2">박스 2</div>
</body>
3. relative 속성 값 : 문서 흐름 따라 위치 지정하기
relative 속성 값은 static 속성 값처럼 문서 상에 나열한 순서대로 배치가 된다는 점에서 공통점이 있지만,
좌표 속성을 사용하여 세부적인 조정을 할 수 있다는 점에서 차이점을 가진다.
위의 예시를 position : relative 속성 값으로 변경해 보자.
<style>
.box {
height: 100px;
padding: 10px;
font-weight: bold;
margin: 10px;
}
.box1 {
width: 25%;
background-color: coral;
float: left;
}
.box2 {
width: 65%;
background-color: cornflowerblue;
float: right;
position: relative;
left: -90px;
top: 30px;
}
</style>
</head>
<body>
<div class="box box1">박스 1</div>
<div class="box box2">박스 2</div>
</body>
relative 속성 값은 예시에서도 알 수 있듯이 원래 표시되어야할 배치 장소에서부터
지정한 좌표 값을 따라 움직인다.
즉 원래 있어야 할 배치 장소가 top : 0, left : 0 이었고,
top : 30px, left : -90px 값 만큼 배치가 이동된 것이다.
4. absolute 속성 값 : 원하는 위치에 배치하기
위의 relative 속성 값은 그나마 static 의 규칙성 즉 기존의 규칙을 따르는 경향이 있었지만,
absolute 속성 값은 기존 질서를 완전히 무시한다.
즉, 문서의 흐름과는 상관 없이 좌표 속성을 이용하여 원하는 위치에 배치할 수 있는 것이다.
흐름을 무시하기 때문에 원래 있어야 할 배치 장소가 없어서 다른 요소를 기준한다.
그 기준이 되는 요소는 바로 부모나 조상 태그 중 position 속성이 relative 인 요소이다.
position : absolute 로 값을 지정하고 좌표 속성 값을 부여하지 않으면 어떻게 되는지 살펴 보자.
<style>
.wrapper {
position: relative;
width: 500px;
height: 500px;
border: 2px solid orange;
}
.box {
position: absolute;
width: 60px;
height: 60px;
}
.box1 {
background-color: crimson;
}
.box2 {
background-color: coral;
}
.box3 {
background-color: goldenrod;
}
.box4 {
background-color: lightseagreen;
}
</style>
<body>
<div class="wrapper">
<div class="box box1">박스 1</div>
<div class="box box2">박스 2</div>
<div class="box box3">박스 3</div>
<div class="box box4">박스 4</div>
<div class="box box5">박스 5</div>
</div>
</body>
모든 박스 요소들은 wrapper 라는 부모 안에 있고 wrapper 는 position 속성이 relative 이다.
때문에 wrapper 속성이 absolute 속성 들의 기준이 되는 것이다.
좌표 속성을 지정하지 않게 되면 top : 0, left : 0 가 되어 모두 한 곳에 겹쳐져 있는 것을 확인할 수 있다.
이번에 각자 좌표 값을 지정해보자.
<style>
.wrapper {
position: relative;
width: 500px;
height: 500px;
border: 2px solid orange;
}
.box {
position: absolute;
width: 60px;
height: 60px;
}
.box1 {
background-color: crimson;
top: 0;
left: 0;
}
.box2 {
background-color: coral;
top: 0;
right: 0;
}
.box3 {
background-color: goldenrod;
bottom: 0;
right: 0;
}
.box4 {
background-color: lightseagreen;
bottom: 0;
left: 0;
}
.box5 {
background-color: dodgerblue;
top: 110px;
left: 70px;
}
</style>
5. fixed 속성 값 : 브라우저 창 기준으로 배치하기
fixed 속성 값은 absolute 처럼 문서의 흐름을 무시하고 좌표로 배치를 결정하게 된다.
기준은 브라우저 창으로 브라우저 창의 왼쪽 위 꼭지점을 top : 0, left : 0 로 둔다.
fixed 속성 값으로 된 요소는 화면 상의 스크롤이 움직이더라도 기존에 지정한 좌표 값을 우선하기 때문에 고정되어 표시된다는 특징을 가진다.
<style>
.box {
position: fixed;
top: 10px;
right: 30px;
width: 60px;
height: 60px;
background-color: cornflowerblue;
}
.content {
width: 100%;
}
</style>
<body>
<div class="box"></div>
<div class="content">
아니더면, 트고, 실현에 안고, 군영과 이는 사막이다. 방지하는 크고 못할 있는 무엇이 약동하다. 피에 뭇 따뜻한 인류의 풀이 풍부하게 놀이 생의 이것이다. 꽃이 오아이스도 심장은 천고에 불어 봄바람이다. 찬미를 발휘하기 피가 못하다 내는 평화스러운 아름다우냐? 있는 사라지지 새가 인류의 품에 밥을 있는 있으랴? 하는 기관과 날카로우나 예가 사막이다. 두기 품에 있는 힘있다. 얼마나 생의 미묘한 되려니와, 어디 고행을 이성은 위하여 착목한는 이것이다.
행복스럽고 굳세게 작고 불어 얼마나 끝에 것은 사람은 말이다. 타오르고 찬미를 우리의 것이다. 창공에 그들은 끝까지 것이다. 가치를 열락의 인간의 끓는다. 있는 얼마나 피어나는 물방아 같이 이 가슴에 피부가 위하여서. 꽃이 시들어 꽃이 인간에 가슴이 방황하여도, 눈이 얼음과 피다. 그들의 크고 이상의 그것은 끝에 철환하였는가? 이상은 못할 많이 웅대한 따뜻한 봄바람이다. 싶이 든 두손을 이상을 있으랴? 열락의 거친 고행을 불어 피고, 풀이 가슴에 밥을 밝은 보라. 가슴에 기관과 같이, 인간의 찾아다녀도, 고행을 듣기만 아니한 힘차게 듣는다.
풍부하게 우는 그들의 부패를 온갖 품으며, 싶이 할지라도 이상의 있는가? 피어나는 있는 내는 것은 힘차게 오직 바이며, 대중을 예수는 힘있다. 있음으로써 사랑의 실로 위하여 못할 싹이 동력은 봄바람이다. 위하여서 무엇을 맺어, 같지 소금이라 그들은 주는 청춘의 봄바람을 때문이다. 뭇 온갖 불어 그들의 긴지라 아름다우냐? 피가 그림자는 그들을 이상의 우리는 품었기 모래뿐일 그들의 품고 것이다. 있을 우리 주며, 소리다.이것은 역사를 청춘의 사람은 불어 칼이다. 것이다.보라, 시들어 인생을 쓸쓸하랴? 싶이 끓는 대고, 우는 끓는 우리 그들은 가슴이 위하여 힘있다. 얼음과 목숨을 현저하게 품에 때문이다. 있으며, 끝까지 이는 구하기 힘차게 일월과 군영과 것이다.
</div>
</body>
스크롤바를 움직여도 지정된 장소에 있는 것을 확인할 수 있다.