웹마스터 팁

별것 아니지만... xe 팁도 아니지만... 올려봅니다..

div 위치에 맞춰 그림자 를 나오게 하는것..

예전에  Style을 몰랐을때.. 정말 노가다 해서 만들었는데.. =ㅁ=;;
아주 간단하게 되버리니.. 흑흑..

아시는 분은 Pass~~~

이런 BOX 만드는 방법 입니다.



1. 간단한 그림자 box 코드
<div id="box" class="shadow">
<div id="box" class="textbox">
이건 그림자 박스입니다.<br />
유용하려나?
</div>
</div>


2. 그림자 box 스타일 지정
#box {font-size:9pt;}

/* shadow class 의 속성 지정
   shadow가 밖을 둘러 싸고 있기 때문에 이 style 에 따라 textbox도 같이 크기, 이동 등 같이 적용 됩니다.
  이 style을 응용하여 반투명(IE에서) 도 만들어 보세요
  */
.shadow { position:relative; top:10px;left:10px; background-color:black;width:100px;}

/* 이 box를 -2 씩 움직이면 당연히 뒤에 남아 있는 shadow 보다 -2씩 움직여 뒤에 그림자가 남게 됩니다. */
.textbox { position:relative; top:-2px;left:-2px; background-color:#FFCC00; padding:3px}

보시면 금방 이해 되실듯 합니다.

질문은 댓글로~
제목 글쓴이 날짜
XE Core 안정된 버젼 좀 알려주세요.. [1] 팔도준 2015.05.26
외부이미지 링크 + 고해상도 이미지 섬네일 생성 팁 socialskyo 2015.05.26
설문조사 컴퍼넌트의 종료일 관련 버그 수정 sejin7940 2015.05.26
공지목록의 추출기준을 문서번호가 아니라 글순서로 변경 sejin7940 2015.05.26
네이버맵 좌표(Lat, Lng) 검색기 YJHOON 2015.05.27
푸시알림 앱 소개 pushbullet 안드로이드와 아이폰, 데스크탑까지 되면서 공짜!! garnecia 2015.05.28
29일 licencexe설치시 XE마비현상 [3] XE힘들당휴 2015.05.29
네이버 카페 처럼 조회하고 [2] XE모듈 2015.05.31
스키마 변경 후 쿼리 오류가 발생할 때 신평 2015.06.01
타임라인 모듈 두개 이상 생성 및 페이지가 넘어가지 않은 문제에 관하여 함삐까 2015.06.01
카르마님의 외부 이미지 저장 애드온 에서 swf를 받아오기 불금 2015.06.01
자바스트립으로 내용을 숨겼다/보이기 착한동구 2015.06.03
코어 1.5 모바일에서 닉네임 클릭시 팝업 메뉴안 뜰때.. 착한악마 2015.06.03
php 버전을 다운그레이드 하기 [2] 6미리 2015.06.04
(오류x, 정보)ckeditor와 xpresseditor의 서식은 서로 다르네요. 반응형만드실 때 주의하실 필요가 있겠습니다. 큰성565 2015.06.04
구글에서 제공하는 웹폰트 적용법 착한동구 2015.06.04
창크기에 따라 생기고 없어지는 배너 만들기 [1] 착한동구 2015.06.05
구글 웹폰트 부분으로 적용하기 착한동구 2015.06.05
탑으로 가는 버튼이 특정위치에서 나타나게 하기 file 동네남자 2015.06.09
1.8.3 통합 검색시 제목+내용 으로 하기 불금 2015.06.09