div태그 position의 종류

2014. 9. 12. 06:12 html과css공부

위치 결정 속성자의 종류

지난시간에 공부했든 <div> 태그의 기본적인 요소는 테이블태그 와 같은 width (넓이결정)와 height (높이결정) 속성과 속성값으로 면적을 가진 공간을 가지고자 하는 요소를 가진 태그 라고 배웠습니다. <div> </div>이렇게 태그내에 아무런 내용을 주지 않은 빈태그 일지라도 p태그와 같은 문단의 단락을 결정 해주게 된다는것도 알게 되었습니다.

넓이와 높이를 결정 하는 스타일을 주면 table태그 처럼 스타일 속성값 만큼의 면적을 갖게 되는 공간 확보 요소를 가지고 있죠

오늘은 div의 레이아웃의 위치를 결정 하는 속성자와 속성값의 종류를 간단한 예제를 통해 알아 보도록 하겠습니다.

우선 레이아웃의 위치를 결정하는 속성자로는 크게 float 과 position으로 나눌수가 있겠 습니다.

float 속성자

이제 div에 속성과스타일로 면적을 갖게된 레이아웃이 완성되었다면 페이지내에 어디에 배치하여야 사용 목적을 최대한 끌어 올릴수 있을지를 결정 하는 순서로 넘어 가게 됩니다.

이때 위치를 결정 해주는 속성자들은 여러가지 이며 어떤 속성자를 쓰느냐에 따라 효율적이며 빠른 작업효과를 기대 할수 있게 되기 때문에 속성자의 종류와 그들의 성격을 꿰뚫고 있어야 하겠지요

float 은 left 와 right 의 값으로 나타내게 되는데 레이아웃의 구성이 큰 홈페이지의 freame분할 처럼 큰영역의 위치를 결정 하는데 활용 하기에 용이한 엘리먼트라고 할수가 있을것 같습니다.

그렇다고 세분화작업 과정에서 사용 하지 않는것은 아니며 inline-block과 같이 가로 정렬 을 위한 레이아웃 설정 시 에 많이 사용 합니다.

<div> 태그에 사용 하는 위치 속성자 float 의 값에는 top bottom 값이 없는 이유는<div>태그 는 블록의 구조이기 때문에 top과 bottom은 기본적으로 적용이 되어 지기 때문입니다.

위나 아래에 공간이 있을 경우에만 자리를 잡게 되며 body 의 가로 면적에 영향을 받게 됩니다.

상위에 존재하는<div>의 영역이 있고 공간이 있을때 상위<div>의 영역의 옆에 left 값으로 위치 시켜 주는 식이 되는 것이죠

그렇기 때문에 left 나 right 만으로 값을 충족 시키게 됩니다.

clear 속성자

<div>태그의 기본성질은 아무런 값을 주지 않을 경우 바디에 대해 좌측 상부를 기준으로 상하로
따닥따닥 붙어서 레이아웃 되어지는 성질을 가진 블록요소로 이때 상하좌우에 마진값을 주어 여백을 결정 해 줄수 있습니다.

그리고 이때 상부 레이 아웃의 위치에서 벗어 나기 위해 사용하는 속성자가 바로 clear속성자라고 할수 있습니다.

즉 clear속성자는 float속성 해제 속성자 라고 할수 있습니다.

상위의 영역에 float 속성이 주어졌을 경우 영향에서 벗어나기 위한 clear 엘리 먼트는 다음 세가지 속성값을 가지게 됩니다.

clear:left, float:left 벗어나기

clear:right, float:right 벗어나기

clear:both 상위 float 전체벗어나기

이렇게 값을 주면 대응 하는 상위태그 float의 영향을 받지 않게 되는 것입니다.

clear속성은 오직 float 값에만 대응 합니다.

그럼 예제를 만들어 float속성자와 clear속성자가 레이 아웃에 어떻게 적용 되는지 알아 보겠습니다.

