웹마스터 팁

테이블에 이미지를 넣는 것보다 레이어에 넣으면 보기에도 깔끔하고 여러가지 좋은 점이 많습니다.

그러나 레이어의 절대좌표때문에 해상도가 바뀌면 레이어가 표밖으로 삐져나오거나 유저가 원하는 곳에 위치하지 않는 경우가 많이 있죠.

테이블과 부모 자식 레이어를 이용한 레이어의 위치를 고정하는 방법을 쓰겠습니다.
(부모자식 레이어를 이용하면 된다고 하는 분들은 많은데 상세하게 방법을 안 해주셔서 초보를 위한 ^^; 저도 초보지만 -.-;;)

간단히 설명하자면 (부모)레이어를 만들고 그 안에 (자식)레이어들을 넣어 (자식)레이어에 자신이 원하는 이미지 등을 넣으면 됩니다.

전 나모를 쓰는데 나모의 편집창에서(편집창, html창, 미리보기창 중에서) 부모레이어를 만들고 자식 레이어를 아무데나 만든다음에 드래그해서 부모레이어에 집어 넣으면 되더군요.

HTML 형식으로 보면 다음과 같이 나옵니다.

  <div style="position:relative;left:-260px;top:-170px;">
  <div id="layer1" style="width:314px; height:174px; position:absolute; left:689px; top:238px; z-index:-1;"> 이미지 또는 내용  </div>
  <div id="layer2" style="width:389px; height:322px; position:absolute; left:640px; top:733px; z-index:-1;"> 이미지 또는 내용  </div>
  <div id="layer3" style="width:389px; height:322px; position:absolute; left:640px; top:733px; z-index:-1;"> 이미지 또는 내용  </div>
  </div>
  
첫번째 position:relative라고 한 것이 부모 레이어고 id=layer1, 2, 3...라고 한 것이 자식 레이어입니다.
자식 레이어는 4, 5, 6...계속 만들 수 있고요. id, width, height, left, top, z-index는 제가 임의적으로 준 것이고
중요한 것은 부모 레이어는 position을 relative로, 자식 레이어는 position을 absolute로 하는 것입니다.

제 홈페이지에도 레이어안에 이미지를 넣어서 만들었는데 위와 같은 방법으로 해서
해상도가 바뀌어도 제가 원하는 위치에 그대로 있습니다. ^.^v

* 추신 > 나모 편집창을 쓰지 않고 직접 HTML 형식으로 적어서 넣으면 안되더군요.
            즉, (부모)레이어를 만들고 (자식)레이어를 만든 다음 (자식)레이어를 드래그해서
            (부모)레이어 안에 넣는 행위를 하지 않고 직접 HTML형식으로 적어 넣으면 안되더군요.
            왜 그런지는 모르겠지만... 나모 편집창을 쓰세요. ^^;;;
            
* DeX™님에 의해서 게시물 이동되었습니다 (2003-10-04 12:41)
제목 글쓴이 날짜
nzeo처럼 배너누르면 배너다는법 나오게하기! [6] Rollrang 2004.02.05
옅은 그레이 쓸때 붉은빛 들어가는경우 [10] 김영호 2004.01.29
마우스 오버시 서브메뉴 나타나게 하는방법 입니다 [12] 키드 2004.01.26
자동으로 새로고침되게 하기 [5] 권대건 2004.01.05
Input AccessKey를 이용한 홈페이지 단축키 사용하기 [8] Juny. 2003.12.12
링크에 마우스 오버 할때 상태표시줄에 원하는 글 뜨게하기 [6] siche 2003.11.26
IFRAME 삽입 [20] 박종익 2003.10.10
해상도에 따라 레이어 위치 바뀌는 것 고정하기 [13] 김형준 2003.10.04
[동영상] 제로보드의 주요기능들을 적용한 웹사이트 만들기 1-10장 [51] 비행소년™ 2003.09.16
[동영상] 테이블태그의 쉽고 확실한 이해와 원프레임 만들기 [30] 비행소년™ 2003.08.27
스크롤바 왼쪽에 위치하도록 하기(문서 뒤집힘 없음) [6] 행복한고니 2003.08.22
[re] 벅스뮤직 음악을 페이지의 배경 음악으로 깔기 (간단) [3] 윤혜성 2003.12.26
테이블의 세로정렬 [4] clo 2003.08.20
홈페이지에 배경 음악 항상 흐르게 하기 (숨김프레임) [5] 마이템플릿 2003.08.13
[나모] iframe창에서 다른 iframe창으로 링크걸기, 전체창으로 링크하기 [1] 김병희 2003.08.06
<TD>에 스크롤바 생성하기!! [12] millth 2003.08.04
이미지2장으로 홈페이지만들기 2탄 [3] Conz 2003.08.01
이미지2장으로 홈페이지만들기 [5] Conz 2003.08.01
홈제작에 있어 가장중요한 "경로지정의 이해" 1편 입니다. [5] 김수한 2003.07.25
HTML필수 항목( 기본구조)- 초보자용 입니다! 김수한 2003.07.25