목록으로

반응형 웹에서 기본 구조

반응형웹 기본

즐겨찾기

보관

조회 2,747 2026-08-18 등록

소개

<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>반응형 웹 기본 템플릿</title> <style> :root { --main-color: #333; --nav-bg: #444; --dropdown-bg: #555; --text-color: #fff; --link-color: #333; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: sans-serif; line-height: 1.6; } a { text-decoration: none; color: inherit; } header { background: var(--main-color); color: var(--text-color); } .site-header { display: flex; justify-content: space-between; align-items: center; padding: 10px 20px; } .site-logo { font-size: 20px; } .menu-toggle { display: none; font-size: 24px; background: none; border: none; color: var(--text-color); cursor: pointer; } nav.main-nav { display: flex; justify-content: center; background: var(--nav-bg); } .nav-item { position: relative; } .main-nav > .nav-item > a { display: block; padding: 15px 20px; color: var(--text-color); } .dropdown { display: none; position: absolute; background: var(--dropdown-bg); min-width: 120px; z-index: 10; } .nav-item:hover .dropdown { display: block; } .dropdown a { display: block; padding: 10px; color: var(--text-color); } .layout { display: flex; gap: 20px; max-width: 1200px; margin: auto; padding: 20px; } aside.sidebar { width: 250px; } .sidebar ul { list-style: none; } .sidebar li { margin-bottom: 5px; } .sidebar a { display: block; padding: 10px; background: #eee; color: var(--link-color); } main.main-content { flex: 1; } footer.site-footer { background: #f0f0f0; text-align: center; padding: 20px; margin-top: 40px; font-size: 14px; color: #666; } /* 모바일 우선 스타일 */ @media (max-width: 768px) { .menu-toggle { display: block; } nav.main-nav { flex-direction: column; display: none; } nav.main-nav.show { display: flex; } .main-nav > .nav-item > a { padding: 12px 16px; border-top: 1px solid #555; } .dropdown { position: static; } .nav-item:hover .dropdown { display: none; } .nav-item .dropdown { display: none; flex-direction: column; } .nav-item.show .dropdown { display: flex; } .layout { flex-direction: column; } aside.sidebar { width: 100%; } .sidebar ul { display: flex; flex-direction: row; gap: 10px; flex-wrap: wrap; } .sidebar li { margin-bottom: 0; } .sidebar a { white-space: nowrap; } } /* PC에서 우측 정렬되는 본문 내 텍스트 */ .main-content .page-message { text-align: left; margin-top: 20px; } </style> </head> <body> <header> <div class="site-header"> <div class="site-logo">로고</div> <button class="menu-toggle" aria-label="메뉴 열기" onclick="toggleMenu()" > ☰ </button> </div> <nav class="main-nav" id="mainNav"> <div class="nav-item"> <a href="#" onclick="toggleDropdown(event)">회사소개.</a> <div class="dropdown"> <a href="#">인사말</a> <a href="#">오시는길</a> </div> </div> <div class="nav-item"> <a href="#" onclick="toggleDropdown(event)">제품소개.</a> <div class="dropdown"> <a href="#">제품A</a> <a href="#">제품B</a> </div> </div> <div class="nav-item"> <a href="#" onclick="toggleDropdown(event)">고객센터</a> <div class="dropdown"> <a href="#">공지사항</a> <a href="#">자주묻는질문</a> </div> </div> </nav> </header> <div class="layout"> <aside class="sidebar"> <ul> <li><a href="#">회사소개</a></li> <li><a href="#">인사말</a></li> <li><a href="#">오시는길</a></li> </ul> </aside> <main class="main-content"> <div class="page-message"> <span>안녕하세요</span> </div> </main> </div> <footer class="site-footer">ⓒ 2025 나의 웹사이트. 모든 권리 보유.</footer> <script> function toggleMenu() { document.getElementById("mainNav").classList.toggle("show"); } function toggleDropdown(event) { if (window.innerWidth <= 768) { event.preventDefault(); const item = event.target.closest(".nav-item"); item.classList.toggle("show"); } } </script> </body> </html>

의견 0

로그인하면 의견을 남길 수 있습니다.

아직 의견이 없습니다. 첫 의견을 남겨보세요.

비슷한 사이트

게시글

모바일 홈페이지 상단에 선언하는 meta

모바일에서 홈페이지를 접근하게 되면 100% 적용안될경우가 있는데 그것은 meta를 선언하지 않았기 때문이다 아래는 필자가 모바일에서 사용하는 메타태그이다

html5 문서의 기본폼을 잘설명해 놓은 주소입니다

blog.tommyzip.co.kr

TOMMYZIP 블로그에 올라온 'HTML5 태그 및 기본 구조' 글입니다. HTML5 문서가 어떻게 구성되는지와 새로 도입된 의미 있는 태그들을 한 편에 정리했습니다. WHATWG 설립부터 W3C가 표준 권한을 넘기기까지의 HTML5 표준화 흐름을 짚고, header·footer·nav·main·section·article·aside 같은 구조 요소의 용도를 설명합니다. audio·video·canvas 등 멀티미디어 요소, 확장된 input 타입과 datalist 같은 폼 요소, 용도가 바뀌거나 삭제된 요소도 다룹니다. HTML 문서의 기본 뼈대를 익히려는 웹 퍼블리싱 입문자에게 유용합니다.

Next.js 리엑트 홈페이지 강좌

www.youtube.com

유튜브 채널 '코딩앙마'의 Next.js 강좌 재생목록 첫 영상 'Next js 강좌 #1 소개, 페이지 레이아웃 (Intro, Page layout)'이다. 리액트(React) 기반 웹 프레임워크 Next.js로 홈페이지를 만드는 과정을 여러 편에 걸쳐 설명하는 강좌의 시작 편이다. 1편에서는 강좌 소개와 함께 Next.js 프로젝트의 페이지 레이아웃 구성을 다루며, 재생목록의 이후 영상을 따라가며 리액트로 웹사이트를 단계적으로 만들어 볼 수 있다. 리액트를 익힌 뒤 Next.js로 실제 홈페이지 제작을 연습하고 싶은 프론트엔드 입문자에게 유용하다.

웹디자인CSS 소스

wsss.tistory.com

CSS를 통한 디자인 소스가 제공되는 사이트 입니다. 단순 디자인을 넘어 애니매이션 소스도 같이 제공됩니다 예전에는 플래시로 애니매이션을 만들었다면 지금은 CSS, HTML5, 자바스크립트 등을 통해 애니매이션을 제작 하는 추세입니다 그런 면에서 볼때 아주 도움을 주는 사이트 입니다 아래는 실행 화면입니다 https://wsss.tistory.com/55

css만 삼각형,네모,원,타원,마르모,별등 각종 도형을 만드는 방법

css-tricks.com

The Shapes of CSS는 웹 개발 매체 CSS-Tricks에 실린 글로, 이미지 파일 없이 CSS만으로 다양한 도형을 그리는 방법을 모아 소개합니다. 각 도형은 border, border-radius, ::before·::after 가상 요소, transform 같은 속성을 조합해 만들어집니다. 정사각형·원·타원 같은 기본 도형부터 방향별 삼각형, 오각형·육각형·팔각형, 여러 형태의 별, 하트, 무한대 기호, 다이아몬드, 말풍선, 음양, 팩맨, 자물쇠 등 40여 가지 예제가 정리되어 있고, 도형마다 참고한 출처가 표기되어 있습니다. 아이콘이나 장식 요소를 가벼운 CSS 코드로 구현하려는 웹 퍼블리셔와 프론트엔드 개발자, CSS 속성 활용법을 익히려는 학습자에게 참고가 됩니다.

게시글

간의 영수증 html소스

간이 영수증을 html 코팅으로 만든내용 No. 영 수 증    (공급받는자용) 귀하 공급자 사 업 자등록번호 상호 성명 인 사 업 장소 재 지 업 태 종목 작성일자 금액합계 비고 공 금 내 역 월/일 품명 수량 단가 금액 합 계 위금액을 영수(청구)함.

TEMPLATEWISE 파워포인트

www.templateswise.com

TEMPLATEWISE 의 홈페이지입니다. https://www.templateswise.com 파워포인트로 발표자료를 준비하다 보면 디자인에 많이 신경이 쓰이는 게 사실입니다. 아무리 대충 준비한다고 해도 어느 정도는 예뻐야 마음이 놓이니까요. 그렇게 디자인 고르다 보면 시간이 또 훌쩍 지나가는데요. 여기 파워포인트 템플릿을 굉장히 많이 소개해 주는 곳을 소개 드립니다. TEMPLATEWISE 라는 곳입니다. 이 사이트의 전반적인 디자인 컨셉은 '심플함'입니다. 일관성 있고 모던한 느낌의 스타일들을 제공해 주고 있습니다. 상업적인 이용도 가능합니다. 회원가입 필요도 없고요. 다만 출처는 꼭 표시해 주길 이 사이트에서는 바라고 있습니다. 어떤 조사에서는 템플릿 제공 업체들 중에서도 상위 15위 중 하나로 추천하고 있을 정도네요. 주제 별로 다양한 템플릿이 있습니다. 큰 분류를 보면 교육, 돈, 경제, 음식, 자연, 컴퓨터, 비즈니스 등이 있네요. 또한 다이어그램이나 차트, 혹은 인포그래픽도 사용하기 편하게 유용한 리소스들을 함께 구분해서 제공해 주고 있습니다. 자료의 풍성함을 위해서라면 이런 기능들도 함께 활용하면 좋을 것 같습니다.

게시글

웹폰트를 사용한 텍스트 폰트변경하는 방법

@font-face{font-family:fontstyle01;src:url(NanumGothic.eot);} @font-face{font-family:fontstyle02;src:url(NanumGothicBold.eot);} @font-face{font-family:fontstyle03;src:url(NanumGothicExtraBold.eot);} 웹폰트 NanumGothic.eot 웹폰트 NanumGothicBold.eot 웹폰트 NanumGothicExtraBold.eot 웹폰트를 사용하는 방법이다 스타일부분에 @font-face{font-family: fontstyle01;src:url(/swww/font/RixGoB.eot);} 선언하고 사용하고자 하는곳에 다음과같이 사용하면적용된다 웹폰트 NanumGothic.eot 장점이 틀림없이 있다 그러나 난 별로 사용하지 안는다 이유는 IE에서는 작동되는데 크롬브라우저에서는 적용되지 않는다 그리고 적용되는 IE에서도 로딩과동시에 적용되는것이 아닌 페이지로딩후 조금 후에 글씨체가 변경된다 아무래도 해당 NanumGothic.eot 폰트를 불러오는 시간이 걸리는듯하다 그리고 기본적인 확장자는 ttf인데 이걸 eot파일로 변경한 후에 사용해야된다

전체보기 보관함 즐겨찾기 좋아요 최근목록