가로340px 세로550px 크기 적색라인의 박스를 body로 생각 하고 마크업을 해 보도록 하겠습니다.

우선 스타일을 먼저 주도록 하겠습니다.

float:left속성 이 없는 기본 스타일 대로 마크업을 합니다.

<style>

body{margin:0px; padding:0px;}

.t-wrap{width:340px; height:550px;}

.tu{width:340px; height:550px; margin:25px 0px; border:1px solid red; position:relative;}

.taa,.tab,.tac,.tad,.tae{width:100px; height:100px; border:1px solid red; text-align:center; padding-top:35px; margin-left:5px; layout:fixed;}

.taa{background-color:red;}

.tab{background-color:green;}

.tac{background-color:blue;}

.tad{background-color:gray;}

.tae{background-color:lime;}

</style>

html 소스

</div>

margin-left:5px; 기본 레이어

결과에서 보았듯이 div태그의 블록 성질과 margin속성 값 때문에 바디로 부터 좌측 5px 간격을 두고 층을 이루어 상하로 붙어서 나열 됩니다.
이제 세로로 정렬 된 것을 가로로 정렬 해 봅니다.

<style>

body{margin:0px; padding:0px;}

.t-wrap{width:340px; height:550px;}

.tu{width:340px; height:550px; margin:auto; border:1px solid red; position:relative;}

.taa,.tab,.tac,.tad,.tae{width:100px; height:100px; border:1px solid red; text-align:center; padding-top:35px; float:left; margin-left:px; layout:fixed;}

.taa{background-color:red;}

.tab{background-color:green;}

.tac{background-color:blue;}

.tad{background-color:gray;}

.tae{background-color:lime;}

</style>

아래는 html 태그 소스 입니다.

float:left;margin-left:2px; float 선언 레이어

float:left;라는 마크업에 따라 바디의 왼쪽상단 탑에서 시작해 순서대로 가로로 위치를 갖게 됩니다.

margin속성은 외부에 대한 간격을 제어 하는 요소 입니다.

margin-left:2px; 이 마크업에의해 박스들이 왼쪽에서 2px만큼 간격을 가지고 위치 하게 된다는걸 알수 있습니다.

그러다 보니 바디의 넓이 보다 레이어 전체의 넓이가 더 크버려서 마지막 e레이어가 아래로 내려 오게 됩니다.

그럼 이번엔 위의 레이 아웃에서 b박스를 a박스 아래쪽으로 붙혀서 레이아웃 시켜보도록 하겠습니다.

<style>

body{margin:0px; padding:0px;}

.t-wrap{width:340px; height:550px;}

.tu{width:340px; height:550px; margin:25px 0px; border:1px solid red; position:relative;}

.taa,.tab,.tac,.tad,.tae{width:100px; height:100px; border:1px solid red; text-align:center; padding-top:35px; float:left; margin:left:2px; layout:fixed;}

.taa{background-color:red;}

.tab{background-color:green;}

.tac{background-color:blue;}

.tad{background-color:gray;}

.tae{background-color:lime;}

</style>

아래는 clear속성자를 이용해 코딩한 html태그 소스 입니다.

아래는 결과 입니다.

Clear:both; b 레이어 clear 선언

b레이어에 clear;both를 하게 되면 결과에서 처럼 b레이어가 블록요소 성질이 복원 되면서 아래로 내려와 원래 자리에 위치 하게 되겠죠 그런데 위 style선언 float:left가 아직 작용을 하고 있기 때문에 오른쪽 c부터 e레이어들은 b에 붙어서 한칸 아래쪽으로 같이 내려오게 됩니다.

Clear:both; e 레이어 clear 선언

Clear:both; c 와 e 레이어 clear 선언

Clear:both; b와 d와 e 레이어 clear 선언

Clear:both; b 와 c 와 e레이어 clear 선언

Clear:both; b 와 c 와 d 와 e레이어 clear 선언

지금 까지 레이어 들의 위치를 지정 하는 방법 으로 margin속성 과 float속성 그리고 clear속성 을 이용 해 위치를 지정 해 주었 습니다.

