홈으로 | 무료회원가입 | 아이디/비번찾기
추천음악방송 메인홈 1대1상담
운.영.자.1대1.상담
온라이브음악방송
온라이브스토어(앱다운로드)
OKTROT(무료음악채널)
뽕짝아가씨(무료음악채널)
아리랑가요(무료음악채널)
전통가요(무료음악채널)

환상의뽕짝파티 무료음악
트로트메들리관광 무료음악
보안∵서버∵쿠키
윈도우∵프레임
이미지∵배경
시간∵달력∵계산
상태바∵타이틀바
음악∵영상
폼∵전송∵테이블
키보드∵마우스
효과∵링크∵메뉴
Script∵php
기타
PHP 강좌
윈도우관련팁
웹관련팁
홈페이지제작팁
기본강좌
레지스트리
윈도우서버
리눅스서버
Android
Position 상세 설명
9년 전
Position Property

웹 작성자의 오랜 고민중에 하나가 정확한 위치로 페이지의 구성을 하는것 이었습니다. 이것을 위해서는 투명이미지 같은 것으로 웹 브라우저에 따른 보정을 하여 작성했습니다. 그럼에도 불구하고 만족할 만한 대안은 없었습니다. position 으로 이것이 가능합니다. 지정하는 위치에 문서의 특정 요소를 배치할 수 있습니다. 그리고 이런 배치를 이중으로 배치할 수 있고 이미지 위에 글자를 올려놓을 수도 있습니다. script로 이들의 보여주고 감추고 이동시키고 등의 다양한 효과를 낼수도 있습니다. 정확한 페이지를 출력할 수 있는 CSS의 강력한 기능중의 하나입니다.
위치를 지정할 수 있는 것은 글자, 문단, 이미지, form, Applet, Plug-in등 모든 것입니다. 근데, W3C 문서에는 모든 택에 지정할 수 있다고 하지만 브라우저에 따라서 지정할 수 있는 택의 종류가 제한적이고 서로 다른 종류의 택을 사용합니다. nn4, ie4의 두 브라우저에는 아래의 택을 사용할 수 있습니다.


ie4에서 사용할 수 있는 택입니다.

APPLET BUTTON DIV EMBED FIELDSET HR IFRAME IMG INPUT MARQUEE OBJECT SELECT SPAN TABLE TEXTAREA  


nn4에서 사용할 수 있는 택입니다.

ADDRESS B BIG BLOCKQUOTE CENTER CITE CODE DIR DIV DL EM FONT H1 H2 H3 H4 H5 H6 I KBD MENU OL P PRE S SAMP SMALL SPAN STRIKE STRONG SUB SUP TABLE TD TH TT U UL (A는 좌표는 지정되나 링크가 작동하지 않음.)  


ie4와 nn4가 서로 다른 택에 position을 지정할 수 있습니다. 각 브라우저가 지원하지 않는 택에 position을 지정하기 위해서는 지원하지 않는 택을 같이 지원하는 택 안에 넣어주면 됩니다. 위의 공통으로 사용가능한 <DIV>, <SPAN>은 HTML4.0에 추가된 택으로 <B> 처럼 글자를 굵게하는 택 자체의 기능이 없는 다른 택을 여러개 포함할 수 있는 택입니다. <DIV>는 block 택으로 <SPAN>은 inline 택으로 사용됩니다.
이 2개의 택에 다른 택을 넣고 2개의 택에 style을 지정하면 position 뿐만이 아니고 모든 style을 지정할 수 있습니다. 그래서 style을 사용하기 위해서는 <DIV>, <SPAN> 2개의 택만으로도 전체 페이지를 만들수가 있습니다.

nn4에서는 <IMG>택에 지정할 수 없으므로 같이 지원하는 <SPAN> 택에 넣어주면 됩니다.

<SPAN style="position: absolute; left:10px; top:10px"><IMG src="image.gif"></SPAN>


position 요소와 같이 사용해야 하는 요소는 z-index, top, right, bottom, left 입니다. position 요소는 기본적으로 block, inline 같은 모든 택에게 지정할 수 있기 때문에 position을 지정하고 visibility, clip, background, width 같은 요소를 같이 지정하여 더 재미있는 것을 만들 수 있습니다.

z-index를 사용하여 여러층으로 구현할 수 있고 visibility로 감추고 보이고할 수 있고 JavaScript를 사용하여 좌표, z-index 층, visibility로 보이고 감추고 등의 DHTML 기능을 낼 수 있습니다.


position 요소에 지정할 수 있는 값은 아래의 4가지입니다.

static
relative
absolute
fixed

static

기본값으로 페이지를 작성한 위치에 위치합니다. 이것을 지정시 left, top는 듣지 않습니다.

relative

