웹마스터 팁

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

<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>
제목 글쓴이 날짜
아이프레임 가로스크롤바 없애기 [3] 백승창 2004.05.28
처음올립니다;ㅂ; 너무 신기한 거 발견;; [19] 올리못™ 2004.05.30
relative 속성 레이어를 이용한 메뉴를 자리차지하지 않게... [1] PHASE 2004.06.03
어쩌다 나온 깔끔한 그레이 스크롤바.. 흠흠.. [11] ☺심심 2004.06.06
이미지에 필터만으로 그림자주기.. [15] Simsim 2004.07.07
도메인 포워딩 하기 [4] 나준혁 2004.07.27
동영상과 함께 자막 재생하기. [4] 세강:D 2004.08.16
경고창 없이 부모창 닫고 아기창에서 마우스 오른버튼 클릭시 아기창도 닫는다. [4] 詩와언어™ 2004.08.27
테이블 주위에 점선효과!!!~~(초간단팁!) [6] 초라 2004.09.25
TabIndex를 이용하여 탭키 컨트롤하기 [5] 손상모 2004.10.08
해상도에 적응하는 노프레임 홈페이지 제작에 필요한 표와 셀의 관계 [8] file Multi_Taeji 2004.10.13
<button>태그를 아시나요? [6] 그냥이렇게。 2004.10.13
타이틀 바에 움직이는 타이틀 넣기. [5] 덜렁이 2004.10.16
스타일시트에서 링크포커스 없애기 [12] keymove 2004.10.26
W3C 표준 권고안. 앞으로 꼭 지켜주세요.. [14] canelia 2004.10.29
각 객체접근.. [2] canelia 2004.10.29
웹문서 검색을 대비한 헤더,푸터 나누기. [4] 그럴까? 2004.10.29
a링크를 이용 새창 띄우기 [10] 토토루 2004.11.07
웹폰트사용에 대한 실체를 밝힌다!! [22] Multi_Taeji 2004.11.13
최근게시물의 폰트크기와 링크색상 바꾸는 방법 LUFFY 2004.11.20