이제 부터는 position element의 속성으로 레이 아웃 해 보도록 합니다.

position엘리먼트의 속성자 종류

position엘리먼트의 속성자로 static,absolute, relative,fixed,4가지의 속성자를 가지고 있으며 각각의 사용 목적에 따라 이용 합니다.

static:현재 배열 한 자리 기준으로 고정되며 아무런 위치값을 가지지 않습니다.

absolute:절대 위치로 결정되며 body를 기준으로 top, bottom, left, right 속성자로 위치를 결정 해 주게 됩니다.

relative:상대위치로 결정되며 상위의 값을 기준으로 top, bottom, left, right속성자로 위치를 결정 해주게 됩니다.

fixed:절대위치인 body값이 기준이 되며 left와 right의 속성자만이 위치를 결정 해주게 되며 스크롤이 움직여도 항상 고정된 값을 가지게 됩니다.

현재 제 블로그에 설명용으로 만든 레이 아웃들은 설명을 위해 제가 임의대로 결과를 조금 조작해 만든 것으로 바같의 빨간실선으로 된 큰 사각을 바디라고 가정하여 꾸민 레이아웃들 입니다.

깨끗한 문서에 position 속성자를 적용 했을 경우 나타나게 되는 레이 아웃 입니다.

아래는 기본적인 html 문서의 모습대로 마크업 시켜 속성별로 각 각 개별적인 문서들을 만들어 보았습니다.

순서는 div레이어에 적용될 스타일과 div태그 와 그리고 레이아웃된 결과로 나타내게 됩니다.

참고로 layout:fixed라는 소스는 원래 table-layout:fixed로 테이블 테그에 사용 되는 속성값 으로 셀안의 텍스트나 콘텐츠에 의해 셀이 늘어 나는 것을 방지 하도록 만든 속성값이고요 제가 이 값을 div태그에 적용한 것으로 여기서는 div 크기가 텍스트나 콘텐츠에 영향을 받지 않도록 방지한 것입니다.

이속성의 경우 확실하지는 않지만 일부 브라우져의 경우 적용이 되지 않는 것 같습니다.

참고 해 주시길 바랍니다.

position 속성자 레이 아웃 예제



<html>
<meta charset="UTF-8">
<title> 속성값 없는기본배열</title>
<head>
<style>
body{margin:0px; padding:0px;}
#da,#db,#dc,#dd,#de{width:100px; height:100px; border:1px solid red; text-align:center; padding-top:35px; layout:fixed;}
#da{background-color:red;}
#db{background-color:green;}
#dc{background-color:blue;}
#dd{background-color:gray;}
#de{background-color:lime;}
</style>
</head>
<body>
<div id="da">a</div>
<div id="db">b</div>
<div id="dc">c</div>
<div id="dd">d</div>
<div id="de">e</div>
</body>
</html>

결과)

위에 만들어진 레이아웃의 기본 배열은 넓이와 높이 값으로 면적을가진 레이어를 에디터의 글쓰기 순서에 의해 배치한 레이어 들인데요 div태그의 속성은 블록레벨 속성으로 마크업되는 순서에 따라 좌측 상부를 기준으로 해서 아래로 따닥 따닥 붙어서 자리를 잡게 됩니다.

그럼 이 레이어 들에 position속성자를 사용 하지 않고 margin속성 값 만으로 위치를 배열 해 보도록 합니다.
전체 레이어에 margin left:50px top 50px의 값을 각 레이어에 줘 보도록 하겠습니다.


<html>
<head>
<meta charset="UTF-8">
<title> 기본배열 에 margin left50px top50px설정</title>
<style>
body{margin:0px; padding:0px;}
#da,#db,#dc,#dd,#de{width:100px; height:100px; border:1px solid red; text-align:center; padding-top:35px; layout:fixed;  display:margin:50px 0px 0px 50px;}
#da{background-color:red;}
#db{background-color:green;}
#dc{background-color:blue;}
#dd{background-color:gray;}
#de{background-color:lime;}
</style>
</head>
<body>
<div id="da">a</div>
<div id="db">b</div>
<div id="dc">c</div>
<div id="dd">d</div>
<div id="de">e</div>
<div style="clear:both;">
</div>
</body>
</html>