static과 비슷하게 작성한 위치에 있지만 left, top으로 작성한 위치에서 좌표를 지정할 수 있습니다.
span { position: relative; top: -10px }
로 하면 SPAN 택을 10px 만큼 위로 이동시킵니다. 그래서 줄에서 약간 위로 올라온 글이 됩니다. 좌표를 지정한 택의 내용은 페이지 본문 위에 옵니다. 그래서, 밑에 있는 다른 내용이 보이지 않을 수 있기 때문에 알맞은 좌표값을 지정해야 합니다.

absolute

절대 좌표로 위치 시킵니다. 자신의 상위의 왼쪽 위 꼭지점이 left:0px, top:0px의 좌표입니다.
#abs { position: absolute; left:200px; top:100px }
로 지정하면 "#abs" ID 속성을 지정한 택은 페이지 오른쪽으로 200px 아래로 100px만큼 이동하여 위치합니다.
position: absolute;를 지정한 택의 좌표값은 상위 안에서 위치합니다. 다른 css 요소의 상위와는 다르게 position: absolute;나 position: relative; 를 지정한 택만이 상위가 됩니다. 이 상위에서 부터 좌표값을 지정합니다. 만약, position: absolute;나 position: relative; 를 지정한 택이 상위에 없다면 상위는 페이지, 즉 BODY가 됩니다.

<HTML>
<HEAD>
<TITLE>position에서의 좌표 이해</TITLE>
</HEAD>
<BODY>
  <DIV id="div1">
    <P id="p1">p1 택의 내용입니다..
       <SPAN id="span1">span1 택의 내용 입니다.</SPAN>
    </P>
  </DIV>
</BODY>
</HTML>

위의 예에서 id="span1" 으로 "span1"이라는 이름을 가지고 있는 <SPAN> 택의 상위는 "p1" 입니다.
#span1 { position: absolute; left: 100px; top: 100px }

"span1" 이름의 id를 가지고 있는 <SPAN> 택에게 position:absolute; 를 지정했습니다. 그래서 상위에서 position:absolute 나 position:relative; 를 지정한 택이 있다면 그것이 <SPAN>의 상위가 됩니다. position:static은 상위가 되지 않습니다.
<SPAN>위의 <P>나 <DIV>가 position:absolute 나 position:relative;이 없기 때문에 <SPAN> 의 상위는 페이지 즉, body가 됩니다. 그래서 "span1 택의 내용 입니다." 가 페이지에서 left:100px; top:100px;의 위치에서 시작합니다.

#div1 { position: absolute; left: 50px; top: 50px }
#span1 { position: absolute; left: 100px; top: 100px }

style을 위와 같이 span1과 div1 에게 모두 지정하면 이제 <SPAN> 택의 상위는 id="div1" <DIV> 택이 됩니다. 즉, span1 은 "div1" <DIV> 택안에서 left:100px, top:100px 의 좌표에 위치합니다. 그래서 페이지 전체에서 보면 상위 "div1" 의 left:50px, top:50px 와 함께 실제 페이지에서는 left:150px, top:150px 에서 보이게 됩니다.
다른 값과는 다르게 이 값을 지정하면 페이지의 공간을 확보하지 않아서 다른 내용의 위에 위치합니다. 그래서 밑이 내용이 보이지 않을 수 있습니다. 좌표값을 알맞게 지정해야 합니다.

fixed

프레임 페이지처럼 페이지 scroll에 상관없이 고정시킵니다. nn4, ie4에서 지원하지 않습니다.

#fix { position: fixed; left:50%; top: 0px }
로 하면 수평으로 페이지 절반, 가장 위에 위치 시킵니다. 그리고 페이지 scroll bar로 페이지를 움직여도 이것은 움직이지 않고 고정되어 있습니다.

position과 margin, float

position을 지정한 택에도 border, padding 그리고 상위와의 거리를 두는 margin 값이 듣기 때문에 이들의 값도 좌표값에 더해집니다.
#D1 { position:absolute; margin-left:100; top:0; left:100; }
으로 하면 200px의 위치에 있습니다. 하나의 택에는 잘 작동하지만 position을 지정한 택이 position을 지정한 택을 가지고 있을 때, nn4에서 상위의 margin 값이 하위에게 듣지 않습니다.
#D1 { position:relative; margin-left:50%}
#D2 { position:absolute; left:50px; }

<div id=D1>D1
        <div id=D2>
                D2
        </div>
</div>

로 하면 상위 "D1" ID를 가진 div 택은 페이지 넓이 절반의 좌표로 이동하고 하위 div인 "D2" 가 절반에서 오른쪽으로 50px만큼 더 이동합니다. 하지만, nn4에서는 상위의 margin이 듣지 않습니다. 그래서 넓이가 400px 크기의 페이지라면 ie4에서는 D2가 left 좌표 250px에 있고 nn4는 50px에 있습니다.
그리고 position과 float를 같이 지정시 다른 값은 float가 듣지만 position:absolute; 를 지정하면 float는 듣지 않습니다. 오로지 자신의 좌표값으로만 위치합니다.

