jQuery Responsive Web: Making Width same as Height / 반응형웹 가로 세로 높이 같게 만드는 제이쿼리

jQuery Responsive Web: Making Width same as Height

<script>
/*반응형 가로 세로 높이 같게 만들기*/
$(window).resize(function(){
var divWidth = $('ul li').width();
$('ul li').height(divWidth);
});
</script>

댓글

댓글 쓰기

이 블로그의 인기 게시물

Change color of radio button in CSS / CSS로 라디오버튼 색상변경

Change color of radio button in CSS CSS로 라디오버튼 색상변경(순수 CSS 이용 or 이미지 사용) /*radio 버튼 색상변경 */ input[type='radio'] { -webkit-appearance:none; width:16px; height:16px; border:1px solid darkgray; border-radius:50%; outline:none; background:#e6e6e6; } input[type='radio']:before { content:''; display:block; width:60%; height:60%; margin: 20% auto;   border-radius:50%;   } input[type='radio']:checked:before { background:#008675; } /*라디오버튼 색상변경 이미지로*/ input[type='radio']:before { content:''; position:absolute; top:-3px; left:3px; width:16px; height:16px; background:url('../img/radio_unchkd.png')no-repeat; } input[type='radio']:checked:before { content:''; position:absolute; top:-3px; left:3px; width:16px; height:16px; background:url('../img/radio_chkd.png')no-repeat; }
자세한 내용 보기

Make Triangle by using Border Property in CSS / CSS의 보더속성 이용하여 삼각형 만들기

이미지
<div class="triangle"></div> <div class="triangle01"></div> <div class="triangle02"></div> <div class="triangle03"></div> <style> .triangle { width:0; height:0; border-left:200px solid pink; border-right:200px solid yellow; border-top:200px solid orange; border-bottom:200px solid skyblue; float:left; } .triangle01 { width:0; height:0; border-left:200px solid pink; border-right:200px solid transparent; border-top:200px solid transparent; border-bottom:200px solid transparent; float:left; } .triangle02 { width:0; height:0; border-left:200px solid pink; border-right:200px solid transparent; border-top:0 solid transparent; border-bottom:200px solid transparent; float:left; } .triangle03 { width:0; height:0; border-left:400px solid pink; border-right:0px solid transparent; border-top:200px solid transparent; border-bottom:200px solid transparent; float:left;...
자세한 내용 보기

DOM Selector in javascript / 자바스크립트의 선택자 querySelector()

<div id='main'>   <div class="container">   </div> </div> --------------------------------------- (1) 아이디(id)가 main인 요소 선택 document.getElementById('main'); document.querySelector('#main'); (2) 클래스명이 container인 요소 선택 document.getElementsByClassName(' container '); document.querySelector('. container ');  //같은 이름의 클래스가 다수인 경우 첫번째 container 선택 document.querySelectorAll('. container ');  //같은 이름의 클래스가 다수 인 경우 해당하는 모든요소 선택 (3) div태그 요소 선택 document.getElementsByTagName('div'); document.querySelector('div');   //div  태그가 다수인 경우 첫번째 div 선택 document.querySelectorAll('div');   //div  태그가 다수인 경우 모든 div 선택 Browser compatibility(브라우저 지원) Desktop   Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit) Basic support 1 (Yes) 3.5 8 10 3.2
자세한 내용 보기