태그 자료실

회원로그인

무료회원가입 보안로그인

아이디/비밀번호찾기

DIV 레이어 속성

13년 전

div 속성은 style시트로 설정합니다.

< div id="Layer" style="position:absolute;top:20px;left:20px;width:200px;height:100px;z-index:1;visibility:hidden;overflow:auto;background:#ffcc00">

<속성들>

position : absolute -> 절대위치 , relative -> 상대위치

top : 브라우저 위에서 부터 아래쪽으로 떨어진 위치

left : 브라우저 왼쪽에서 부터 오른쪽으로 떨어진 위치

width : 레이어 가로길이

heigth : 레이어 세로길이

z-index : 레이어 순서 1 ,2 ,3 ,4 .... 값이 제일 높을 수록 맨 위로 나타납니다.

visibility : hidden -> 레이어 숨김 , visible -> 레이어 보임

background : 레이어 배경색

overflow : visible -> 정해진 크기 무시(width,height를 무시하고 모두 보여줌)
: hidden -> 정해진 크기만큼만 보여줌,넘는 내용은 짤림니다.
: scroll -> 수평,수직 스크롤을 보여줌,
: auto -> 내용이 넘치는 방향으로 스크롤 보여줌.

이 외에서도 style 부분에

font-family -> 폰트종류

font-size -> 폰트크기

padding-top -> 레이어 위에서 부터 내용부분까지의 공간

padding-left(왼쪽으로 부터) ,

padding-right(오른쪽으로 부터) ,

padding-bottom(아래로부터)

***********************************************************

레이어 객체에 접근 할때에는 레이어 아이디.속성으로 접근합니다.

예) layerID.style.visibility="hidden";

포지션에 대한 속성에서 absolute와 relative를 보면

absolute(절대적 위치)

브라우저를 기준으로 위치 속성을 사용 하며 parent 요소에 의해 하위 위치에

있다면 그 곳을 기준으로 합니다.

즉, 레이어 속성인 z-index를 쓸경우 top, left, right, bottom을 통해서

좌표를 잡는데 실제 브라우저를 기준으로 위치하게 됩니다.

relative(상대적 위치)

객체가 위치 속성에 의해 설정 되거나 태그내에 위치시 마지막 위치를

기준으로 상대값을 정해 줍니다.

즉, 포지션을 정하지 않은 상태에서 보면 그곳에 위치가 브라우저에

나올것입니다. 바로 그곳을 기준으로 포지션에 relative를 사용해서

top, left, right, bottom을 이용해서 위치를 정할수 있습니다.

위에 질문 하신 소스에 보시면 relative를 먼저 사용 하셨는데요

두 태그를 바꿔서 해보시면 아실 겁니다.

그리고 div와 span태그는 서식에 관한 태그입니다.

div

div태그는 문단 서식에 관한 태그입니다. 그래서 스타일을

이용해서 크기를 잡지 않는다면 기본적으로 줄바꿈이 됩니다.

즉, 라인 전체에 적용이 되는 이유입니다.

span

span태그는 서식에 관한 태그이긴 하나 문단이 아닌 한줄에 관한 서식

입니다.

그래서 span태그에 스타일로 크기를 잡아주지 않으면 태그가 쓰인곳 안에

내용까지만 적용이 됩니다.

예를 들어

<div style="background-color: blue">줄전체에 색상</div>

줄전체에 색상

위 경우는 라인전체에 해당(문단을 적용 하기 위해 자동으로 줄바꿈)

<span style="background-color: blue">이글에만 색상</span>

이글에만 색상

위의 경우는 줄서식이므로 태그안에 쓰인 글에만 적용 됩니다.

