HTML DIV tag: 영역의 위치 지정하는 방법과 스크롤 - 절대위치(absolute), 상대위치(relative), 고정위치(fixed)

※ 브라우저 창의 폭을 넓게 하여 스크롤을 해 보면 각 위치속성의 특징을 쉽게 볼 수 있다.
영역1 : Position: fixed

이곳은 DIV영역이며, 위치속성을 고정위치(Fixed, left, top)로 주었다.

창이 스크롤되어도 이 영역은 같이 스크롤되지 않고 고정되어 있다.

픽셀(px)의 기준점은 창의 왼쪽 위 꼭지점과 DIV영역의 왼쪽 위 꼭지점이다.

[태그 모양]
<div style="
position: fixed;
left: 0x;
top: 100px;
">
</div>
영역2 : Position: fixed

이곳은 DIV영역이며, 위치속성을 고정위치(Fixed, right, bottom)로 주었다.

창이 스크롤되어도 이 영역은 같이 스크롤되지 않고 고정되어 있다.

픽셀의 기준점은 창의 오른쪽 아래 꼭지점과 DIV영역의 오른쪽 아래 꼭지점이다.

[태그 모양]
<div style="
position: fixed;
right: 20px;
bottom:20px;
">
</div>
영역3 : Position: absolute

이곳은 DIV영역이며, 위치속성을 절대위치(Absolute, left, top)로 주었다. 창이 스크롤되면 이 영역도 같이 스크롤된다.

픽셀(px)의 기준점은 페이지의 왼쪽 위 꼭지점과 DIV영역의 왼쪽 위 꼭지점이다.

[태그 모양]
<div style="position: absolute; left: 20px; top: 250px;">
</div>
영역4 : Position: relative

이곳은 DIV영역이며, 위치속성을 상대위치(Relative, left, top)로 주었다. 창이 스크롤되면 이 영역도 같이 스크롤된다.

픽셀(px)의 기준점은 <div>태그가 있는 바로 그 지점과 DIV영역의 왼쪽 위 꼭지점이다.

[태그 모양]
<div style="position: relative; left: 200px; top: 450px;">
</div>
영역5 : Position: absolute

이곳은 DIV영역이며, 위치속성을 절대위치(Absolute, right, bottom)로 주었다. 창이 스크롤되면 이 영역도 같이 스크롤된다.

픽셀(px)의 기준점은 페이지의 오른쪽 아래 꼭지점과 DIV영역의 오른쪽 아래 꼭지점이다.

[태그 모양]
<div style="position: absolute; right: 20px; bottom: 600px;">
</div>



































































※ 위치속성이 절대위치(absolute)나 상대위치(relative)로 지정된 DIV영역이 다른 DIV 영역의 안에 들어 있다면, 픽셀(px)의 기준점은 그 상위 영역의 꼭지점이 됩니다.

그러므로, DIV 태그에 위치를 지정하면, 해당 DIV가 표시되는 위치는 웹페이지의 영역 구조 체계에 따라 다르게 표시되고, 또한, 반응형 템플릿(스킨)의 경우에는 폭이 유동적이므로, 그에 따라 해당 DIV 위치도 유동적으로 표시됩니다.

모든 조건이 동일하더라도, 브라우저에 따라서도 다르게 표시됩니다. 결론적으로 말하자면, DIV 영역에 위치를 지정하면, 접속하는 기기의 화면 해상도에 따라서, 그리고 브라우저에 따라서, 웹페이지가 엉클어질 수 있으므로, 여러 모로 검토해보고 신중하게 사용할 필요가 있겠습니다.

※ 실제로 DVI에 위치를 지정해 보면, 웹페이지(블로그 등)의 틀(레이아웃) 구조에 따라서 그리고 브라우저에 따라서 차이가 있음을 알 수 있습니다. 그러므로, 방문자들이 가장 많이 사용하는 브라우저를 기준으로 하여, 실제로 여러가지 경우를 하나하나 확인하면서 조정할 필요가 있습니다.

개인적인 의견으로는, 어떤 조건에서도 확실하다는 자신감이 없다면, 되도록 DVI에 위치 지정을 하지 않는 것이 좋을 것 같습니다. 참고로, 이 페이지를 열어 놓고 브라우저 폭을 늘였다 줄였다 해 보면, 위에서 말한 내용에 대한 감각을 얻는데 도움이 될 것입니다.

>> HTML 태그 사용법 목록: DIV P SPAN IMG A HR FONT BR ...

주인으로 삽시다 !
우리 스스로와 사랑하는 후세대를 위하여 !
사람(人) 민족 조국을 위하여 !!



《조로공동선언 : 2000년 7월 19일 평양》
반제자주 다극세계 창설 - 공정하고 합리적인 국제질서 수립



>> 조선 땅을 점령함 : 점령자(침략자) 미제국 맥아더 포고령

>> 한국인 마루타 : 주한미군 세균전 실체

>> 강제 백신(예방) 접종 : 강제 인구감축 대량학살 무기

>> 끊임없이 전쟁을 부추기는 피아트 머니 - 사기.착취.략탈.강탈 도구

>> 현금금지(캐시리스) 전자화폐(CBDC 씨비디씨) 특별인출권(에스디알)

>> 미국 달러 몰락, IMF SDR 특별인출권 국제기축통화 부상과 금

>> 딮 스테이트 : 그레이트리셋, 유엔 아젠다 2030, 2021, SDG 17, 아이디 2020, 4차산업혁명, 세계경제포럼, 세계화, 신세계질서, 세계단일정부, 세계재편



민족자주 승리에 대한 굳건한 믿음으로, 한미동맹파기! 미군철거!!

주권主權을 제 손에 틀어쥐고, 주인主人으로서 당당하고 재미나게 사는 땅을 만들어, 우리 후세대에게 물려줍시다.