홈으로 | 무료회원가입 | 아이디/비번찾기
추천음악방송 메인홈 1대1상담
운.영.자.1대1.상담
온라이브 음악방송
음악방송 앱 다운로드
OKTROT(무료음악채널)
뽕짝아가씨(무료음악채널)
아리랑가요(무료음악채널)
전통가요(무료음악채널)
보안∵서버∵쿠키
윈도우∵프레임
이미지∵배경
시간∵달력∵계산
상태바∵타이틀바
음악∵영상
폼∵전송∵테이블
키보드∵마우스
효과∵링크∵메뉴
Script∵php
기타
PHP 강좌
윈도우관련팁
웹관련팁
홈페이지제작팁
기본강좌
레지스트리
윈도우서버
리눅스서버
Android
DIV 레이어 속성
9년 전
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 - 위의 적용이 해제된다.

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

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