웹마스터 팁

메뉴만들때 보통 이렇게 하죠...

<div style="position:absolute; ~">

그런데 이경우 홈페이지가 좌측에 붙어있는경우에는 유용하지만
가운데나 오른쪽으로 정렬된 홈페이지에선 메뉴의 위치가 바뀌게 됩니다.

그럴경우엔 relative를 사용해야하는데....

<div style="position:relative; ~">

이경우엔 해당 레이어의 크기만큼 그 레이어의 태그가 있는 곳에 자리를 차지하게 됩니다.

이때는 메뉴레이어들을 전체적으로 하나의 레이어로 감싸준후 그레이어에 absolute속성을 부과하면 됩니다.

예)
<div style="position:absolute;">

<div style="position:relative; ~">메뉴1</div>
<div style="position:relative; ~">메뉴1</div>
<div style="position:relative; ~">메뉴1</div>
<div style="position:relative; ~">메뉴1</div>

</div>


[요약]
absolute는 자리를 차지하지는 않지만 가운데 혹은 오른쪽 정렬의 홈페이지에서는 브라우저 크기에따라 레이어의 위치가 바뀌고,
relative는 위에 언급한 위치가 바뀌지 않는대신, 자리를 차지합니다.
둘의 단점을 보완하는 방법이라 할수있겠습니다.


ps.

visibility:hidden; 옵션도 함께주면 좋습니다.
<div style="position:absolute;visibility:hidden;">

<div style="position:relative; ~">메뉴1</div>
<div style="position:relative; ~">메뉴1</div>
<div style="position:relative; ~">메뉴1</div>
<div style="position:relative; ~">메뉴1</div>

</div>
제목 글쓴이 날짜
iframe 그때그때 달라요 ~ [높이자동변경] [15] kim's 2005.02.18
[기초]홈페이지의 프레임 나누기 입니다. [5] piasol 2004.12.10
브라우저 주소창에 긴 경로 안 나타나게 하기 [7] 편입성공기 2004.12.06
도메인 포워딩 즉 페이지 자동이동하기 [6] 편입성공기 2004.12.06
페이지 회색스크롤바로 바꾸기 편입성공기 2004.12.06
톡톡 튀는 홈페이지 테이블 제작하기 ^^ [6] piasol 2004.12.03
최근게시물의 폰트크기와 링크색상 바꾸는 방법 LUFFY 2004.11.20
웹폰트사용에 대한 실체를 밝힌다!! [22] Multi_Taeji 2004.11.13
웹문서 검색을 대비한 헤더,푸터 나누기. [4] 그럴까? 2004.10.29
W3C 표준 권고안. 앞으로 꼭 지켜주세요.. [14] canelia 2004.10.29
해상도에 적응하는 노프레임 홈페이지 제작에 필요한 표와 셀의 관계 [8] file Multi_Taeji 2004.10.13
테이블 주위에 점선효과!!!~~(초간단팁!) [6] 초라 2004.09.25
경고창 없이 부모창 닫고 아기창에서 마우스 오른버튼 클릭시 아기창도 닫는다. [4] 詩와언어™ 2004.08.27
relative 속성 레이어를 이용한 메뉴를 자리차지하지 않게... [1] PHASE 2004.06.03
플래시 swf파일 배경 투명하게 하기 ~~~ [8] kim's 2004.05.09
허접 팁....레이어로 플래시 뺨치는 홈페이지 만들기 -추가- [17] file 남규성 2004.05.05
자동 스크롤 메뉴 (끄기 기능, 무한 스크롤 X) [6] ☺심심 2004.05.02
홈페이지 빠르게하는 [로딩속도를 높히는 10가지방법] [20] kim's 2004.04.29
[tip]간단한 반투명 필터 적용법 [2] 드래군 2004.04.21
서브 메뉴 나타났다가 사라지게 하는 방법. 그동안의 노가다는 이젠 끝! [22] file CoolUnit 2004.03.01