프로그래머 문호영

[태그:] 반응형홈페이지소스

반응형 홈페이지

이 소스는 지식인에 반응형 버튼 문의가 올라와서 소스코드로 직접 만들어보았습니다.

아래 소스코드를 그대로 복사하셔서 붙여넣어 사용가능합니다

width:250 height:250 <p><img decoding="async" class="alignnone wp-image-90 size-full" src="https://munhoyoung.com/wp-content/uploads/2020/08/반응형홈페이지.gif" alt="" width="704" height="324" /></p> <h1>반응형 버튼 소스코드</h1> <pre><!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></pre> <p> </p> </div> <div style="margin-top:var(--wp--preset--spacing--40);" class="wp-block-post-date has-small-font-size"><time datetime="2020-08-08T10:57:48+09:00"><a href="https://munhoyoung.com/%eb%b0%98%ec%9d%91%ed%98%95%ed%99%88%ed%8e%98%ec%9d%b4%ec%a7%80/">08/08/2020</a></time></div> </div> </li></ul> <div class="wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained" style="padding-top:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--60)"> </div> <div class="wp-block-group alignwide has-global-padding is-layout-constrained wp-block-group-is-layout-constrained"> </div> </div> </main> <footer class="wp-block-template-part"> <div class="wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained" style="padding-top:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--50)"> <div class="wp-block-group alignwide is-layout-flow wp-block-group-is-layout-flow"> <div class="is-default-size wp-block-site-logo"><a href="https://munhoyoung.com/" class="custom-logo-link" rel="home"><img loading="lazy" width="512" height="512" src="https://munhoyoung.com/wp-content/uploads/2020/07/cropped-cropped-이미지_2020-07-26_오전-5_42_10.jpg" class="custom-logo" alt="프로그래머 문호영" decoding="async" srcset="https://munhoyoung.com/wp-content/uploads/2020/07/cropped-cropped-이미지_2020-07-26_오전-5_42_10.jpg 512w, https://munhoyoung.com/wp-content/uploads/2020/07/cropped-cropped-이미지_2020-07-26_오전-5_42_10-300x300.jpg 300w, https://munhoyoung.com/wp-content/uploads/2020/07/cropped-cropped-이미지_2020-07-26_오전-5_42_10-150x150.jpg 150w" sizes="auto, (max-width: 512px) 100vw, 512px" /></a></div> <div class="wp-block-group alignfull is-content-justification-space-between is-layout-flex wp-container-core-group-is-layout-10 wp-block-group-is-layout-flex"> <div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-1 wp-block-columns-is-layout-flex"> <div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:100%"><h2 class="wp-block-site-title"><a href="https://munhoyoung.com" target="_self" rel="home">프로그래머 문호영</a></h2> <p class="wp-block-site-tagline">프로그래머 문호영 닷컴 munhoyoung.com 文鎬榮网站ムン·ホヨンドットコム Мун Хо Янг Датком Moon Ho-young und Dotcom</p> </div> <div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow"> <div style="height:var(--wp--preset--spacing--40);width:0px" aria-hidden="true" class="wp-block-spacer"></div> </div> </div> <div class="wp-block-group is-content-justification-space-between is-layout-flex wp-container-core-group-is-layout-9 wp-block-group-is-layout-flex"> <nav class="is-vertical wp-block-navigation is-layout-flex wp-container-core-navigation-is-layout-2 wp-block-navigation-is-layout-flex" aria-label=""><ul class="wp-block-navigation__container is-vertical wp-block-navigation"><li class=" wp-block-navigation-item wp-block-navigation-link"><a class="wp-block-navigation-item__content" href="#"><span class="wp-block-navigation-item__label">Blog</span></a></li><li class=" wp-block-navigation-item wp-block-navigation-link"><a class="wp-block-navigation-item__content" href="#"><span class="wp-block-navigation-item__label">소개</span></a></li><li class=" wp-block-navigation-item wp-block-navigation-link"><a class="wp-block-navigation-item__content" href="#"><span class="wp-block-navigation-item__label">FAQs</span></a></li><li class=" wp-block-navigation-item wp-block-navigation-link"><a class="wp-block-navigation-item__content" href="#"><span class="wp-block-navigation-item__label">Authors</span></a></li></ul></nav> <nav class="is-vertical wp-block-navigation is-layout-flex wp-container-core-navigation-is-layout-3 wp-block-navigation-is-layout-flex" aria-label=""><ul class="wp-block-navigation__container is-vertical wp-block-navigation"><li class=" wp-block-navigation-item wp-block-navigation-link"><a class="wp-block-navigation-item__content" href="#"><span class="wp-block-navigation-item__label">Events</span></a></li><li class=" wp-block-navigation-item wp-block-navigation-link"><a class="wp-block-navigation-item__content" href="#"><span class="wp-block-navigation-item__label">Shop</span></a></li><li class=" wp-block-navigation-item wp-block-navigation-link"><a class="wp-block-navigation-item__content" href="#"><span class="wp-block-navigation-item__label">Patterns</span></a></li><li class=" wp-block-navigation-item wp-block-navigation-link"><a class="wp-block-navigation-item__content" href="#"><span class="wp-block-navigation-item__label">Themes</span></a></li></ul></nav> </div> </div> <div style="height:var(--wp--preset--spacing--70)" aria-hidden="true" class="wp-block-spacer"></div> <div class="wp-block-group alignfull is-content-justification-space-between is-layout-flex wp-container-core-group-is-layout-11 wp-block-group-is-layout-flex"> <p class="has-small-font-size">Twenty Twenty-Five</p> <p class="has-small-font-size"> Designed with <a href="https://wordpress.org" rel="nofollow">WordPress</a> </p> </div> </div> </div> </footer> </div> <script id="wp-block-template-skip-link-js-after"> ( function() { var skipLinkTarget = document.querySelector( 'main' ), sibling, skipLinkTargetID, skipLink; // Early exit if a skip-link target can't be located. if ( ! skipLinkTarget ) { return; } /* * Get the site wrapper. * The skip-link will be injected in the beginning of it. */ sibling = document.querySelector( '.wp-site-blocks' ); // Early exit if the root element was not found. if ( ! sibling ) { return; } // Get the skip-link target's ID, and generate one if it doesn't exist. skipLinkTargetID = skipLinkTarget.id; if ( ! skipLinkTargetID ) { skipLinkTargetID = 'wp--skip-link--target'; skipLinkTarget.id = skipLinkTargetID; } // Create the skip link. skipLink = document.createElement( 'a' ); skipLink.classList.add( 'skip-link', 'screen-reader-text' ); skipLink.href = '#' + skipLinkTargetID; skipLink.innerHTML = '콘텐츠로 바로가기'; // Inject the skip link. sibling.parentElement.insertBefore( skipLink, sibling ); }() ); </script> <script id="ez-toc-scroll-scriptjs-js-extra"> var eztoc_smooth_local = {"scroll_offset":"30","add_request_uri":"","add_self_reference_link":""}; </script> <script src="https://munhoyoung.com/wp-content/plugins/easy-table-of-contents/assets/js/smooth_scroll.min.js?ver=2.0.74" id="ez-toc-scroll-scriptjs-js"></script> <script src="https://munhoyoung.com/wp-content/plugins/easy-table-of-contents/vendor/js-cookie/js.cookie.min.js?ver=2.2.1" id="ez-toc-js-cookie-js"></script> <script src="https://munhoyoung.com/wp-content/plugins/easy-table-of-contents/vendor/sticky-kit/jquery.sticky-kit.min.js?ver=1.9.2" id="ez-toc-jquery-sticky-kit-js"></script> <script id="ez-toc-js-js-extra"> var ezTOC = {"smooth_scroll":"1","visibility_hide_by_default":"","scroll_offset":"30","fallbackIcon":"<span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span>","chamomile_theme_is_on":""}; </script> <script src="https://munhoyoung.com/wp-content/plugins/easy-table-of-contents/assets/js/front.min.js?ver=2.0.74-1746465850" id="ez-toc-js-js"></script> </body> </html>

[태그:] 반응형홈페이지소스

반응형 홈페이지