웹개발자의 기지개

.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); }

동영상 재생을 위한 video 태그를 이용할때 다운로드 기능이 디폴트로 켜져 있다. 이를 간단히 끄는 방법이다. 1 2 3 4 5 현재 브라우저는 video태그를 지원하지 않습니다. Colored by Color Scripter cs controlsList="nodownload" volume="0.5" 태그안에서 속성지정이 안먹힌다면

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

1. 자식 태그에서 float: left 했다면 그 태그 위의 부모태그에서 overflow: hidden 을 적어두자. 1111 2222 333 상기 소스상에서 overflow: hidden; 을 안쓰면 소스 중 제일 하단 333 태그 부분이 정상적으로 제일 하단부에 원하는 위치상 나오지 않는다. 이와 같은 효과를 얻기 위해서 clear:both; 로 float 기능을 제거 할 수도 있다. 2. img 태그는 기본이 inline-block 이다. 그런데, display:block 으로 주면 빈공간 없이 이미지를 꽉 채울수 있다. 3. a태그를 display:block 하면 a태그내 글자 부분만 링크가 잡히는게 아니라 그 글자부분을 포함하는 빈공간도 링크가 나타난다. 4. 반응형에 자주 쓰이는 글씨 줄임말..

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'..