프로그래머 문호영
Written by
in
이 소스는 지식인에 반응형 버튼 문의가 올라와서 소스코드로 직접 만들어보았습니다.
아래 소스코드를 그대로 복사하셔서 붙여넣어 사용가능합니다
<!doctype html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>반응형 웹 버튼 만들기</title> <style> /* 최소 비율 */ @media (min-aspect-ratio: 8/5) { div { background: #9af; /* blue */ } } /* 최고 비율 */ @media (max-aspect-ratio: 3/2) { div { background: #9ff; /* cyan */ } } /* 기본 */ @media (aspect-ratio: 1/1) { div { background: #f9a; /* red */ } } </style> </head> <body> <label id="wf" for="w">width:250</label> <input id="w" name="w" type="range" min="100" max="250" step="5" value="165"> <label id="hf" for="w">height:250</label> <input id="h" name="h" type="range" min="100" max="250" step="5" value="165"> <iframe id="outer" src="data:text/html,<style> @media (min-aspect-ratio: 8/5) { div { background: %239af; } } @media (max-aspect-ratio: 3/2) { div { background: %239ff; } } @media (aspect-ratio: 1/1) { div { background: %23f9a; } }</style><div id='inner'>this...</div>" style="height: 250px; width: 250px;"> </iframe> <script> outer.style.width=outer.style.height="165px" w.onchange=w.oninput=function(){ outer.style.width=w.value+"px" wf.textContent="width:"+w.value } h.onchange=h.oninput=function(){ outer.style.height=h.value+"px" hf.textContent="height:"+h.value } </script> </body> </html>