[React + Chakra UI] root 아래 기본 html 뼈대 구조
2022. 12. 21. 20:06
반응형
기본 구조
<body>
<div id="root>
<div> //1번 : 웹페이지 전체를 감싸는 div
<nav /> //2번 : 상단네비바
<main /> //3번 : 네비바 아래 콘텐츠 영역
</div>
</div>
</body>
1번: 웹페이지 전체를 감싸는 div
position: fixed;
inset: 0;
display: flex;
flex-direction: column;
2번: 상단 네비바
display: flex;
position: relative;
flex-shrink: 0;
justify-content:center;
align-items: center;
height: 48px;
background: tomato;
width: 100%;
3번: 네비바 아래 콘텐츠 영역
flex: 1 1 0%;
height: 100%;
overflow: auto;
반응형
'한 걸음 > HTML & CSS' 카테고리의 다른 글
| [css] 가상요소 before & after (0) | 2023.02.03 |
|---|---|
| [html] figure & figcaption (0) | 2023.02.03 |
| [css] 애니메이션 keyframes 모음 (0) | 2022.11.22 |
| 반응형 구현 시 사이즈 기준 + 모바일 퍼스트 기법 (0) | 2022.03.25 |
| 반응형 웹을 구현하는 다양한 기법들 (0) | 2022.03.25 |
