article search result of 'position: static' : 1

  1. 2014.04.01 [html/css] position 속성으로 정렬하기 (static, relative, absolute, fixed 차이) (11)

[html/css] position 속성으로 정렬하기 (static, relative, absolute, fixed 차이)

 

 

[html/css] position 속성으로 정렬하기 (static, relative, absolute, fixed 차이)

 

 

지난 시간엔 float 속성을 배웠는데요, float는 객체를 오른쪽 또는 왼쪽으로 정렬해서

 

레이아웃을 배치할 때 유용하다고 했습니다.

 

 [css 기초] float 속성에 대하여

 

 

 

오늘 배울 position 역시 레이아웃을 배치하거나, 객체를 위치시킬 때 사용할 수 있는 속성 입니다 

 

*position 속성은 상속되지 않음*

 

 

 position: static 

 

position: static은  초기값으로 위치를 지정하지 않을 때와 같습니다

 

보통 static은 사용할 일이 없지만, 앞에 설정된 position을 무시할 때 사용되기도 합니다.

top, bottom, left, right 속성값이 적용되지 않습니다.

 

우선 position: static 설정 할 때 html과 실행화면을 보겠습니다.

 

static.htm

 

 <html>
<head>
<style type="text/css">
#static1
{
width:100px;
height:100px;
background-color:green;
position: static;
}

#static2
{
width:100px;
height:100px;
background-color:yellow;
position: static;
}
#static3
{
width:100px;
height:100px;
background-color:red;
position: static;
}
</style>
</head>

<body>
<div id="static1">
1. static
</div>
<div id="static2">
2. static
</div>
<div id="static3">
3. static
</div>
</body>
</html>

 

 

[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 작성을 해 보겠습니다...

 

relative.htm

 

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#static
{
width:100px;
height:100px;
background-color:green;

position: static;
}

#relative2
{
width:100px;
height:100px;
background-color:yellow;
position:relative;
top:0px;
left:100px;
}
#relative3
{
width:100px;
height:100px;
background-color:red;
position:relative;
top:0px;
left:200px;
}
</style>
</head>

<body>
<div id="static">
1. static
</div>
<div id="relative2">
2. relative
</div>
<div id="relative3">
3. relative
</div>
</body>
</html>

 

[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;

}

 

absolute.htm

 

 

 <!DOCTYPE html>
<html>
<head>
<style type="text/css">
#static
{
width:100px;
height:100px;
background-color:green;

position: static;
}

#absolute2
{
width:100px;
height:100px;
background-color:yellow;
position:absolute;
top: 0px;
left:100px;
}
#absolute3
{
width:100px;
height:100px;
background-color:red;
position:absolute;
top: 0px;
left: 200px;
}
</style>
</head>

<body>
<div id="static">
1. static
</div>
<div id="absolute2">
2. absolute
</div>
<div id="absolute3">
3. absolute
</div>
</body>
</html>

 

 [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)로 설정함

 

reab.htm

 

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#relative
{
width:300px;
height:300px;
background-color:green;
position: relative;
top: 100px;
left: 100px;
}

#absolute2
{
width:100px;
height:100px;
background-color:yellow;
position:absolute;
top:0px;
left:100px;
}
#absolute3
{
width:100px;
height:100px;
background-color:red;
position:absolute;
top: 0px;
left: 200px;
}
</style>
</head>

<body>
<div id="relative">
<div id="absolute2">
2. absolute
</div>
<div id="absolute3">
3. absolute
</div>
</div>
</body>
</html>

 

실행하면, 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;

}

 

 

fixed.htm

 

 <!DOCTYPE html>
<html>
<head>
<style type="text/css">
#relative
{
width:300px;
height:300px;
background-color:green;
position: relative;
top: 100px;
left: 100px;
}

#absolute2
{
width:100px;
height:100px;
background-color:yellow;
position:absolute;
top:0px;
left:100px;
}
#fixed3
{
width:100px;
height:100px;
background-color:red;
position:fixed;
top: 0px;
right: 200px;
}
</style>
</head>

<body>
<div id="relative">
<div id="absolute2">
2. absolute
</div>
<div id="fixed3">
3. fixed
</div>
</div>
</body>
</html>

 

 

 