nn4에서 창 크기 변경

nn4에서 position을 지정한 페이지를 창의 크기를 변경하면 잘못된 형식으로 나옵니다.

window.onmove = new Function("setTimeout('self.location.reload()', 2000)")

window.onresize = new Function("setTimeout('self.location.reload()', 2000)")

의 JavaScript 코드를 넣어주면 원래의 구성을 복구 합니다. onresize 이벤트는 페이지의 크기에 따라서 오작동하는 경우가 있기 때문에 onmove 이벤트가 안전합니다.

Tip 1

position:absolute; 를 지정하고 left, top을 기본값인 'auto'를 지정하면 ie4에서는 작성한 위치에 위치하고 nn4는 0px로 지정합니다. left, top을 아예 지정하지 않으면 'auto'로 작동하지 않고 두 브라우저에서 position: relative; 를 지정한 것과 비슷한 작동을 합니다.
#D1 { position: absolute; }
left, top을 지정하지 않고 position:absolute; 만 지정하면 페이지에서 상대적인 배치가 됩니다. 그래서 position: relative; 로 지정한 것과 같은 좌표로 나옵니다. 다만, absolute는 다른 본문의 내용의 위에 옵니다. 이것은 <br> 로 적당히 조절을 하면 됩니다.
이것의 좋은점은 nn4같은 경우 position: relative; 를 지정한 css-p는 mouseover, mouseout 같은 이벤트가 듣지않는 JavaScript 버그가 있는데 position: absolute로 이벤트를 지정할 수 있고 상대적인 배치를 하기 때문에 다른 페이지의 본문과 알맞은 위치로 css-p의 배치할 수 있습니다.
추천추천 : 325 추천 목록
번호 제목
3,026
 여러 도메인들 간 쿠키 공유하기
3,025
 태그 사이에 있는 텍스트를 추출
3,024
 [JQuery] textbox focus on off일때 숫자 콤마 보여주기
3,023
 쿠키 생성,가져오기,삭제
3,022
 사용자 함수 모음
3,021
 마우스,키보드 제한 ( 오른쪽클릭,드래그,영역선택등..)
3,020
 [HTML5] <video> - DOM으로 제어하기
3,019
 HTML5 video 태그에서 영상 좌우반전
3,018
 PHP - 특정 태그 및 문자열 추출, 제거
3,017
 [PHP] define과 defined의 차이
3,016
 우클릭 완벽차단 스크립트
3,015
 iframe 높이 100% 맞추기
3,014
 curl 함수를 이용한 HTTP REFERER 변경
3,013
 윈도우10 시스템 파일 및 Dism 검사
3,012
 텍스트 줄바꿈, 글자자르기 CSS
3,011
 jQuery Mobile에서 유용한 코드 10가지.
3,010
 [PHP] dirname()함수와 $_SERVER 관련 상수들
3,009
 [PHP] 파일 크기, 사이즈 불러오는 함수, filesize()
3,008
 [jQuery] jQuery Quick API
3,007
 [ transition ] 링크 hover 색상 변화 속도 조절
3,006
 PHP 5.3.0 에서 사라진 함수들 대체
3,005
 어떤 파일들이 include 나 require 되었는지 확인하는 함수(get_included_files)
3,004
 PHP 날짜 형식 및 계산하기(날짜 더하고 빼기)
3,003
 jQuery Mobile에서 유용한 코드 10가지.
3,002
 값이 배열 안에 존재하는지 확인하는 in_array함수
목록
인기절정뽕짝파티
인기트로트모음
지루박디스코메들리
밤무대애창곡
전자올겐경음악
세월따라노래따라
가슴시린트로트
7080추억속으로
추억의가요방(가사포함)
CDN 추천곡
종합성인가요방
못잊을옛날노래
카바레 음악
트롯디스코팡팡
관광 메들리
트롯카페
가요감상실
추억의옛노래
스페셜가요광장
BillBoard Free
추천가요모음
경음악.전자올겐
스페셜음악여행
WOLRD POPs
K-POP\BillBoard
POP TOP BEST

최신인기가요특집
추천가요\인기
F뮤직 인기\발라드
F뮤직 애창\트로트
트로트성인가요
인기가요
프리미엄 POP
경음악\기타
프리미엄 최신가요
프리미엄 성인가요
뮤직트로트 부산광역시부산진구 가야동 ㅣ 개인정보취급방침
Copyright (C) musictrot All rights reserved.