결과)

위의 결과에서 알수 있는것처럼 상위의 레이어들을 기준으로 각 레이어 들이 적용한 값만큼 이동 한것을 알수 있습니다.

참고로 마진속성은 레이어 외부의 타 레이어에 대한 공간을 의미 하며 margin:50px 0px 0px 50px 이렇게 값을 준 경우 적용되는 값들은 상.우.하.좌에 각각 대응 하게 됩니다.

따라서 상부에서 50픽셀 우측은 값이 없음 하부 역시 값이 없음으로 현상태가 유지되며 좌측으로부터 50픽셀 거리만큼 각레이어 들에 적용 됩니다.

이때 마진속성이 가지는 것과 relative속성이 가지는 값을 비교 해보면 마진은 바로위의 레이어가 기준이 되므로 각각의 레이어들이 자신들이 타 레이어들에 대해 주체와 객체로 작용하여 공간을 가지게 된다는 것을 알수 있습니다.

반면 relative의 경우 상위 레이어가 아닌 현재의 위치를 기준으로 각각 이동 하므로 모두 똑같은 값만큼 이동 한것을 아래 relative 예제에서 확인 할수 있습니다.

padding 속성은 레이어 내부에 존재하는 텍스트나 콘텐츠와의 간격을 의미 하는 것입니다.

이번엔 기본값에 position:static left:50px top:50px의 값을 각 레이어에 줘 보도록 하겠습니다.


<html>
<head>
<meta charset="UTF-8">
<title>기본배열에 position:static left 50px top 50px값 설정</title>
<style>
body{margin:0px; padding:0px;}
#da,#db,#dc,#dd,#de{width:100px; height:100px; border:1px solid red; text-align:center; padding-top:90px; layout:fixed;position:static; left:50px; top:50px;}
#da{background-color:red;}
#db{background-color:green;}
#dc{background-color:blue;}
#dd{background-color:gray;}
#de{background-color:lime;}
</style>
</head>
<body>
<div id="da">a</div>
<div id="db">b</div>
<div id="dc">c</div>
<div id="dd">d</div>
<div id="de">e</div>
</body>
</html>

결과)

static:현재 배열 한 자리 기준으로 고정되며 아무런 값을 가지지 않습니다.

위에 서 확인 해본 결과는 static의 속성은 아무런 변화를 일으키지 않는 다는 것을 알수가 있겠네요

이번에는 기본값에 absolute left:50px top 50px의 값을 각 레이어에 줘 보도록 하겠습니다.

<html>
<head>
<meta charset="UTF-8">
<title> position:absolute left 50px top 50px설정</title>
<style>
body{margin:0px; padding:0px;}
#da,#db,#dc,#dd,#de{width:100px; height:100px; border:1px solid red; text-align:center; padding-top:35px; layout:fixed; position:absolute; left:50px; top:50px;}
#da{background-color:red;}
#db{background-color:green;}
#dc{background-color:blue;}
#dd{background-color:gray;}
#de{background-color:lime;}
</style>
</head>
<body>
<div id="da">a</div>
<div id="db">b</div>
<div id="dc">c</div>
<div id="dd">d</div>
<div id="de">e</div>
<div style="clear:both;">
</body>
</html>

결과)

absolute:절대 위치로 결정되며 body를 기준으로 top, bottom, left, right 속성자로 위치를 결정 해 주게 됩니다.

결과를 보면 알수 있듯이 절대 위치인 body를 기준으로 top, bottom, left, right 속성자로 위치를 결정 해 주게 된다는 걸 알수 있습니다.

