HTML DIV tag: 영역의 위치 지정하는 방법과 스크롤 - 절대위치(absolute), 상대위치(relative), 고정위치(fixed)
※ 브라우저 창의 폭을 넓게 하여 스크롤을 해 보면 각 위치속성의 특징을 쉽게 볼 수 있다.
※ 위치속성이 절대위치(absolute)나 상대위치(relative)로 지정된 DIV영역이 다른 DIV 영역의 안에 들어 있다면, 픽셀(px)의 기준점은 그 상위 영역의 꼭지점이 됩니다.
그러므로, DIV 태그에 위치를 지정하면, 해당 DIV가 표시되는 위치는 웹페이지의 영역 구조 체계에 따라 다르게 표시되고, 또한, 반응형 템플릿(스킨)의 경우에는 폭이 유동적이므로, 그에 따라 해당 DIV 위치도 유동적으로 표시됩니다.
모든 조건이 동일하더라도, 브라우저에 따라서도 다르게 표시됩니다. 결론적으로 말하자면, DIV 영역에 위치를 지정하면, 접속하는 기기의 화면 해상도에 따라서, 그리고 브라우저에 따라서, 웹페이지가 엉클어질 수 있으므로, 여러 모로 검토해보고 신중하게 사용할 필요가 있겠습니다.
※ 실제로 DVI에 위치를 지정해 보면, 웹페이지(블로그 등)의 틀(레이아웃) 구조에 따라서 그리고 브라우저에 따라서 차이가 있음을 알 수 있습니다. 그러므로, 방문자들이 가장 많이 사용하는 브라우저를 기준으로 하여, 실제로 여러가지 경우를 하나하나 확인하면서 조정할 필요가 있습니다.
개인적인 의견으로는, 어떤 조건에서도 확실하다는 자신감이 없다면, 되도록 DVI에 위치 지정을 하지 않는 것이 좋을 것 같습니다. 참고로, 이 페이지를 열어 놓고 브라우저 폭을 늘였다 줄였다 해 보면, 위에서 말한 내용에 대한 감각을 얻는데 도움이 될 것입니다.
>> HTML 태그 사용법 목록: DIV P SPAN IMG A HR FONT BR ...
영역1 : Position: fixed
이곳은 DIV영역이며, 위치속성을 고정위치(Fixed, left, top)로 주었다.
창이 스크롤되어도 이 영역은 같이 스크롤되지 않고 고정되어 있다.
픽셀(px)의 기준점은 창의 왼쪽 위 꼭지점과 DIV영역의 왼쪽 위 꼭지점이다.
[태그 모양]
이곳은 DIV영역이며, 위치속성을 고정위치(Fixed, left, top)로 주었다.
창이 스크롤되어도 이 영역은 같이 스크롤되지 않고 고정되어 있다.
픽셀(px)의 기준점은 창의 왼쪽 위 꼭지점과 DIV영역의 왼쪽 위 꼭지점이다.
[태그 모양]
<div style="
position: fixed;
left: 0x;
top: 100px;
">
</div>
position: fixed;
left: 0x;
top: 100px;
">
</div>
영역2 : Position: fixed
이곳은 DIV영역이며, 위치속성을 고정위치(Fixed, right, bottom)로 주었다.
창이 스크롤되어도 이 영역은 같이 스크롤되지 않고 고정되어 있다.
픽셀의 기준점은 창의 오른쪽 아래 꼭지점과 DIV영역의 오른쪽 아래 꼭지점이다.
[태그 모양]
이곳은 DIV영역이며, 위치속성을 고정위치(Fixed, right, bottom)로 주었다.
창이 스크롤되어도 이 영역은 같이 스크롤되지 않고 고정되어 있다.
픽셀의 기준점은 창의 오른쪽 아래 꼭지점과 DIV영역의 오른쪽 아래 꼭지점이다.
[태그 모양]
<div style="
position: fixed;
right: 20px;
bottom:20px;
">
</div>
position: fixed;
right: 20px;
bottom:20px;
">
</div>
영역3 : Position: absolute
이곳은 DIV영역이며, 위치속성을 절대위치(Absolute, left, top)로 주었다. 창이 스크롤되면 이 영역도 같이 스크롤된다.
픽셀(px)의 기준점은 페이지의 왼쪽 위 꼭지점과 DIV영역의 왼쪽 위 꼭지점이다.
[태그 모양]
이곳은 DIV영역이며, 위치속성을 절대위치(Absolute, left, top)로 주었다. 창이 스크롤되면 이 영역도 같이 스크롤된다.
픽셀(px)의 기준점은 페이지의 왼쪽 위 꼭지점과 DIV영역의 왼쪽 위 꼭지점이다.
[태그 모양]
<div style="position: absolute; left: 20px; top: 250px;">
</div>
</div>
영역4 : Position: relative
이곳은 DIV영역이며, 위치속성을 상대위치(Relative, left, top)로 주었다. 창이 스크롤되면 이 영역도 같이 스크롤된다.
픽셀(px)의 기준점은 <div>태그가 있는 바로 그 지점과 DIV영역의 왼쪽 위 꼭지점이다.
[태그 모양]
이곳은 DIV영역이며, 위치속성을 상대위치(Relative, left, top)로 주었다. 창이 스크롤되면 이 영역도 같이 스크롤된다.
픽셀(px)의 기준점은 <div>태그가 있는 바로 그 지점과 DIV영역의 왼쪽 위 꼭지점이다.
[태그 모양]
<div style="position: relative; left: 200px; top: 450px;">
</div>
</div>
영역5 : Position: absolute
이곳은 DIV영역이며, 위치속성을 절대위치(Absolute, right, bottom)로 주었다. 창이 스크롤되면 이 영역도 같이 스크롤된다.
픽셀(px)의 기준점은 페이지의 오른쪽 아래 꼭지점과 DIV영역의 오른쪽 아래 꼭지점이다.
[태그 모양]
이곳은 DIV영역이며, 위치속성을 절대위치(Absolute, right, bottom)로 주었다. 창이 스크롤되면 이 영역도 같이 스크롤된다.
픽셀(px)의 기준점은 페이지의 오른쪽 아래 꼭지점과 DIV영역의 오른쪽 아래 꼭지점이다.
[태그 모양]
<div style="position: absolute; right: 20px; bottom: 600px;">
</div>
</div>
※ 위치속성이 절대위치(absolute)나 상대위치(relative)로 지정된 DIV영역이 다른 DIV 영역의 안에 들어 있다면, 픽셀(px)의 기준점은 그 상위 영역의 꼭지점이 됩니다.
그러므로, DIV 태그에 위치를 지정하면, 해당 DIV가 표시되는 위치는 웹페이지의 영역 구조 체계에 따라 다르게 표시되고, 또한, 반응형 템플릿(스킨)의 경우에는 폭이 유동적이므로, 그에 따라 해당 DIV 위치도 유동적으로 표시됩니다.
모든 조건이 동일하더라도, 브라우저에 따라서도 다르게 표시됩니다. 결론적으로 말하자면, DIV 영역에 위치를 지정하면, 접속하는 기기의 화면 해상도에 따라서, 그리고 브라우저에 따라서, 웹페이지가 엉클어질 수 있으므로, 여러 모로 검토해보고 신중하게 사용할 필요가 있겠습니다.
※ 실제로 DVI에 위치를 지정해 보면, 웹페이지(블로그 등)의 틀(레이아웃) 구조에 따라서 그리고 브라우저에 따라서 차이가 있음을 알 수 있습니다. 그러므로, 방문자들이 가장 많이 사용하는 브라우저를 기준으로 하여, 실제로 여러가지 경우를 하나하나 확인하면서 조정할 필요가 있습니다.
개인적인 의견으로는, 어떤 조건에서도 확실하다는 자신감이 없다면, 되도록 DVI에 위치 지정을 하지 않는 것이 좋을 것 같습니다. 참고로, 이 페이지를 열어 놓고 브라우저 폭을 늘였다 줄였다 해 보면, 위에서 말한 내용에 대한 감각을 얻는데 도움이 될 것입니다.
>> HTML 태그 사용법 목록: DIV P SPAN IMG A HR FONT BR ...