맛집 여행 캠핑 일상 생활

가로는 꽉차게 하면서 가로 세로 비율은 유지하는 CSS 입니다. 인터넷 검색으로 어디서 찾은건데 정말 신기하네요~ .video-wrap { position:relative;padding-bottom:56.25%;height:0px;overflow:hidden; } .video-wrap iframe { position:absolute;top:0;left:0;width:100%;height:100%; }

특정 DIV 같은 요소의 배경을 ccs 로 투명 처리 하려면 opacity 를 사용하면 됩니다. 하지만 자식까지 투명처리되는 것을 원하지 않는다면 background 에 rgba 값을 설정하여야 합니다. opacity: 0.2; background: rgba(0, 0, 0, 0.2); 1. OPACITY OPACITY:0.2 글자 폰트까지 투명해짐 2. BACKGROUND background:RGBA(255,255,255,0.2) 글자 폰트 불투명

홈페이지에 인터넷속도체크 위젯 달기 워드프레스나 홈페이지 메인에 인터넷속도체크 위젯을 달아보세요~아래 코드를 붙여넣으면 됩니다. 한번 체크해보세요~

[HTML/CSS] overflow-y 속성 예를 들어 div 안에 글 내용이 많아서 스크롤이 필요할 때 사용하는 옵션입니다.overflow:scroll 로 사용이 가능하지만 상하 및 좌우까지 스크롤바가 생기는 문제가 있습니다. 이런 경우는 overflow-y:scroll 또는 overflow-y:auto 를 사용하면 됩니다.auto는 내용이 공간을 벗어날 경우에 스크롤바가 생깁니다.

HTML/CSS 문자열이 특정폭 길이를 넘을때 한줄에 문자열이 너무 길면 다음줄로 넘어가거나 overflow 설정에 따라 안보이게 하게 할 수 있습니다. 안보이게 하는 대신에 ... 으로 표현하는 방법입니다. 텍스트 내용~~ 위 코드를 응용하시면 됩니다.

DIV 팝업레이어 뒷쪽에 클릭이 안되게 처리 팝업레이어에 IFRAME 으로 파일을 불러들이지 않으면 레이어 뒤쪽으로 버튼이 있거나 하면 마우스클릭시 뒷쪽 이벤트가 먹힙니다.이것을 CSS로 방지하는 방법입니다.브라우저에 따라 안먹힐 수도 있습니다.function action_PopupOpen(_layer) {document.getElementById(_layer).style.display='block';$('body').css("pointer-events","none");} function action_PopupClose(_layer) {document.getElementById(_layer).style.display='none';$('body').css("pointer-events","auto");} 팝..

HTML/CSS INPUT readOnly 효과 위의 필드를 읽기전용으로 처리하는 방법 ▶ javascriptdocument.getElementById('testInput').readOnly = true; ▶ jQuery$('#testInput').attr("readonly", true); ▶ css#testInput { pointer-events:none; } 실제 readonly 가 아닌 readonly 의 효과를 주는 것입니다.

CSS 여러개의 클래스 중에 몇번째 이후만 다르게 적용 다중 class 에서 특정 위치부터 nth-of-type 을 이용해서 스타일을 다르게 적용할 수가 있습니다. 1 line 2 line 3 line 4 line 5 line 6 line 7 line 위 예제는 4번째 부터 적용하라는 의미 입니다. 아래는 2, 4, 6 번째를 적용하는 예제입니다. 1 line 2 line 3 line 4 line 5 line 6 line 7 line

CSS IE 에서 스크롤바가 안나타나는 경우 브라우저에 페이지가 넘어가는데도 세로스크롤바가 나타나지 않는 경우가 있습니다.크롬은 정상적으로 보여집니다.윈도우XP 익스플로러 7~8 버전의 버그인 듯 한데 이런 경우엔CSS 에서 overflow-y:auto 를 추가해주면 됩니다.body { overflow-y:auto; }브라우저 마다 다르고, IE 는 버전 마다 보이는게 다르니 호환성 있게 작업하는게 어려울 겁니다.어떤 홈페이지는 IE 8 이하는 포기하고 만드는 곳도 요즘은 많더군요~

HTML/CSS IE 7, 8 @media screen 안먹는 문제 익스플로러 8버전 이하에서는 @media screen 이 먹히지가 않습니다. https://github.com/heathcliff/css3-mediaqueries-js 여기에 가면 ie8 이하에서도 동작하도록 자바스크립트로 만들어진 파일을 다운로드 받을 수 있습니다. https://github.com/heathcliff/css3-mediaqueries-js/blob/master/css3-mediaqueries.js 긁어서 css3-mediaqueries.js 파일로 저장을 하면 됩니다. 사용예제