현재 모든 레이어들은 바디를 기준으로 위치를 이동 함으로 맨 아래쪽 레이어 나 상위 쪽의 레이어 모두 한 좌표로 이동 하여 모두 같은 좌표 위에 포개져 있어 가려진 레이어들은 볼수가 없는 상태 가 되었죠.

이번에는 기본값에 relative left:50px top 50px의 값을 각 레이어에 줘 보도록 하겠습니다.

<html>
<head>
<meta charset="UTF-8">
<title> position:relative
 left50px top50px설정</title>
<style>
body{margin:0px; padding:0px;}
#da,#db,#dc,#dd,#de{width:100px; height:100px; border:1px solid red; text-align:center; padding-top:35px; layout:fixed; 
position:relative;left:50px; top:50px;
}
#da{background-color:red;}
#db{background-color:green;}
#dc{background-color:blue;}
#dd{background-color:gray;}
#de{background-color:lime;}
</style>
</head>
<body>
<div id="da">a</div>
<div id="db">b</div>
<div id="dc">c</div>
<div id="dd">d</div>
<div id="de">e</div>
<div style="clear:both;">
</div>
</body>
</html>

결과)

위의 결과에서 알수 있는것처럼 모든 레이들이 현재의 위치에서 각 레이어 들이 relative 속성자가 가르키는 값인 왼쪽에서 50px거리만큼 상부에서 50px 거리만큼 적용한 값으로 이동 한것을 알수 있습니다.

기본값에 fixed left:75px top:340px의 값을 각 레이어에 줘 보도록 하겠습니다.


<html>
<head>
<meta charset="UTF-8"> 
<title> position:fixed left75px top340px설정</title>
<style> 
body{margin:0px; padding:0px;}
#da,#db,#dc,#dd,#de{width:60px; height:30px; border:1px solid red; text-align:center; padding-top:35px; layout:fixed; 
position:fixed;left:75px; top:340px;
} 
#da{background-color:red;}
#db{background-color:green;}
#dc{background-color:blue;}
#dd{background-color:gray;}
#de{background-color:lime;} 
</style>
</head>
<body>
<div id="da">a</div>
<div id="db">b</div>
<div id="dc">c</div>
<div id="dd">d</div>
<div id="de">e</div>
</body>
</html>

충돌이 일어나 이부분은 토글을 중지 합니다.

위의 결과에서 보는것 처럼 fixed값은 절대 위치인 body를 기준으로 상,하,좌,우 방향의 값을 가지게 되는 것은 absloute와 동일 하지만 스크롤이 움직여도 바디의 탑 위치에서 고정 되어 있다는것을 알수가 있습니다.

그린색에 빨간글씨로 click이라고 적혀 있는 메뉴 버튼이 왼쪽 스크롤 에도 상단에 그대로 고정 되어 있는 것을 볼수 있습니다.

스크롤을 상하로 움직이면 바탕만 움직일뿐 버튼은 항상 그자리에 고정 되어 있다는 것을 확인 할수가 있는데요 바로 절대 위치 fixed 속성때문입니다.

이 메뉴버튼을 클릭하면 스크립트 토글에 의해 슬라이드창이 열리고 링크메뉴들이 펼쳐 지게 됩니다 만 아래 마크업 과 충돌이 되는 관계로 레이어 컷 합니다.

position속성자를 사용해 지금 까지는 레어어 전체에 공통으로 설정 한 값들을 이번에는 각각의 레이어 들에 다른 값을 주어 위치의 변화를 살펴 보도록 합니다.

그리고 고정된 값을 가지고 속성값에 아무런 영향을 받지 않는 static 속성자는 생략 하도록 합니다.

우선 absolute 의 위치 변화를 살펴 보도록 하겠습니다

이번에는 기본값에 absolute left:50px의 값을 주고 top 의 값을 레이어마다 각 각 다르게 줘서 숨겨진 레이어들을 펼쳐 보도록 하겠습니다.