1.className
속성 IE (<DIV class="sVal"> 애트리뷰트)
⇒ 개체의 클라스 이름을 반환하거나 설정한다.
2.clientHeight 속성 IE
⇒ 블럭 개체의 높이를 픽셀단위로 반환한다.
3.clientTop 속성 IE
⇒ offsetTop 속성과 실제적인 사용자 지역의 위쪽 모서리와의 거리를 픽셀단위로 반환한다.
4.clientWidth 속성 IE
⇒ 블럭 개체의 너비를 픽셀단위로 반환한다.
5.id 속성 IE (<DIV id=sVal> 애트리뷰트)
⇒ 개체를 대표하는 인식자 문자열을 반환하거나 지정한다.
6.innerText 속성 IE
⇒ 개체의 내용 문자열을 반환하거나 지정한다.
7.offsetHeight 속성 IE
⇒ offsetParent에 설정에따라 모체의 레이아웃이나 좌표에 상대적으로 계산된 높이 위치를 픽셀단위로 반환한다.
8.offsetLeft 속성 IE
⇒ offsetParent에 설정에따라 모체의 레이아웃이나 좌표에 상대적으로 계산된 수평 위치를 픽셀단위로 반환한다.
9.offsetParent 속성 IE
⇒ 개체에 offsetParent과 offsetLeft 속성들이 지정된 용기 개체를 참조하고 반환한다.
10.offsetTop 속성 IE
⇒ offsetParent에 설정에따라 모체의 레이아웃이나 좌표에 상대적으로 계산된 수직 위치를 픽셀단위로 반환한다.
11.offsetWidth 속성 IE
⇒ offsetParent에 설정에따라 모체의 레이아웃이나 좌표에 상대적으로 계산된 너비 위치를 픽셀단위로 반환한다.
12.outerText 속성 IE
⇒ 개체와 개체의 외부 내용을 텍스트로 반환한다.
13.parentElement 속성 IE
⇒ 체계 구조상 부모 엘레멘트 개체를 반환한다.
14.scrollHeight 속성 IE
⇒ 개체의 스크롤(화면굴림) 높이를 반환한다.
15.scrollLeft 속성 IE
⇒ 개체의 왼쪽 모서리와 현재 윈도우의 내용이 보이는 가장 왼쪽 위치와의 거리를 픽셀단위로 반환하거나 설정한다.
16.scrollTop 속성 IE
⇒ 개체의 위쪽 모서리와 현재 윈도우의 내용이 보이는 가장 위쪽 위치와의 거리를 픽셀단위로 반환하거나 설정한다.
17.scrollWidth 속성 IE
⇒ 개체의 스크롤(화면굴림) 너비를 반환한다.
18.sourceIndex 속성 IE
⇒ 소스 순서에서 문서의 all 컬렉션에 나타나는 개체의 위치를 반환한다.
19.style 속성 IE (<DIV style="cssVal"> 애트리뷰트)
⇒ 엘레멘트의 인라인 스타일을 반환하거나 설정한다.
20.title 속성 IE (<DIV title="sVal"> 애트리뷰트)
⇒ 개체의 참고적인 제목을 반환하거나 설정한다.
21.uniqueID 속성 IE
⇒ 자동적으로 생성된 개체의 유일한 인식자 문자열을 반환한다.

※ 속성

position : absolute(절대위치), relative(상대위치), static(기본값), fixed(고정)

top : 위부터 아래쪽으로 위치
left : 왼쪽부터 오른쪽으로 위치
width : 레이어 가로 길이
height : 레이어 세로 길이
z-index : 레이어 순서(값이 높을수록 위쪽)
visibility : hidden(레이어 숨김), visible(레이어 보임)
background : 레이어 배경색
overflow : visible(정해진 크기 무시하고 모두 보여줌), hidden(정해진 크기만큼만 보여줌, 넘는 내용은 짤림), scroll(수평,수직 스크롤을 보여줌), auto(내용이 넘치는 방향으로 스크롤 보여줌)
font-family : 폰트종류
font-size : 폰트크기
padding-top : 위쪽으로부터의 안쪽 여백
padding-left : 왼쪽으로부터의 안쪽 여백
padding-right : 오른쪽으로부터의 안쪽 여백
padding-bottom : 아래쪽으로부터의 안쪽 여백

※ 레이아웃에 관련된 속성

float:left - 레이어가 좌측으로 정렬되며, 이후 추가되는 레이어는 옆(좌측)으로 붙게 된다.
float:right - 레이어가 우측으로 정렬되며, 이후 추가되는 레이어는 옆(우측)으로 붙게 된다.
clear:both - 위의 적용이 해제된다.