[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 속성으로 배치 순서 결정하기

 

[css] - DIV 태그를 이용하여 레이아웃 만들기

 

[css 기초] float 속성에 대하여

 

clear 속성에 대해 배워 보자 (clear:none, right, left, both)

 

oveflow 속성 (oveflow: visible, hidden, scroll, auto 차이)

 

'css' 카테고리의 다른 글

[html/css] overflow 속성 (overflow: visible, hidden, scroll, auto 차이)  (4) 2014.04.04
[html/css] z-index 속성으로 배치 순서 결정하기  (3) 2014.04.03
[html/css] position 속성으로 정렬하기 (static, relative, absolute, fixed 차이)  (11) 2014.04.01
[html/css] padding 속성 사용법(padding-right, padding-left, padding-top, padding-bottom)  (1) 2014.03.31
[html/css] clear 속성에 대해 배워 보자 (clear:none, right, left, both)  (2) 2014.03.26
[html/css] margin 속성 자세히 알아 보기(margin-top,margin-left, margin-bottom, margin-left 설정 방법)  (0) 2014.03.25
지구별에
tags : , , , , , ,
css 2014. 4. 1. 18:03
Trackbacks : 0, Comments : 11

댓글을 달아 주세요

  1. 함상원 2014.08.31 21:30  수정/삭제  댓글쓰기

    퍼블리셔의 매력에 빠져서 학원을 다니고 있는 학생입니다. 요즘 마크업을 하고 있는데

    position속성 부분에서 멘붕이 되어 정보를 찾던중에 이런 보물 창고를 알게 되었네요!!

    덕분에 정말 잘 이해하고 배워갑니다. 감사합니다~!

    앞으로 자주 들리게 될것 같네요^^; 자주 찾아뵙겠습니다~





  2. HANS 2014.09.19 07:54  수정/삭제  댓글쓰기

    아주 적절한 예를 사용해서 설명이 쉽군요. 감사합니다~

  3. 좋습니다 2014.12.02 17:15  수정/삭제  댓글쓰기

    이해 가기 쉽게 설명이 되었있어서 좋습니다.

  4. 애청자 2014.12.17 12:45  수정/삭제  댓글쓰기

    안녕하세요. 워드프레스로 본격적으로 홈피를 만들고 있는데 수십 수백군데 국내외 포럼, 심지어 책을 여러권 봤음에도 이렇게 초보자한테 쉽게 할 수 있는 자료는 처음 입니다. 저처럼 아무것도 모르는 사람한테 너무나 고마운 정보들입니다. 어제부터 글들 쭉 보면서 적용하고 있는데 너무 큰 도움을 받고 있어 그냥 가는것도 예의가 아닌거 같아 감사 글 남깁니다. 광고라도 있으면 몇 번 눌러드리고 싶네요 ㅎ 감사합니다. 잘 활용하겠습니다.

    • 지구별에 2014.12.17 13:20 신고  수정/삭제

      ㅎㅎ 과찬이시네요. 읽고 답글 남겨주시는 것만으로도 저에게 큰 힘이 됩니다. 저도 배우면서 쓰는 것이라... 제가 이해할 수 있는 방식으로 쓰려고 노력하고 있어요. 감사합니다^^

    • 애청자 2014.12.17 13:42  수정/삭제

      마침 계시는군요. 지금 며칠째 고민하며 잘 안되는게 있는데 div나 table로 해도 그렇고 올리신 글대로 다 해봐도 a href가 들어간 이미지가 두개가 병렬로 한 줄에 배치가 안되네요. 계속 두번째 이미지는 첫번째 이미지 하단에 위치하게 되고 있습니다. airbnb.co.kr 에서 처럼 큰 div 폭을 정해 놓고 그 안에 이미지를 병렬로 좌 우로 배치하려 하는데.. 혹시 이유를 알 수 있을까요? 감사합니다.

    • 지구별에 2014.12.17 15:52 신고  수정/삭제

      우선 div 너비+패딩+마진 크기가
      그 안에 들어가는 이미지 두개의 너비보다 큰지 확인해주셔야 할 것 같습니다
      관련글 박스 모델http://aboooks.tistory.com/admin/entry/post/?id=199 보시면 도움 되실 것 같아요

  5. 상사꽃 2016.07.12 12:20 신고  수정/삭제  댓글쓰기

    싸이월드 블로그 폭망하고 티스토리로 이사하기로 마음먹고
    레이아웃부터 잡는데 한참 애를 먹고 있었는데...
    윗분 말따라 다른 사이트는 이게 뭔소리지? 인데 드디어 여기와서 확실히 개념을 잡네요.
    감사합니다. ㅠㅠ

◀PREV 1 NEXT▶

Category

분류 전체보기 (331)
책 리뷰 (20)
세상의 모든 도서관 (14)
각종 리뷰 (30)
.......................... (0)
지구별 이야기 (15)
지구별 정원 (16)
생활백과 (7)
초보 글쓰기 (3)
............................. (0)
티스토리 툭탁툭탁 (43)
html (54)
css (124)
javascript (2)

Recent Posts

Powerd by Tistory, designed by criuce