https://devcafe.co.kr/w/index.php?action=history&feed=atom&title=UI_TOP%EB%A9%94%EB%89%B4_%EC%82%AC%EC%9D%B4%EB%93%9C%EB%B0%94_%EB%A7%8C%EB%93%A4%EA%B8%B0
UI TOP메뉴 사이드바 만들기 - 편집 역사
2026-04-06T00:41:47Z
이 문서의 편집 역사
MediaWiki 1.42.1
https://devcafe.co.kr/w/index.php?title=UI_TOP%EB%A9%94%EB%89%B4_%EC%82%AC%EC%9D%B4%EB%93%9C%EB%B0%94_%EB%A7%8C%EB%93%A4%EA%B8%B0&diff=1465&oldid=prev
2025년 5월 26일 (월) 04:14에 Devcafe님의 편집
2025-05-26T04:14:26Z
<p></p>
<table style="background-color: #fff; color: #202122;" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="ko">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← 이전 판</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">2025년 5월 26일 (월) 13:14 판</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l1">1번째 줄:</td>
<td colspan="2" class="diff-lineno">1번째 줄:</td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;"> </del>== 탑메뉴 만들기 ==</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>== 탑메뉴 만들기 ==</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><source lang=js></div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><source lang=js></div></td></tr>
</table>
Devcafe
https://devcafe.co.kr/w/index.php?title=UI_TOP%EB%A9%94%EB%89%B4_%EC%82%AC%EC%9D%B4%EB%93%9C%EB%B0%94_%EB%A7%8C%EB%93%A4%EA%B8%B0&diff=1464&oldid=prev
Devcafe: 새 문서: == 탑메뉴 만들기 == <source lang=js> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Top Menu Example</title> <style> body { margin: 0; font-family: Arial, sans-serif; } .top-menu { display: flex; justify-content: flex-end; background-color: #2c3e50; padding: 10px 20px; position: fixed; top: 0; width: 100%; z-index: 1000; } .menu-group { position: relative;...
2025-05-26T04:13:57Z
<p>새 문서: == 탑메뉴 만들기 == <source lang=js> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Top Menu Example</title> <style> body { margin: 0; font-family: Arial, sans-serif; } .top-menu { display: flex; justify-content: flex-end; background-color: #2c3e50; padding: 10px 20px; position: fixed; top: 0; width: 100%; z-index: 1000; } .menu-group { position: relative;...</p>
<p><b>새 문서</b></p><div> == 탑메뉴 만들기 ==<br />
<br />
<source lang=js><br />
<!DOCTYPE html><br />
<html lang="en"><br />
<head><br />
<meta charset="UTF-8"><br />
<title>Top Menu Example</title><br />
<style><br />
body {<br />
margin: 0;<br />
font-family: Arial, sans-serif;<br />
}<br />
<br />
.top-menu {<br />
display: flex;<br />
justify-content: flex-end;<br />
background-color: #2c3e50;<br />
padding: 10px 20px;<br />
position: fixed;<br />
top: 0;<br />
width: 100%;<br />
z-index: 1000;<br />
}<br />
<br />
.menu-group {<br />
position: relative;<br />
margin-left: 20px;<br />
}<br />
<br />
.menu-link {<br />
color: #ecf0f1;<br />
font-size: 16px;<br />
text-decoration: none;<br />
padding: 8px;<br />
display: inline-block;<br />
}<br />
<br />
.menu-link:hover {<br />
background-color: #34495e;<br />
border-radius: 5px;<br />
}<br />
<br />
.dropdown {<br />
display: none;<br />
position: absolute;<br />
right: 0;<br />
top: 40px;<br />
background-color: #fff;<br />
border: 1px solid #ccc;<br />
min-width: 150px;<br />
box-shadow: 0px 2px 5px rgba(0,0,0,0.2);<br />
z-index: 999;<br />
}<br />
<br />
.dropdown a {<br />
display: block;<br />
padding: 10px;<br />
color: #2c3e50;<br />
text-decoration: none;<br />
}<br />
<br />
.dropdown a:hover {<br />
background-color: #f1f1f1;<br />
}<br />
<br />
.menu-group:hover .dropdown {<br />
display: block;<br />
}<br />
<br />
.main {<br />
margin-top: 60px;<br />
padding: 20px;<br />
}<br />
</style><br />
</head><br />
<body><br />
<br />
<div class="top-menu"><br />
<div class="menu-group"><br />
<a class="menu-link" href="#">User ▾</a><br />
<div class="dropdown"><br />
<a href="/login.html">Login</a><br />
<a href="/register.html">Register</a><br />
<a href="/profile.html">Profile</a><br />
</div><br />
</div><br />
<div class="menu-group"><br />
<a class="menu-link" href="#">Settings ▾</a><br />
<div class="dropdown"><br />
<a href="/preferences.html">Preferences</a><br />
<a href="/notifications.html">Notifications</a><br />
<a href="/privacy.html">Privacy</a><br />
</div><br />
</div><br />
<div class="menu-group"><br />
<a class="menu-link" href="#">Help ▾</a><br />
<div class="dropdown"><br />
<a href="/docs.html">Documentation</a><br />
<a href="/support.html">Support</a><br />
</div><br />
</div><br />
</div><br />
<br />
<div class="main"><br />
<h1>Welcome</h1><br />
<p>This is your main content area. The top menu stays fixed at the top.</p><br />
</div><br />
<br />
</body><br />
</html><br />
</source><br />
<br />
== 탑메뉴 + 접히는 사이드 바==<br />
<br />
<source lang=js><br />
<!DOCTYPE html><br />
<html><br />
<head><br />
<title>Top Menu (Sub-menu) & 접히는 메뉴 Sidebar</title><br />
<style><br />
body {<br />
font-family: sans-serif;<br />
margin: 0;<br />
padding: 0;<br />
display: flex;<br />
}<br />
<br />
/* Top Menu 스타일 */<br />
.top-menu {<br />
background-color: #333;<br />
color: white;<br />
padding: 15px;<br />
display: flex;<br />
justify-content: space-around; /* 3개 메뉴 균등 배치 */<br />
align-items: center;<br />
width: 100%;<br />
position: fixed;<br />
top: 0;<br />
z-index: 100;<br />
}<br />
<br />
.top-menu-item {<br />
position: relative;<br />
}<br />
<br />
.top-menu-link {<br />
color: white;<br />
text-decoration: none;<br />
padding: 10px 15px;<br />
display: block;<br />
}<br />
<br />
.top-menu-link:hover {<br />
background-color: #555;<br />
}<br />
<br />
.sub-menu {<br />
list-style: none;<br />
padding: 0;<br />
margin: 0;<br />
background-color: #444;<br />
position: absolute;<br />
top: 100%;<br />
left: 0;<br />
width: 150px;<br />
border: 1px solid #555;<br />
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);<br />
display: none; /* 초기 숨김 */<br />
z-index: 101;<br />
}<br />
<br />
.top-menu-item:hover .sub-menu {<br />
display: block; /* 호버 시 표시 */<br />
}<br />
<br />
.sub-menu li a {<br />
color: white;<br />
padding: 10px 15px;<br />
text-decoration: none;<br />
display: block;<br />
}<br />
<br />
.sub-menu li a:hover {<br />
background-color: #666;<br />
}<br />
<br />
.toggle-button {<br />
background: none;<br />
border: none;<br />
color: white;<br />
font-size: 1.2em;<br />
cursor: pointer;<br />
padding: 5px 10px;<br />
position: absolute;<br />
left: 10px; /* 왼쪽 상단에 위치 */<br />
top: 15px;<br />
}<br />
<br />
.top-menu-title {<br />
font-size: 1.5em;<br />
margin: 0 auto; /* 가운데 정렬 */<br />
}<br />
<br />
/* Sidebar 스타일 */<br />
.sidebar {<br />
background-color: #f4f4f4;<br />
width: 250px;<br />
height: 100vh;<br />
position: fixed;<br />
top: 60px; /* Top menu 높이만큼 아래로 */<br />
left: 0;<br />
overflow-x: hidden;<br />
padding-top: 20px;<br />
transition: 0.3s;<br />
}<br />
<br />
.sidebar.collapsed {<br />
width: 0;<br />
}<br />
<br />
.sidebar-menu {<br />
list-style: none;<br />
padding: 0;<br />
margin: 0;<br />
}<br />
<br />
.sidebar-menu-item {<br />
border-bottom: 1px solid #ddd;<br />
}<br />
<br />
.sidebar-menu-item:last-child {<br />
border-bottom: none;<br />
}<br />
<br />
.sidebar-menu-link {<br />
display: block;<br />
padding: 15px 25px;<br />
text-decoration: none;<br />
color: #333;<br />
transition: 0.3s;<br />
}<br />
<br />
.sidebar-menu-link:hover {<br />
background-color: #ddd;<br />
}<br />
<br />
/* Content 스타일 */<br />
.content {<br />
flex-grow: 1;<br />
padding: 20px;<br />
margin-top: 60px; /* Top menu 높이만큼 아래로 */<br />
margin-left: 250px; /* Sidebar 기본 너비만큼 오른쪽으로 */<br />
transition: margin-left 0.3s;<br />
}<br />
<br />
.content.collapsed {<br />
margin-left: 0;<br />
}<br />
</style><br />
</head><br />
<body><br />
<br />
<div class="top-menu"><br />
<button class="toggle-button" onclick="toggleSidebar()">☰</button><br />
<h1 class="top-menu-title">나의 웹사이트</h1><br />
<div class="top-menu-item"><br />
<a href="#" class="top-menu-link">메뉴 1</a><br />
<ul class="sub-menu"><br />
<li><a href="#">서브 메뉴 1-1</a></li><br />
<li><a href="#">서브 메뉴 1-2</a></li><br />
</ul><br />
</div><br />
<div class="top-menu-item"><br />
<a href="#" class="top-menu-link">메뉴 2</a><br />
<ul class="sub-menu"><br />
<li><a href="#">서브 메뉴 2-1</a></li><br />
<li><a href="#">서브 메뉴 2-2</a></li><br />
<li><a href="#">서브 메뉴 2-3</a></li><br />
</ul><br />
</div><br />
<div class="top-menu-item"><br />
<a href="#" class="top-menu-link">메뉴 3</a><br />
<ul class="sub-menu"><br />
<li><a href="#">서브 메뉴 3-1</a></li><br />
</ul><br />
</div><br />
</div><br />
<br />
<div class="sidebar" id="sidebar"><br />
<ul class="sidebar-menu"><br />
<li class="sidebar-menu-item"><br />
<a href="#" class="sidebar-menu-link">메뉴 A</a><br />
</li><br />
<li class="sidebar-menu-item"><br />
<a href="#" class="sidebar-menu-link">메뉴 B</a><br />
</li><br />
<li class="sidebar-menu-item"><br />
<a href="#" class="sidebar-menu-link">메뉴 C</a><br />
</li><br />
<li class="sidebar-menu-item"><br />
<a href="#" class="sidebar-menu-link">메뉴 D</a><br />
</li><br />
</ul><br />
</div><br />
<br />
<div class="content" id="content"><br />
<h2>본문 내용</h2><br />
<p>이곳은 실제 웹사이트의 내용이 표시될 영역입니다. 왼쪽 사이드바를 접거나 펼쳐서 레이아웃 변화를 확인할 수 있습니다.</p><br />
<p>추가적인 내용...</p><br />
</div><br />
<br />
<script><br />
function toggleSidebar() {<br />
const sidebar = document.getElementById("sidebar");<br />
const content = document.getElementById("content");<br />
sidebar.classList.toggle("collapsed");<br />
content.classList.toggle("collapsed");<br />
}<br />
</script><br />
<br />
</body><br />
</html><br />
</source><br />
<br />
[[category:html]] <br />
[[category:메뉴 탑메뉴 사이드바]]</div>
Devcafe