Notice
Recent Posts
Recent Comments
Link
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | |||
| 5 | 6 | 7 | 8 | 9 | 10 | 11 |
| 12 | 13 | 14 | 15 | 16 | 17 | 18 |
| 19 | 20 | 21 | 22 | 23 | 24 | 25 |
| 26 | 27 | 28 | 29 | 30 | 31 |
Tags
- 자료구조와 함께 배우는 알고리즘 입문
- resttemplate
- d
- 자바편
- 코드로배우는스프링부트웹프로젝트
- /etc/network/interfaces
- 구멍가게코딩단
- 스프링부트핵심가이드
- 티스토리 쿠키 삭제
- 코드로배우는스프링웹프로젝트
- 선형대수
- 친절한SQL튜닝
- 처음 만나는 AI수학 with Python
- 네트워크 설정
- 스프링 시큐리티
- 페이징
- 서버설정
- 자료구조와함께배우는알고리즘입문
- 처음 만나는 AI 수학 with Python
- ㅒ
- Kernighan의 C언어 프로그래밍
- network configuration
- baeldung
- GIT
- 데비안
- iterator
- 알파회계
- 리눅스
- 이터레이터
- 목록처리
Archives
- Today
- Total
bright jazz music
순수 사이드바 본문
https://www.youtube.com/watch?v=oSkDGtoY83A
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>사이드바 예제</title>
<style>
/* 초기 리셋 스타일 */
*{
box-sizing: border-box;
}
html, body {
margin: 0;
padding: 0;
}
/* rem 사용을 위한 루트 글자 크기 설정 */
html{
font-size:15px;
}
/* 기본 배치
-<div class="container"> : 사이드바가 표시되는 화면
-<div class="container collapse">:사이드바가 숨겨지는 화면
*/
.container{
position: relative;
}
.container > .sidebar{
/* sidebar는 화면을 기준으로 배치 */
background-color: #ffeaa7;
position: fixed;
left:0;
top:0;
bottom: 0;
width:15rem;
padding: 1rem;
z-index:9999;
}
.container > .contents{
background-color: #74b9ff;
/* contents는 메인페이지(.container)를 기준으로 배치 */
position:absolute;
left:15rem;
right: 0;
top:0;
padding:1rem;
}
/* 숨김상태의 처리
-사이드바는 화면 밖으로 이동시킴
-컨텐츠 영역은 사이드바가 사라진 자리를 채움 */
.container.collapse{}
.container.collapse > .sidebar{
left:-15rem;
}
.container.collapse > .contents{
left:0;
}
/* 부드럽게 이동하도록 transition 처리 */
.container > .sidebar {
/* transition-property: margin-left; */
transition-property:left, padding-left;
transition-duration:0.3s;
transition-timing-function: linear;
}
.container > .contents{
/* transition-property: margin-left; */
transition-property:left, padding-left;
transition-duration:0.3s;
transition-timing-function: linear;
}
/* 메뉴 버튼 디자인
-화면에 고정하고 모든 화면보다 우선 표시되도록 처리
*/
.container > .sidebar > .toggle{
position:fixed;
top:1rem;
left: 1rem;
z-index: 100000;
display:flex;
justify-content: center;
align-items: center;
width: 2.5em;
height: 2.5em;
border: 1px dotted red;
}
.container > .sidebar > .toggle{}
/* 메뉴와 화면이 겹치는 현상을 해결하기 위해 스타일 추가
-사이드 바는 상단 여백을 부여
-컨텐츠 영역은 좌측 여백을 숨김 상태일 경우 부여(transition) 설정
*/
.container > .sidebar{
padding-top: 4.5rem;
}
.container.collapse > .contents{
padding-left: 4.5rem;
}
/* 메뉴를 더 잘보이도록 변경
-span 3개를 배치하여 디자인 부여
*/
.container > .sidebar > .toggle > span{
position: absolute;
width:80%;
height:10%;
background-color: black;
/*
<div class="container"> 일 경우 메뉴 모양을 표시
<div class="container collapse"> 일 경우 x모양을 표시
*/
}
.container > .sidebar > .toggle > span:nth-child(1){}
.container > .sidebar > .toggle > span:nth-child(2){}
.container > .sidebar > .toggle > span:nth-child(3){}
.container.collapse > .sidebar > .toggle > span:nth-child(1){
top: 10%;
left: 10%;
}
.container.collapse > .sidebar > .toggle > span:nth-child(2){
top: 50%;
left: 10%;
transform: translateY(-50%);
}
.container.collapse > .sidebar > .toggle > span:nth-child(3){
top: 90%;
left: 10%;
transform: translateY(-100%);
}
</style>
<script>
// 메뉴 상태변경 버튼을 누르면 .container 상태를 변경하도록 처리
window.addEventListener("load", function(){
document.querySelector(".toggle").addEventListener("click", function(){
document.querySelector(".container").classList.toggle("collapse");
});
})
</script>
</head>
<body>
<!-- 메인 영역 -->
<div class="container">
<!-- 사이드바 영역 -->
<div class="sidebar">
<!-- 메뉴 상태 변경 버튼 추가 :햄버거버튼-->
<!-- <label class="toggle">≡</label> -->
<label class="toggle">
<span></span>
<span></span>
<span></span>
</label>
sidebar
</div>
<!-- 컨텐츠 영역 : 더미텍스트 (Lorem ipsum)을 활용하여 내용 강제로 늘려 테스트-->
<div class="contents">
<h1>Lorem ipsum</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor, nisl quis facilisis
consectetur, nunc ex scelerisque nisl, non iaculis mi nisl vitae ipsum. Vestibulum luctus lacus sed
dignissim posuere. In id nisl volutpat purus bibendum vulputate at ac augue. Nam et quam eu massa
facilisis mattis et ac massa. Suspendisse consectetur nibh quis nibh porttitor, non dignissim nunc
consequat. Etiam non lorem eu neque scelerisque laoreet a ac orci. Donec in turpis sit amet augue
molestie bibendum. Nulla non sem vitae nibh volutpat gravida sed sit amet ipsum. Aenean at mollis justo.
Donec et sapien id metus finibus blandit ut eu mi. Fusce blandit eu elit et accumsan. Praesent id arcu
lobortis, hendrerit nibh a, pulvinar tortor. Donec facilisis pharetra sagittis. Morbi lobortis leo at
ligula vulputate, nec rhoncus nisi sodales. Praesent dictum purus eget mi pulvinar auctor.
Etiam dapibus risus eget ullamcorper dictum. Praesent facilisis, urna id molestie euismod, lorem mi
consectetur lorem, eget blandit magna mauris in mi. Fusce ornare cursus justo, at luctus eros mattis a.
Phasellus auctor faucibus efficitur. Nulla at ante at sem gravida faucibus ac eu urna. Aenean pulvinar
augue sit amet quam molestie convallis. Sed et quam sit amet quam egestas tincidunt et non felis.
Vivamus elementum ligula enim, a blandit ex mattis nec. Sed interdum dui urna, sit amet consequat justo
ultrices eu. Integer placerat sapien et enim tincidunt, eu viverra lectus aliquam. Etiam non quam
tortor. Aenean sit amet sapien mollis, condimentum nibh quis, cursus eros. Morbi malesuada dui a nunc
placerat maximus. Integer sit amet vestibulum massa, a vulputate diam.
Nunc in aliquam lacus, a tincidunt nulla. Nullam viverra eros vel posuere tincidunt. Duis condimentum
orci a finibus condimentum. Morbi hendrerit euismod lorem. Vestibulum quis diam lobortis eros interdum
venenatis. Mauris sollicitudin vulputate est at egestas. Aenean ut nibh posuere, ornare lacus in,
ultrices ante. Nunc vel tempus magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
at ligula eleifend, pulvinar turpis ut, tempor sapien. Donec aliquet fringilla dui, nec finibus augue
rhoncus tempus. Cras at nulla eu orci imperdiet malesuada in nec felis. Duis in fermentum arcu, eu
semper tellus.
Etiam iaculis sodales erat, in mollis velit. Aliquam eu pulvinar quam, ut ultricies ligula. Ut finibus
efficitur vestibulum. Ut ultrices tempus dignissim. Donec vitae tempus odio, quis elementum metus. Duis
ligula lorem, sagittis at cursus nec, varius vel ante. Aliquam cursus pharetra urna, eget condimentum
orci ornare nec. Phasellus commodo neque quis nibh consectetur, eu varius elit mollis. Nam ac cursus
ipsum. Suspendisse molestie varius gravida. Proin tempus mattis nibh vel dignissim. Suspendisse potenti.
Suspendisse potenti. Curabitur et massa sit amet erat dignissim finibus. Pellentesque dapibus lectus ac
feugiat tincidunt. Praesent quis nisl a elit cursus placerat sed non turpis.
Vivamus et elementum quam, ut porttitor odio. Nunc et maximus quam, eu molestie ipsum. Vestibulum ante
ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Integer vel lacus et tellus
mollis fringilla. Suspendisse turpis tortor, efficitur at rutrum ac, luctus id dolor. Proin quis tellus
fringilla, vehicula diam quis, aliquet mi. Nunc quis malesuada ante, ac laoreet turpis. Nullam velit
neque, sagittis at felis quis, aliquam efficitur ante. In auctor tempus tincidunt. Aliquam vehicula enim
et dolor ultricies, at laoreet urna ornare. Nulla justo ante, fermentum sed ligula in, dictum fringilla
sem. Vestibulum venenatis semper volutpat. Fusce bibendum lectus nibh, eget molestie nulla scelerisque
sit amet. Fusce et turpis tincidunt, varius ante sit amet, lobortis erat. Duis sodales erat metus, vitae
condimentum erat laoreet eu. Nulla fermentum pellentesque dolor, id feugiat urna congue tempus.
Sed erat est, gravida quis eros id, iaculis elementum magna. Suspendisse fermentum gravida erat, et
bibendum nunc mattis sit amet. Aliquam eleifend aliquet nulla vitae rutrum. Cras sit amet tincidunt
felis, et eleifend felis. Curabitur fermentum lorem a lacus fringilla, a feugiat nunc dictum. Curabitur
cursus libero in malesuada rhoncus. Donec nec varius enim. Donec tristique commodo lacus vehicula
scelerisque. Nam pharetra nec neque ut dignissim. Nullam consectetur nulla risus, quis consectetur
ligula consequat et. Sed vitae consequat justo, non sodales leo. Nunc porta eros sollicitudin consequat
eleifend.
Etiam eu tincidunt erat, hendrerit aliquet tortor. Quisque tempor mattis nibh, id vestibulum sapien
hendrerit eget. Quisque eget elit eget metus convallis rutrum. Suspendisse pharetra ut eros id blandit.
Nam dictum ante nec neque imperdiet, et lobortis neque molestie. Quisque tempus tincidunt scelerisque.
Phasellus pharetra ultricies elit, quis vestibulum odio sodales tempus.
Nam hendrerit ante ac sapien rhoncus congue. Duis tortor lorem, feugiat at urna quis, aliquam interdum
dui. Aliquam ut imperdiet ante, ut malesuada diam. Phasellus at turpis et purus laoreet aliquam. Nulla
ante odio, consequat sagittis scelerisque laoreet, volutpat ac libero. Nulla vulputate scelerisque
lorem, nec efficitur urna tristique eu. Etiam ut dignissim ipsum, vitae lobortis nibh. Etiam lobortis
odio dui, ut pretium libero pellentesque mollis. Nulla ut ultrices nibh. Pellentesque iaculis tincidunt
mi quis imperdiet. Fusce urna ipsum, lacinia et leo nec, consectetur facilisis urna. Sed mollis, est vel
varius feugiat, arcu lectus sagittis sapien, ac gravida leo erat ut diam. Nunc eleifend magna
sollicitudin, sollicitudin magna eget, dignissim augue. Integer eget gravida quam. Donec varius pretium
viverra. Nulla tristique porta augue eget suscipit.
Vivamus tristique dui vehicula interdum tincidunt. Mauris eu sollicitudin arcu. Sed porta nulla arcu, a
egestas metus rhoncus maximus. Fusce sit amet metus vulputate, fringilla dolor in, tincidunt nisi. Donec
eu lacinia nunc. Etiam porta nisi eu feugiat lacinia. Nullam sodales, magna et cursus interdum, diam
urna faucibus lacus, non tempus lectus lorem nec mauris. Sed at luctus mi. Morbi tincidunt nulla libero,
vel mattis justo feugiat et. Sed sagittis dui a dictum mattis. Praesent ut purus sit amet tellus
scelerisque fringilla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tortor enim, scelerisque ac tincidunt non,
faucibus et nunc. Phasellus in mi in lorem pharetra ultrices at eu nibh. Suspendisse non nisl
pellentesque, luctus odio ut, condimentum libero. Sed bibendum vitae est non lobortis. Nunc luctus magna
sed lorem malesuada, nec vulputate lacus feugiat. Orci varius natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus. Integer ac dui eleifend, ornare nisl sit amet, auctor velit. Donec
imperdiet magna turpis, lacinia tincidunt lorem cursus ac. Quisque imperdiet convallis ipsum, non
aliquet lorem condimentum id. Aliquam non ultricies ligula. Sed a lectus libero. Aenean fringilla tortor
vel mollis scelerisque. Aliquam erat volutpat.
Donec imperdiet auctor suscipit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
ultrices quis nibh sed maximus. Morbi eu consectetur nunc. Aliquam lacinia nisl at arcu vulputate
finibus id vitae felis. Cras rhoncus semper dignissim. Ut ut mi ligula. Praesent ut porta justo. Aliquam
semper quam aliquet, suscipit arcu sed, aliquet erat. In hac habitasse platea dictumst. Proin diam
libero, ultrices id turpis id, cursus porttitor metus. Duis arcu sapien, egestas a commodo non,
convallis non diam.
Aenean scelerisque vulputate est a euismod. Maecenas dictum a dolor a tempus. Nulla iaculis gravida odio
a condimentum. Phasellus id nisi at lectus aliquet pellentesque. Nulla nec lectus in purus auctor
luctus. Vestibulum at sapien ac risus dignissim tincidunt sit amet a ipsum. Fusce congue ornare justo,
ut tempor elit convallis eu. Nullam rutrum enim tellus, quis hendrerit tellus cursus sit amet. Sed non
dictum purus. Donec luctus vestibulum erat.
Praesent risus ante, gravida a sagittis id, pellentesque eget urna. Aenean vitae justo aliquet,
malesuada ante id, dapibus tortor. Nunc fringilla dolor magna, sit amet euismod orci dignissim eget.
Cras finibus sed augue aliquet aliquet. Vivamus non volutpat quam. Curabitur arcu arcu, tempus at
viverra et, gravida quis ligula. Donec pulvinar eu ex a tincidunt. Donec dignissim lectus sit amet
mauris convallis, sed sodales massa volutpat. Cras vel cursus diam, a accumsan diam. Morbi tristique,
nibh quis sollicitudin scelerisque, quam nunc iaculis justo, vitae dictum augue nisl vitae nunc. Mauris
non facilisis nibh.
Suspendisse potenti. Aliquam metus mi, porttitor vitae augue ut, sagittis congue risus. Quisque lacus
massa, aliquet sit amet metus ut, lobortis luctus nunc. Suspendisse ultricies neque non semper faucibus.
Cras et turpis in enim consectetur finibus nec a velit. Curabitur varius, ipsum eu elementum
pellentesque, nibh ipsum cursus elit, et hendrerit ligula nisl faucibus lectus. Aliquam erat volutpat.
Integer sit amet ante ante. Sed dapibus sem fermentum dui convallis, vel vestibulum sem tincidunt. Donec
nec metus magna. Cras interdum porta congue. Integer fringilla massa augue, ultrices vulputate felis
vestibulum non.
Phasellus maximus, leo eget aliquam sagittis, metus elit scelerisque eros, id pulvinar tortor sem et
orci. Curabitur at tellus tincidunt, elementum sem sit amet, molestie tortor. Donec aliquam arcu tempor
quam vestibulum, sit amet posuere ante rutrum. Aliquam rhoncus quis neque vitae pellentesque. Nam
venenatis leo sed neque posuere ultricies. Aliquam dictum erat ac felis ultrices sollicitudin.
Pellentesque quis est nulla. Maecenas dignissim fringilla vehicula.
</p>
</div>
</div>
</body>제
</html>
'web-front-dev > html + css + js' 카테고리의 다른 글
| CSS: grid layout (0) | 2023.07.30 |
|---|---|
| CSS: 플렉스 박스 레이아웃 (0) | 2023.07.29 |
| Material UI 스타일의 textfield 만들기 (0) | 2023.07.27 |
| css (0) | 2023.07.25 |
| 순수 화면구성 (0) | 2023.06.12 |
'web-front-dev/html + css + js' Related Articles
more
Comments