웹개발자의 기지개

.zoom11 { transition: transform .2s; margin: 0 auto; } .zoom11:hover { -ms-transform: scale(1.04); /* IE 9 */ -webkit-transform: scale(1.04); /* Safari 3-8 */ transform: scale(1.04); }

보통의 테이블태그내에서태그를 display:block; 혹은 display:none; 형태로 보였다 사라졌다 기능을 자주 사용한다. 그런데, 아래 그림과 같이 여러 셀이 어우려져 있을경우에 테이블 형식이 깨진다. 이를 보완하기 위해 display:block; 대신에 display:table-row; 속성을 이용하면 깨끗하게 적용할 수 있다. 패키지 유형 * 당일패키지 펜션패키지 운영시기 * aaaaaa 위치/주소 bbbbb 객실타입/면적 bbbb 사용전 사용후

position 의 relative 상대경로 속성, absolute 절대경로 속성을 연습해 보자. 보통은 이 두가지가 유기적으로 함께 쓰인다. 상위 태그에 relative 로 상대경로를 잡고 그 하위 태그에서 absolute 절대경로를 잡으면, 브라우져 크기에 상관없이 내가 원하는 부분에 특정 내용을 나타낼 수가 있다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 position 연습 .box {width:400px; height:400px; background-color:#ff0;position:relative;} .box > div {background-color:#f00;width:100px;height:100px;..

아래의 이미지를 보면 파란 배경색의 이미지를 주욱 깔고 중앙에 메인형 배너 이미지를 위치 시켰다. .banner01{ background: url('파란색배경이미지') repeat-x 0px 0px; width:100%;text-align:center;} 파란색 배경이미지는 배너 높이에 맞게 길쭉하게 1 ~ 2px 정도 폭으로 하고 세로는 배너 이미지 크기에 맞게 작게 잘라서, width를 100% 로 확 깔아준다.

작업중에 이쁜 토글 스위치 버튼이 있어서 소스를 정리해 봤다. /*Toggle Switch*/ .switch {display:inline-block; position:relative; width:49px; height:29px;} .switch input {opacity:0; width:0; height:0} /* input {display:none;} */ .slider {position:absolute; cursor:pointer; top:0; left:0; right:0; bottom:0; background-color:#d6d6d6; -webkit-transition:.4s; transition:.4s;} .slider:before {position:absolute; content:""; heig..

font 를 css 파일내에 연동해보자. 1. 오픈된 구글 연결 주소로 간단히 import 시켜서 연결할수가 있다. @import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css); 보통 css 파일내에 상단에 위치시키는데 문제는 로딩도 만만치 않게 걸린다는 점이다. (비추) 2. 폰트 파일들을 /font/ 폴더에 위치시키고 이를 연동하는 방식 @font-face{ font-family:"Nanum Gothic"; src:url('/font/NanumGothic.eot'); src:url('/font/NanumGothic.eot?#iefix') format('embedded-opentype'), url('/font/NanumGothic.woff'..

우편번호를 AJAX 로 구현하는 작업중에 div 태그부분에 주소내용이 나와야 하는데, 그 내용이 길어질 경우 스크롤 되게끔 해야 했다. ^^; 그래서 아래와 같은 소스를 추가하였다. 참 유용하니 꼭 알아 두자 ^^

111 222 position:relative; 333 position:absolute; 444 #d3p overflow:hidden 삭제시 #d3p overflow:hidden 적용시 위의 내용중 핵심은 2가지이다. 1. absolute 의 기준점은 웹브라우저의 0x0 이 아니고, 그 부모중에 relative가 있으면 이를 기준점으로 한다는 점이다. 2. #d3p 의 overflow:hidden 은 이영역을 벗어나는 놈은 화면에서 hidden 시킨다.