<html>
<head>
<meta charset="UTF-8"> 
<title> left 50px top 의 값을 각각 다르게 설정</title> 
<style> 
body{margin:0px; padding:0px;}
#da,#db,#dc,#dd,#de{width:100px; height:100px; border:1px solid red; 
text-align:center; padding-top:35px; layout:fixed;}
#da{background-color:red;position:absolute; left:50px; top:0px;
}
#db{background-color:green;position:absolute; left:50px; top:100px;
}
#dc{background-color:blue;position:absolute; left:50px; top:200px;
}
#dd{background-color:gray;position:absolute; left:50px; top:300px;
}
#de{background-color:lime;position:absolute; left:50px; top:400px;
}
</style>
</head>
<body>
<div id="da">a</div>
<div id="db">b</div>
<div id="dc">c</div>
<div id="dd">d</div>
<div id="de">e</div>
</body>
</html>

결과)

absolute :절대 위치로 결정되며 body를 기준으로 top, bottom, left, right 속성자로 위치를 결정 해 주게 됩니다.

결과를 보면 알수 있듯이 절대 위치인 body를 기준으로 top, bottom, left, right 속성자들로 위치를 결정 해 주게 된다는 걸 알수 있습니다.

기존의 한 좌표 위에 포개져 있어 가려진 레이어들은 볼수가 없었습니다만 숨겨진 상태 의 레이어 들에 절대 위치를 기준으로 각각 다른 값을 주어 레이어 들의 펼쳐진 모습을 볼수 있게 되었 습니다..

이번에는 기본값에 relative left:100px top 0px의 값을 각 레이어에 줘 보도록 하겠습니다.

<html>
<head>
<meta charset="UTF-8">
<title> relative left100px top0px설정</title>
<style>
body{margin:0px; padding:0px;}
#da,#db,#dc,#dd,#de{width:100px; height:100px; border:1px solid red; text-align:center; padding-top:35px; layout:fixed;
}
#da{background-color:red;position:relative; left:50px; top:0px;
}
#db{background-color:green;position:relative; left:50px; top:50px;
}
#dc{background-color:blue;position:relative; left:50px; top:100px;
}
#dd{background-color:gray;position:relative; left:50px; top:150px;
}
#de{background-color:lime;position:relative; left:50px; top:200px;
}
</style>
</head>
<body>
<div id="da">a</div>
<div id="db">b</div>
<div id="dc">c</div>
<div id="dd">d</div>
<div id="de">e</div>
</body>
</html>

결과)

위의 결과에서 알수 있는것처럼 현재 위치에서 각 레이어 들이 적용한 값으로 이동 한것을 알수 있습니다.

<html>
<meta charset="UTF-8">
<title> 속성값 없는 기본배열</title>
<head>
<style>
body{margin:0px; padding:0px;}
#da,#db,#dc,#dd,#de{width:100px; height:100px; border:1px solid red; text-align:center; padding-top:35px; layout:fixed;}
#da{background-color:red;}
#db{background-color:green;}
#dc{background-color:blue;}
#dd{background-color:gray;}
#de{background-color:lime;}
</style>
</head>
<body>
<div id="da">a</div>
<div id="db">b</div>
<div id="dc">c</div>
<div id="dd">d</div>
<div id="de">e</div>
</body>
</html>

결과)


<html>
<head>
<meta charset="UTF-8">
<title> 기본배열 에 margin left50px top50px설정</title>
<style>
body{margin:0px; padding:0px;}
#da,#db,#dc,#dd,#de{width:100px; height:100px; border:1px solid red; text-align:center; padding-top:35px; layout:fixed;  display:margin:50px 0px 0px 50px;}
#da{background-color:red;}
#db{background-color:green;}
#dc{background-color:blue;}
#dd{background-color:gray;}
#de{background-color:lime;}
</style>
</head>
<body>
<div id="da">a</div>
<div id="db">b</div>
<div id="dc">c</div>
<div id="dd">d</div>
<div id="de">e</div>
<div style="clear:both;">
</div>
</body>
</html>

결과)

