홈으로 홈으로 | 무료회원가입 | 아이디/비번찾기 | 즐겨찾기
추천음악방송메인홈1대1상담음악방송청취
okTrot(구독하세요)
KongMusic(구독하세요)
oldMusic(구독하세요)
음악가사 검색
온라이브스토어(앱다운로드)
온라이브(방송등록및청취)
Search Video Best 50
금영노래방
TJ노래방
유튜브 동영상 다운로드
POP Player
신나는 고스톱
컴퓨터 오목
작은 음악다방
운.영.자.1대1.상담
FAQ\지원.프로그램
Q&A\고.객.지.원

자동러시 웹플레이어신청

보안∵서버∵쿠키
윈도우∵프레임
이미지∵배경
시간∵달력∵계산
상태바∵타이틀바
음악∵영상
폼∵전송∵테이블
키보드∵마우스
효과∵링크∵메뉴
Script∵php
기타
PHP 강좌
윈도우관련팁
웹관련팁
홈페이지제작팁
기본강좌
레지스트리
윈도우서버
리눅스서버
Android
DIV 레이어 속성
7년 전
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 - 위의 적용이 해제된다.

추천추천 : 174 추천 목록
번호 제목
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함수
3,001
 사용자가 웹브라우저에서 뒤로가기를 했을때 감지하는 방법
3,000
 [jQuery]버튼 활성화, 비활성화
2,999
 jQuery show() / hide() / toggle() 사용법
2,998
 jquery 여러가지 이벤트
2,997
 border-radius 속성
2,996
 네이버 오픈API 음성합성 API 사용하는 PHP 샘플코드
2,995
 UTF8 한글 자르기..
2,994
 iconv 에러 발생시 계속 처리하기 옵션
2,993
 [PHP] 현재 페이지의 도메인 , URL 정보 알아내기.
2,992
 [PHP] 막강 기능 배열..
2,991
 [CSS] - Input clear `X ` 버튼 제거 ( IE, Chrome, Firefox )
2,990
 [Mobile] - 모바일웹 Href 태그속성들
2,989
 [JqueryMobile] - 현재화면의 가로세로 사이즈 구하기
2,988
 [JqueryMobile] - 화면의 가로, 세로 사이즈 구하는 방법
2,987
 jquery로 가로 넓이(width), 세로 높이(height) 자동 조절
2,986
 iframe 높이 jquery로 자동조절하기
2,985
 jQuery 오른쪽 영역의 높이를 왼쪽 영역의 높이와 동일하게 하기
2,984
 jquery에서 테이블 짝수, 홀수 번째 TR 배경색 변경하기
2,983
 jquery에서 테이블에 마우스 오버시 해당 행의 배경색상 변경하기
2,982
 jquery 스크립트내 특정값 확인하기 (디버깅)
2,981
 jquery cookie (jquery.cookie.js)
2,980
 jquery div 기본 넓이, 높이 계산 및 padding, border 포함 하기
2,979
 jquery 다른버전 추가 사용시 충돌 방지 (카페24 스마트디자인 기본내장 jquery 1.4.4 버전과 충돌시 해결방법)
2,978
 특정 페이지 종료시 확인 경고창 출력
목록
추천음악방송
인기트로트모음
지루박디스코메들리
밤무대애창곡
전자올겐경음악
콩뮤직
올드뮤직
작은 음악다방
종합성인가요방
카바레 음악
트롯디스코팡팡
관광 메들리
트롯카페
가요감상실
추억의옛노래
스페셜가요광장
BillBoard Free
Dance&Remix
추천가요모음
경음악.전자올겐
스페셜음악여행
WOLRD POPs
K-POP\BillBoard
JP\CN
POP TOP BEST
K.R.노래방

추천가요\인기
F뮤직 인기\발라드
F뮤직 애창\트로트
트로트성인가요
인기가요
프리미엄 POP
경음악\기타
프리미엄 최신가요
프리미엄 성인가요
가요1번지(종합)
뮤직하우스
동요\연변\반주\기타
앗싸! 뽕짝
가요 포장마차
가요축제\트롯1번지
댄스\메들리\리믹스
카페\명상\경음악\기타
추천가요\POP\기타
최신가요\인기가요
뮤직트로트 부산광역시부산진구 가야동 ㅣ 개인정보취급방침
Copyright (C) musictrot All rights reserved.