<![CDATA[
<p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>HTML CSS 및 JavaScript를 사용한 반응형 웹 레이아웃 </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>~에 의해점쟁이-2023년 11월 22일0 코멘트 </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>반응형 웹 디자인 템플릿 </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>반응형 웹 디자인은 웹 개발자가 다양한 기기와 창 또는 화면 크기에서 웹페이지를 잘 렌더링하기 위해 사용하는 효과적인 기술입니다. 반응형 웹 디자인은 사용자가 사용하는 화면 크기에 관계없이 최상의 사용자 경험을 보장하는 것을 목표로 합니다. 반응형 웹 디자인 템플릿은 요즘 중소형 디바이스의 사용이 그 어느 때보다 증가했기 때문에 더욱 인기가 높습니다. 오늘은 HTML, CSS, JavaScript를 사용하여 반응형 웹사이트 레이아웃을 디자인해 보겠습니다. 자세한 코딩 과정은 아래 비디오 튜토리얼에 나와 있습니다. 소스코드를 수집하기 전에 영상을 시청하세요. 소스코드를 이해하는데 도움이 될 것입니다. 채널 콘텐츠가 마음에 드신다면 저희 채널을 구독하세요 </b></span><br><br><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>비디오 튜토리얼: </b></span><br><br><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>비디오 튜토리얼을 시청하셨기를 바랍니다. 반응형 웹 디자인은 웹 개발 프로세스에서 중요한 부분입니다. 웹사이트는 점점 더 다양해지는 사용자 장치에 반응해야 합니다. 장치 다양성 외에도 사용자 경험, SEO, 유지 관리 효율성 등으로 인해 반응형 웹 디자인 템플릿이 더 효과적입니다. </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>오늘의 블로그 게시물에서는 상단에 탐색바가 있는 웹사이트 레이아웃을 디자인했습니다. 탐색 모음의 왼쪽에는 로고가 있고 오른쪽에는 메뉴 항목이 있습니다. 스니펫은 디지털 대행사 회사를 대상으로 만들어졌습니다. 그래서 그에 관련된 배경 이미지가 설정됩니다. 두 가지 행동 촉구가 제목과 부제목 아래에 나와 있습니다. 스니펫이 반응형일 때 애니메이션 햄버거 메뉴가 사용됩니다. 즉, 소형 장치의 경우 가로 메뉴가 숨겨집니다. 사용자가 햄버거 아이콘을 클릭하면 애니메이션이 오른쪽에서 팝업됩니다. CSS 미디어 쿼리는 스니펫을 반응형으로 만드는 데 사용됩니다. 이 구성 요소를 사용하면 개발자는 다양한 요인에 따라 웹 페이지에 다양한 스타일을 적용할 수 있습니다. </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>당신은 또한 좋아할 것입니다: </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>부트스트랩 5 웹 레이아웃 디자인 </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>CSS Flexbox 반응형 이미지 갤러리 </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>플립 애니메이션을 사용한 부트스트랩 5 추천사 </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>HTML CSS 및 JavaScript를 사용한 반응형 웹 레이아웃 [ 소스 코드 ]: </b></span><br><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>오늘날의 반응형 웹 레이아웃을 만들려면 먼저 HTML 및 CSS 파일을 만드세요. 별도의 JS 파일을 생성하고 스니펫에 사용되는 자바스크립트 코드를 넣을 수 있습니다. 그러나 HTML 파일에 연결해야 합니다. 우리 프로젝트에서는 JavaScript 코드가 HTML 파일 아래에 배치됩니다. 상자에서 아래 코드를 복사하여 파일에 붙여넣고 저장한 후 브라우저에서 열어 작동하는지 확인하세요. 문제가 있으면 아래 다운로드 버튼에서 코드를 다운로드하세요. </b></span><br><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>HTML 추가: </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><!DOCTYPE html> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><html lang="en"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><!-- divinectorweb.com -->     </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><head> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <meta charset="UTF-8">  </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <title>How to Create a Responsive Website Layout</title> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <link rel="stylesheet" href="style.css"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b></head> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><body> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <header> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        <nav> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            <div class="logo"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                <h5>Outranko</h5> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            </div> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            <ul class="menu"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                <li><a href="#">Home</a></li> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                <li><a href="#">About</a></li> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                <li><a href="#">Portfolio</a></li> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                <li><a href="#">Services</a></li> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                <li><a href="#">Contact</a></li> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            </ul> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            <div class="bar"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                <div class="bar-1"></div> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                <div class="bar-2"></div> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                <div class="bar-3"></div> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            </div> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        </nav> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    </header> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <div class="banner"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        <div class="wrapper"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            <div class="content"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                <h2>Digital Agency</h2> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit Soluta</p> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                <div class="btn"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                    <a href="#">Learn More</a> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                    <a href="#">Sign up</a> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                </div>                   </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            </div> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        </div> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    </div> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>     </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>     </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <script> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        const X = () => { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            const menu = document.querySelector('.bar'); </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            const nav = document.querySelector('.menu'); </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>             </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            menu.addEventListener('click', () => { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>               menu.classList.toggle('bar-active'); </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                nav.classList.toggle('nav-active'); </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            }); </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        } </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        X(); </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    </script> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b></body> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b></html> </b></span><br><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>복사 </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>CSS를 추가하세요: </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>* { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>margin: 0; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>padding: 0; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>box-sizing: border-box; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>font-family: sans-serif; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>nav { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>display: -webkit-flex; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>display: -moz-flex; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>display: -ms-flex; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>display: -o-flex; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>display: flex; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>justify-content: space-around; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>align-items: center; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>min-height: 10vh; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>background: #fff; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.logo { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>color: #141733; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>text-transform: capitalize; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>font-size: 24px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>cursor: pointer; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>font-weight: 900; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>letter-spacing: 1px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.menu { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>display: -webkit-flex; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>display: -moz-flex; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>display: -ms-flex; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>display: -o-flex; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>display: flex; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>justify-content: space-around; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>width: 30%; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.menu li { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>list-style: none; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.menu a { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>color: #141733; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>text-decoration: none; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>font-size: 15px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>padding: 30px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>font-weight: 600; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.menu a:hover { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>color: #ff6138; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>transition: .6s; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.bar { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>display: none; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>cursor: pointer; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.bar div { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>width: 25px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>height: 3px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>background-color: #ff6138; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>margin: 5px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>transition: all .5s ease; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>@media screen and (max-width:1024px) { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.menu { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>width: 60%; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.menu a { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>color: #fff; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>@media screen and (max-width:768px) { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>body { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>overflow-x: hidden; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.menu { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>position: absolute; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>right: -100%; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>height: 90vh; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>top: 10vh; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>background-color: #000; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>display: flex; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>flex-direction: column; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>align-items: center; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>width: 100%; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>transform: translateX(100%); </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>transition: transform 0.5s ease-in-out; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>opacity: .9; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.bar { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>display: block; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.menu a { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>color: #fff; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.nav-active { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>transform: translateX(-100%); </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.bar-active .bar-1 { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>transform: rotate(-45deg) translate(-5px, 6px); </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.bar-active .bar-2 { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>opacity: 0; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.bar-active .bar-3 { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>transform: rotate(45deg) translate(-5px, -6px); </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.banner { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>background-image: url(2.jpg); </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>height: 100vh; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>background-size: cover; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>background-position: center; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.content h2 { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>color: #fff; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>font-size: 60px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>font-weight: 900; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.content p { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>width: 50%; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>color: #fff; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>line-height: 2; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>margin: auto; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.btn a { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>text-decoration: none; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>background: #ff6138; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>padding: 15px 10px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>display: inline-block; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>color: #fff; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>margin-top: 15px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>border-radius: 50px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>width: 130px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>text-align: center; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.wrapper { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>width: 1060px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>margin: auto; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>padding-top: 12%; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.content { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>text-align: center; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>@media only screen and (min-width: 768px) and (max-width: 991px) { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.wrapper { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>width: 75%; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>padding-top: 26%; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.content { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>text-align: center; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.content h2 { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>font-size: 60px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.content p { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>width: 100%; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>@media screen and (max-width: 767px) { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.banner { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>background-position: 60%; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.wrapper { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>width: 75%; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>padding-top: 26%; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.content h2 { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>font-size: 25px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.content p { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>width: 100%; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.btn a { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>padding: 9px 4px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>width: 105px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>복사 </b></span><br><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>코드가 제대로 작동하길 바랍니다. 이와 같은 더 많은 스니펫을 보려면 홈페이지에서 추가 로드 버튼을 클릭하세요. 당사 웹사이트 콘텐츠가 마음에 드신다면 다른 사람들과 공유해 주세요. 저희 웹사이트를 방문해 주셔서 감사합니다. </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>코드 다운로드 </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>index_html </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><!DOCTYPE html> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><html lang="en"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><!-- divinectorweb.com -->     </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><head> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <meta charset="UTF-8">  </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <title>How to Create a Responsive Website Layout</title> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <link rel="stylesheet" href="style.css"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <style> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    * { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>margin: 0; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>padding: 0; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>box-sizing: border-box; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>font-family: sans-serif; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>nav { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>display: -webkit-flex; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>display: -moz-flex; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>display: -ms-flex; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>display: -o-flex; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>display: flex; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>justify-content: space-around; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>align-items: center; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>min-height: 10vh; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>background: #fff; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.logo { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>color: #141733; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>text-transform: capitalize; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>font-size: 24px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>cursor: pointer; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>font-weight: 900; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>letter-spacing: 1px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.menu { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>display: -webkit-flex; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>display: -moz-flex; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>display: -ms-flex; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>display: -o-flex; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>display: flex; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>justify-content: space-around; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>width: 30%; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.menu li { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>list-style: none; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.menu a { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>color: #141733; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>text-decoration: none; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>font-size: 15px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>padding: 30px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>font-weight: 600; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.menu a:hover { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>color: #ff6138; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>transition: .6s; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.bar { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>display: none; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>cursor: pointer; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.bar div { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>width: 25px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>height: 3px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>background-color: #ff6138; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>margin: 5px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>transition: all .5s ease; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>@media screen and (max-width:1024px) { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.menu { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>width: 60%; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.menu a { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>color: #fff; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>@media screen and (max-width:768px) { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>body { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>overflow-x: hidden; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.menu { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>position: absolute; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>right: -100%; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>height: 90vh; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>top: 10vh; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>background-color: #000; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>display: flex; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>flex-direction: column; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>align-items: center; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>width: 100%; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>transform: translateX(100%); </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>transition: transform 0.5s ease-in-out; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>opacity: .9; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.bar { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>display: block; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.menu a { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>color: #fff; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.nav-active { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>transform: translateX(-100%); </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.bar-active .bar-1 { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>transform: rotate(-45deg) translate(-5px, 6px); </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.bar-active .bar-2 { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>opacity: 0; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.bar-active .bar-3 { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>transform: rotate(45deg) translate(-5px, -6px); </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.banner { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>background-image: url(2.jpg); </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>height: 100vh; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>background-size: cover; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>background-position: center; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.content h2 { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>color: #fff; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>font-size: 60px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>font-weight: 900; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.content p { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>width: 50%; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>color: #fff; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>line-height: 2; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>margin: auto; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.btn a { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>text-decoration: none; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>background: #ff6138; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>padding: 15px 10px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>display: inline-block; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>color: #fff; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>margin-top: 15px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>border-radius: 50px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>width: 130px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>text-align: center; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.wrapper { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>width: 1060px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>margin: auto; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>padding-top: 12%; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.content { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>text-align: center; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>@media only screen and (min-width: 768px) and (max-width: 991px) { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.wrapper { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>width: 75%; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>padding-top: 26%; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.content { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>text-align: center; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.content h2 { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>font-size: 60px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.content p { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>width: 100%; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>@media screen and (max-width: 767px) { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.banner { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>background-position: 60%; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.wrapper { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>width: 75%; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>padding-top: 26%; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.content h2 { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>font-size: 25px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.content p { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>width: 100%; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.btn a { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>padding: 9px 4px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>width: 105px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>     </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    </style> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b></head> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><body> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <header> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        <nav> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            <div class="logo"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                <h5>Outranko</h5> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            </div> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            <ul class="menu"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                <li><a href="#">Home</a></li> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                <li><a href="#">About</a></li> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                <li><a href="#">Portfolio</a></li> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                <li><a href="#">Services</a></li> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                <li><a href="#">Contact</a></li> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            </ul> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            <div class="bar"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                <div class="bar-1"></div> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                <div class="bar-2"></div> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                <div class="bar-3"></div> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            </div> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        </nav> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    </header> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <div class="banner"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        <div class="wrapper"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            <div class="content"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                <h2>Digital Agency</h2> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit Soluta</p> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                <div class="btn"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                    <a href="#">Learn More</a> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                    <a href="#">Sign up</a> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                </div>                   </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            </div> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        </div> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    </div> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>     </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>     </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <script> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        const X = () => { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            const menu = document.querySelector('.bar'); </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            const nav = document.querySelector('.menu'); </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>             </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            menu.addEventListener('click', () => { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>               menu.classList.toggle('bar-active'); </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                nav.classList.toggle('nav-active'); </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            }); </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        } </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        X(); </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    </script> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b></body> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b></html> </b></span><br><br><br><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>HTML  tag </b></span><br><br><br><br><br><br><br><br><br><br><br></p>
<!-- -->
]]>
