20250825 - CSS Display layout
-
lvh svh dvh
-
display layout
<html>
<header></header>
<style>
body, ul, li {
margin:0;
padding : 0px;
}
a{
color:inherit;
text-decoration:none;
}
.container {
display:flex; /* container 안의 자식 요소들이 가로 방향으로 나란히 정렬 */
flex-direction:column; /* Flexbox 레이아웃에서 자식 요소들을 세로 방향(위에서 아래로) 정렬하도록 설정하는 속성입니다. 기본값인 row가 가로 정렬이라면, column은 그 반대 방향 */
min-height:100dvh;
background-color:darkcyan;
flex-grow:0;/*Flexbox에서 요소가 남는 공간을 전혀 차지하지 않도록 설정. 0이면 절대 확장하지 않음 */
}
.container > header {
background-color:red; /* 임시 */
}
.container > section {
background-color:gold; /* 임시 */
display:flex; /* 하위 엘리멘트 적용을 위한 선언*/
flex-direction:row;
flex-grow:1;
}
.container > section > nav {
background-color:#CFCFCF; /* 임시 */
flex-basis:150px; /* 현재 기준은 width 값을 150 */
flex-shrink:0; /*줄지마세요*/
}
.container > section > nav > ul > li:hover{
background-color:black;
color:white;
cursor:pointer;
}
.container > section > main {
background-color:white; /* 임시 */
flex-grow:1;
flex-shrink:1; /*줄지마세요*/
}
.container > section > aside {
background-color:#00FCCC; /* 임시 */
flex-basis:120px;
flex-shrink:0;
}
.container > footer {
background-color:green; /* 임시 */
display:flex; /* Flexbox 레이아웃을 활성화하는 핵심 속성 */
justify-content:space-between; /* 주축(main axis)을 기준으로 자식 요소들을 가운데 정렬하는 속성
반대방향 정렬은 flex-direction: row; */
padding-left:10px;
padding-right:10px;
}
</style>
<body>
<div class="container">
<header>
<h1>레이아웃 배우기</h1><!-- <h1>열심히 배우기</h1> -->
</header>
<section class="content">
<nav>
<ul>
<li>nav menu-1</li>
<li>nav menu-2</li>
<li>nav menu-3</li>
<li>nav menu-4</li>
</ul>
</nav>
<main>
hello there
</main>
<aside>
something
</aside>
</section>
<footer>
<a href="#">Legal Notice</a>
<a href="#">SBS Academy</a>
<a href="#">leftright@</a>
</footer>
</div>
</body>
</html>
- side bar menu
<div class="left-side-bar">
<div class="icon-status">
<span>▶</span>
<span>▼</span>
</div>
<nav class="menu-box-1">
<ul>
<li>
<a href="#">1차 메뉴 아이템 1</a>
<ul>
<li><a href="#">2차 메뉴 아이템 1</a></li>
<li><a href="#">2차 메뉴 아이템 2</a></li>
<li><a href="#">2차 메뉴 아이템 3</a></li>
<li><a href="#">2차 메뉴 아이템 4</a></li>
</ul>
</li>
<li>
<a href="#">1차 메뉴 아이템 2</a>
<ul>
<li><a href="#">2차 메뉴 아이템 1</a></li>
<li><a href="#">2차 메뉴 아이템 2</a></li>
<li><a href="#">2차 메뉴 아이템 3</a></li>
<li><a href="#">2차 메뉴 아이템 4</a></li>
</ul>
</li>
<li>
<a href="#">1차 메뉴 아이템 3</a>
<ul>
<li><a href="#">2차 메뉴 아이템 1</a></li>
<li><a href="#">2차 메뉴 아이템 2</a></li>
<li><a href="#">2차 메뉴 아이템 3</a></li>
<li><a href="#">2차 메뉴 아이템 4</a></li>
</ul>
</li>
<li>
<a href="#">1차 메뉴 아이템 4</a>
<ul>
<li><a href="#">2차 메뉴 아이템 1</a></li>
<li><a href="#">2차 메뉴 아이템 2</a></li>
<li><a href="#">2차 메뉴 아이템 3</a></li>
<li><a href="#">2차 메뉴 아이템 4</a></li>
</ul>
</li>
</ul>
</nav>
</div>
/* 노말라이즈 */
body, ul, li {
margin:0;
padding:0;
list-style:none;
}
a {
color:inherit;
text-decoration:none;
}
/* 커스텀 */
/* 좌측 사이드 바 시작 */
.left-side-bar {
position:absolute;
top:0;
left:-225px;
width:250px;
height:100%;
background-color:#efefef;
transition: left .3s;
}
.left-side-bar:hover {
left:0;
}
/* 좌측 사이드 바 - 상태 아이콘 */
.left-side-bar > .icon-status > span {
display:block;
text-align:right;
padding:5px;
}
.left-side-bar > .icon-status > span:last-child {
display:none;
}
.left-side-bar:hover > .icon-status > span:last-child {
display:block;
}
.left-side-bar:hover > .icon-status > span:first-child {
display:none;
}
/* 좌측 사이드 바 - 메뉴 박스 1 */
.left-side-bar > .menu-box-1 ul {
background-color:#efefef;
}
.left-side-bar > .menu-box-1 > ul ul {
display:none;
position:absolute;
left:100%;
top:0;
}
.left-side-bar > .menu-box-1 > ul > li {
position:relative;
}
.left-side-bar > .menu-box-1 ul > li > a {
display:block;
padding:10px;
white-space:nowrap;
}
.left-side-bar > .menu-box-1 ul > li:hover > a {
background-color:black;
color:white;
}
.left-side-bar > .menu-box-1 > ul > li:hover > ul {
display:block;
}
/* 좌측 사이드 바 끝 */
한줄소개불가