위의 결과에서 알수 있는것처럼 상위의 레이어들을 기준으로 각 레이어 들이 적용한 값만큼 이동 한것을 알수 있습니다.

따라서 상부에서 50픽셀 우측은 값이 없음 하부 역시 값이 없음으로 현상태가 유지되며 좌측으로부터 50픽셀 거리만큼 각레이어 들에 적용 됩니다.

padding 속성은 레이어 내부에 존재하는 텍스트나 콘텐츠와의 간격을 의미 하는 것입니다.

이번엔 기본값에 position:static left:50px top:50px의 값을 각 레이어에 줘 보도록 하겠습니다.


<html>
<head>
<meta charset="UTF-8">
<title>기본배열에 static left 50px top 50px값 설정</title>
<style>
body{margin:0px; padding:0px;}
#da,#db,#dc,#dd,#de{width:100px; height:100px; border:1px solid red; text-align:center; padding-top:90px; layout:fixed;
position:static; left:50px; top:50px;
}
#da{background-color:red;}
#db{background-color:green;}
#dc{background-color:blue;}
#dd{background-color:gray;}
#de{background-color:lime;}
</style>
</head>
<body>
<div id="da">a</div>
<div id="db">b</div>
<div id="dc">c</div>
<div id="dd">d</div>
<div id="de">e</div>
</body>
</html>

결과)

static:현재 배열 한 자리 기준으로 고정되며 아무런 값을 가지지 않습니다.

위에 서 확인 해본 결과는 static의 속성은 아무런 변화를 일으키지 않는 다는 것을 알수가 있겠네요

이번에는 기본값에 absolute left:50px top 50px의 값을 각 레이어에 줘 보도록 하겠습니다.

<html>
<head>
<meta charset="UTF-8">
<title> absolute left 50px top 50px설정</title>
<style>
body{margin:0px; padding:0px;}
#da,#db,#dc,#dd,#de{width:100px; height:100px; border:1px solid red; text-align:center; padding-top:35px; layout:fixed; 
position:absolute; left:50px; top:50px;
}
#da{background-color:red;}
#db{background-color:green;}
#dc{background-color:blue;}
#dd{background-color:gray;}
#de{background-color:lime;}
</style>
</head><body>
<div id="da">a</div>
<div id="db">b</div>
<div id="dc">c</div>
<div id="dd">d</div>
<div id="de">e</div>
<div style="clear:both;">
</body>
</html>

결과)

absolute:절대 위치로 결정되며 body를 기준으로 top, bottom, left, right 속성자로 위치를 결정 해 주게 됩니다.

결과를 보면 알수 있듯이 절대 위치인 body를 기준으로 top, bottom, left, right 속성자로 위치를 결정 해 주게 된다는 걸 알수 있습니다.

이번에는 기본값에 relative left:50px top 50px의 값을 각 레이어에 줘 보도록 하겠습니다.

<html>
<head>
<meta charset="UTF-8">
<title> relative left50px top50px설정</title>
<style>
body{margin:0px; padding:0px;}
#da,#db,#dc,#dd,#de{width:100px; height:100px; border:1px solid red; text-align:center; padding-top:35px; layout:fixed; 
position:relative;left:50px; top:50px;
}
#da{background-color:red;}
#db{background-color:green;}
#dc{background-color:blue;}
#dd{background-color:gray;}
#de{background-color:lime;}
</style>
</head>
<body>
<div id="da">a</div>
<div id="db">b</div>
<div id="dc">c</div>
<div id="dd">d</div>
<div id="de">e</div>
</body>
</html>

결과)

기본값에 fixed left:75px top:340px의 값을 각 레이어에 줘 보도록 하겠습니다.


