[html/css] position 속성으로 정렬하기 (static, relative, absolute, fixed 차이)
[html/css] position 속성으로 정렬하기 (static, relative, absolute, fixed 차이)
지난 시간엔 float 속성을 배웠는데요, float는 객체를 오른쪽 또는 왼쪽으로 정렬해서
레이아웃을 배치할 때 유용하다고 했습니다.
오늘 배울 position 역시 레이아웃을 배치하거나, 객체를 위치시킬 때 사용할 수 있는 속성 입니다
*position 속성은 상속되지 않음*
position: static |
position: static은 초기값으로 위치를 지정하지 않을 때와 같습니다
보통 static은 사용할 일이 없지만, 앞에 설정된 position을 무시할 때 사용되기도 합니다.
top, bottom, left, right 속성값이 적용되지 않습니다.
우선 position: static 설정 할 때 html과 실행화면을 보겠습니다.
<html> #static2 <body> |
[position: static 실행화면입니다]
float 설정하지 않은 div는 아래처럼 정렬됩니다
position: static 설정 전과 후는 따라서 같습니다...
주의: html문서 body에 margin:0, padding:0을 따로 지정하지 않으면 아래 화면처럼
공간(파란색 부분)이 있습니다. 뒤에서 다룰 relative도 마찬가지임...
position: relative |
position: relative은 위치 계산을 할 때 static의 원래 위치부터 계산합니다.
위(top), 아래(bottom), 좌(left), 우(right)의 위치를 같이 설정할 수도 있습니다.
사용 예:
#relative
{
position: relative;
}
#relative2
{
position: relative;
top: 0px'
left: 100px;
}
html 작성을 해 보겠습니다...
<!DOCTYPE html> position: static; #relative2 <body> |
[position: relative 실행 화면입니다]
position: static 실행 화면을 같이 참조해주세요.
2번 노란 사각형은 원래의 위치에서 위 0px, 왼쪽 100px
3번 빨간 사각형은 원래의 위치에서 위 0px, 왼쪽 200px으로 지정한 것입니다.
position: absolute |
position: absolute은 relative와 달리 문서의 원래 위치와 상관없이 위치를 지정할 수 있습니다.
하지만 가장 가까운 상위 요소를 기준으로(단, static은 제외) 위치가 결정됩니다.
상위 요소가 없으면 위치는 html를 기준으로 설정됩니다.
relative와 마찬가지로 위(top), 아래(bottom), 좌(left), 우(right)의 위치를 같이 설정할 수 있습니다
사용 예:
#absolute
{
position: absolute;
top: 0px'
left: 100px;
}
<!DOCTYPE html> position: static; #absolute2 <body> |
[position:absolute 실행화면입니다]
1. static, 2. absolute(top 0px left 100px) 3 absolute(top 0px left: 200px)로 설정함
absolute는 static이나 relative와 다르게 바깥 쪽에 공간이 생기지 않습니다
위에서 absolute는 상위 요소를 기준으로 위치가 결정된다고 했습니다.
이번엔 상위에 div를 만들고 그 안에 absolute 2개를 넣어 보겠습니다.
1. relative(top 100px left 100px) 2. absolute(top 0px left 100px) 3. absolute(top 0px left 200px)로 설정함
<!DOCTYPE html> #absolute2 <body> |
실행하면, relative(녹색) 안에 설정된 absolute는 녹색 부분으로부터 시작해서 위치가 결정됨을 알 수 있습니다.
position: fixed |
position: fixed 브라우저 화면의 상대 위치입니다.
따라서 화면이 바뀌더라도 고정된 위치를 설정할 수 있습니다.(상위 요소에 영향을 받지 않음)
마찬가지로 위(top), 아래(bottom), 좌(left), 우(right)의 위치도 같이 설정할 수 있습니다.
IE7, IE8은 position: fixed 값이 적용되지 않으므로 문서 타입을 규정해주어야 합니다.
DOCTYPE 선언하는 이유와 버전별 선언 정리 (HTML5, HTML 4, XHTML)
사용 예:
#fixed
{
position: fixed;
right: 100px'
bottom: 100px;
}
<!DOCTYPE html> #absolute2 <body> |
[position: fixed 실행화면입니다]
상위 요소를 설정했는데도 fixed는 그에 영향 받지 않고 위치를 결정할 수 있습니다.
웹페이지에서 항상 따라다니는 광고나 공지가 바로 이 fixed를 설정한 객체입니다.
1. relative(top 100px left 100px) 2. absolute(top 0px left 100px) 3. fixed(top 0px right 200px)로 설정함
오늘은 position으로 레이아웃을 배치하는 법을 배워보았는데요,
다음 시간에는 여러 객체가 겹칠 때 어느 객체가 앞으로 나올지 결정하는 속성 z-index를 배워 볼게요
[html/css] z-index 속성으로 배치 순서 결정하기
clear 속성에 대해 배워 보자 (clear:none, right, left, both)
oveflow 속성 (oveflow: visible, hidden, scroll, auto 차이)
댓글을 달아 주세요
퍼블리셔의 매력에 빠져서 학원을 다니고 있는 학생입니다. 요즘 마크업을 하고 있는데
position속성 부분에서 멘붕이 되어 정보를 찾던중에 이런 보물 창고를 알게 되었네요!!
덕분에 정말 잘 이해하고 배워갑니다. 감사합니다~!
앞으로 자주 들리게 될것 같네요^^; 자주 찾아뵙겠습니다~
부족한 글인데 도움 되신다니 기쁩니다.^^ 자주 들러주세요^^*
아주 적절한 예를 사용해서 설명이 쉽군요. 감사합니다~
칭찬 감사합니다^^ 즐거운 하루 보내세요~
이해 가기 쉽게 설명이 되었있어서 좋습니다.
감사합니다.^^
안녕하세요. 워드프레스로 본격적으로 홈피를 만들고 있는데 수십 수백군데 국내외 포럼, 심지어 책을 여러권 봤음에도 이렇게 초보자한테 쉽게 할 수 있는 자료는 처음 입니다. 저처럼 아무것도 모르는 사람한테 너무나 고마운 정보들입니다. 어제부터 글들 쭉 보면서 적용하고 있는데 너무 큰 도움을 받고 있어 그냥 가는것도 예의가 아닌거 같아 감사 글 남깁니다. 광고라도 있으면 몇 번 눌러드리고 싶네요 ㅎ 감사합니다. 잘 활용하겠습니다.
ㅎㅎ 과찬이시네요. 읽고 답글 남겨주시는 것만으로도 저에게 큰 힘이 됩니다. 저도 배우면서 쓰는 것이라... 제가 이해할 수 있는 방식으로 쓰려고 노력하고 있어요. 감사합니다^^
마침 계시는군요. 지금 며칠째 고민하며 잘 안되는게 있는데 div나 table로 해도 그렇고 올리신 글대로 다 해봐도 a href가 들어간 이미지가 두개가 병렬로 한 줄에 배치가 안되네요. 계속 두번째 이미지는 첫번째 이미지 하단에 위치하게 되고 있습니다. airbnb.co.kr 에서 처럼 큰 div 폭을 정해 놓고 그 안에 이미지를 병렬로 좌 우로 배치하려 하는데.. 혹시 이유를 알 수 있을까요? 감사합니다.
우선 div 너비+패딩+마진 크기가
그 안에 들어가는 이미지 두개의 너비보다 큰지 확인해주셔야 할 것 같습니다
관련글 박스 모델http://aboooks.tistory.com/admin/entry/post/?id=199 보시면 도움 되실 것 같아요
싸이월드 블로그 폭망하고 티스토리로 이사하기로 마음먹고
레이아웃부터 잡는데 한참 애를 먹고 있었는데...
윗분 말따라 다른 사이트는 이게 뭔소리지? 인데 드디어 여기와서 확실히 개념을 잡네요.
감사합니다. ㅠㅠ