홈으로 | 무료회원가입 | 아이디/비번찾기
추천음악방송
그림 위에 글을 쓰거나 다른 작은 그림을 겹쳐넣을때
홈페이지홈페이지 18년 전
그림을 html에 삽입하고 그 위에 글을 쓰거나 다른 작은 그림을 겹쳐넣을때
사용하면 좋습니다. 바로 요런걸 레이어(layer)라고들 하죠~!
포토샵이나 페인트샵등에서 사용하는 개념하고 비슷하다고 생각하시면 됩니다.

// 원하는 부분을 아래 태그를 사용해서 써보세요.

<div id="layer1" style="position:absolute; left:20px; top:20px; width:100px; height:100px; z-index:1; border-width:1px; border-style:none;"><img src="그림.gif"></div>

<div id="layer2" style="position:absolute; left:20px; top:20px; width:100px; height:100px; z-index:1; border-width:1px; border-style:none;">여기에 글을 씁니다</div>

// 이건.. 우선 <div> </div>로 레이어를 두개 맹글어서..
position:absolute로 해서 그 레이어들 위치 고정시켜줍니다.
left : 왼쪽으로부터의 여백, top: 위쪽으로부터의 여백
width : 레이어의 폭, height : 레이어의 높이
즉 이 레이어라는 건 투명한 셀룰러판같은 거랍니다.
눈에는 안보이지만 그 레이어 위에 원하는걸 넣어주게 되면..
그 레이어가 있는 위치에 있게 되는거죠.
그리고 그 레이어 두개를 겹쳐놓으면 차곡차곡 쌓여서 겹쳐보이는거죠.
그림을 넣은 layer1이 밑에 깔리고, 그 위에 글을 쓴 layer2가 겹쳐지면..
보일때는 그림위에 글을 쓴것과 같은 효과가 나타난답니다*^^*

추천추천 : 365 추천 목록
번호 제목
3,030
 제이쿼리 기본 명령어
3,029
 웹페이지 가로 모드세로 모드 인식하기
3,028
 모바일 웹 화면 강제 회전(가로모드 고정)
3,027
 [HTML5]에서 frameset 대체 방법과 iframe 속성
3,026
 HTML <Audio> 사용법
3,025
 윈도우10 시스템파일 손상 (초간단 오류 복구방법!!)
3,024
 PHP 파일 존재 여부 파악하기(로컬 파일 존재 및 원격지 파일 존재)
3,023
 [CSS] 박스 세로 가운데 중앙 정렬 6가지
3,022
 CSS Layout 수평 & 수직 정렬
3,021
 여러 도메인들 간 쿠키 공유하기
3,020
 태그 사이에 있는 텍스트를 추출
3,019
 [JQuery] textbox focus on off일때 숫자 콤마 보여주기
3,018
 쿠키 생성,가져오기,삭제
3,017
 사용자 함수 모음
3,016
 마우스,키보드 제한 ( 오른쪽클릭,드래그,영역선택등..)
3,015
 [HTML5] <video> - DOM으로 제어하기
3,014
 HTML5 video 태그에서 영상 좌우반전
3,013
 PHP - 특정 태그 및 문자열 추출, 제거
3,012
 [PHP] define과 defined의 차이
3,011
 우클릭 완벽차단 스크립트
3,010
 iframe 높이 100% 맞추기
3,009
 curl 함수를 이용한 HTTP REFERER 변경
3,008
 윈도우10 시스템 파일 및 Dism 검사
3,007
 텍스트 줄바꿈, 글자자르기 CSS
3,006
 jQuery Mobile에서 유용한 코드 10가지.
목록
뮤직트로트 부산광역시 부산진구 가야동 ㅣ 개인정보취급방침
Copyright (C) musictrot All rights reserved.