<html>
<head>
<meta charset="UTF-8">
<title> fixed left 75px top 340px설정</title>
<style>
body{margin:0px; padding:0px;}
#da,#db,#dc,#dd,#de{width:60px; height:30px; border:1px solid red; text-align:center; padding-top:35px; layout:fixed; 
position:fixed;left:75px; top:340px;
}
#da{background-color:red;}
#db{background-color:green;}
#dc{background-color:blue;}
#dd{background-color:gray;}
#de{background-color:lime;}
</style>
</head>
<body>
<div id="da">a</div>
<div id="db">b</div>
<div id="dc">c</div>
<div id="dd">d</div>
<div id="de">e</div>
</body>
</html>

결과)

그린색에 빨간글씨로 click이라고 적혀 있는 버튼 메뉴가 왼쪽 상단에 있는 것을 볼수 있습니다.

스크롤을 상하로 움직이면 바탕만 움직일뿐 버튼은 항상 그자리에 고정 되어 있다는 것을 확인 할수가 있죠 바로 fixed 속성때문입니다.

이 메뉴버튼을 클릭하면 스크립트 토글에 의해 슬라이드창이 열리고 링크메뉴들이 펼쳐 지게 됩니다.

그리고 고정된 값을 가지고 있는 fixed와 속성값에 아무런 영향을 받지 않는 static속성자들은 생략 하도록 합니다.

우선 absolute 의 위치 변화를 살펴 보도록 하겠습니다

이번에는 기본값에 absolute left:50px의 값을 주고 top 의 값을 레이어마다 각 각 다르게 줘서 숨겨진 레이어들을 펼쳐 보도록 하겠습니다.

<html>
<head>
<meta charset="UTF-8">
<title> absolute left 50px top 의 값을 각각 다르게 설정</title>
<style>
body{margin:0px; padding:0px;}
#da,#db,#dc,#dd,#de{width:100px; height:100px; border:1px solid red; text-align:center; padding-top:35px; layout:fixed;}
#da{background-color:red;
position:absolute; left:50px; top:0px;
}
#db{background-color:green;position:absolute; left:50px; top:100px;
}
#dc{background-color:blue;position:absolute; left:50px; top:200px;
}
#dd{background-color:gray;position:absolute; left:50px; top:300px;
}
#de{background-color:lime;position:absolute; left:50px; top:400px;
}
</style>
</head>
<body>
<div id="da">a</div>
<div id="db">b</div>
<div id="dc">c</div>
<div id="dd">d</div>
<div id="de">e</div>
</body>
</html>

결과)

absolute :절대 위치로 결정되며 body를 기준으로 top, bottom, left, right 속성자로 위치를 결정 해 주게 됩니다.

결과를 보면 알수 있듯이 절대 위치인 body를 기준으로 top, bottom, left, right 속성자들로 위치를 결정 해 주게 된다는 걸 알수 있습니다.

이번에는 기본값에 relative left:100px top 0px의 값을 각 레이어에 줘 보도록 하겠습니다.

<html>
<head>
<meta charset="UTF-8">
<title> relative left100px top0px설정</title>
<style>
body{margin:0px; padding:0px;}
#da,#db,#dc,#dd,#de{width:100px; height:100px; border:1px solid red; text-align:center; padding-top:35px; layout:fixed;
}
#da{background-color:red;
position:relative; left:50px; top:0px;
}#db{background-color:green;position:relative; left:50px; top:50px;
}
#dc{background-color:blue;
position:relative;left:50px; top:100px;
}
#dd{background-color:gray;position:relative; left:50px; top:150px;
}
#de{background-color:lime;position:relative; left:50px; top:200px;
}
</style>
</head>
<body>
<div id="da">a</div>
<div id="db">b</div>
<div id="dc">c</div>
<div id="dd">d</div>
<div id="de">e</div>
</body>
</html>

결과)

위의 결과에서 알수 있는것처럼 현재 위치에서 각 레이어 들이 적용한 값으로 이동 한것을 알수 있습니다.
오늘은 여기까지 공부 하도록 하고 다음시간에는 inline-block과 span의 차이에 대해서 알아보도록 하겠습니다.

저작자표시 비영리 변경금지

T,back: Comment:

일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

공부 하는남자

div태그 position의 종류

티스토리툴바