Html
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="side.css">
</head>
<body>
<div class="navbar">
<div class="navbar__logo">
<h2>Mypage</h2>
</div>
<ul class="navbar__menus">
<li class="navbar__menu">내정보</li>
<li class="navbar__menu">로그인</li>
<li class="navbar__menu">설정</li>
</ul>
</div>
<div class="mainscreen">
<div class="sidebar">
<ul class="sidebar__menus">
<li class="sidebar__menu">홈</li>
<li class="sidebar__menu">전체</li>
<li class="sidebar__menu">게임</li>
<li class="sidebar__menu">보이는라디오</li>
<li class="sidebar__menu">스포츠</li>
<li class="sidebar__menu">VOD</li>
</ul>
</div>
<div class="container">
<div class="blue"></div>
<div class="blue"></div>
<div class="blue"></div>
<div class="blue"></div>
<div class="blue"></div>
</div>
</div>
</body>
</html>CSS
.navbar {
display: flex;
justify-content: space-between;
margin-bottom: 30px;
width: 100%;
background-color: thistle;
}
.navbar__logo {
margin-left: 20px;
}
.navbar__menus {
list-style: none;
display: flex;
margin-right: 30px;
}
.navbar__menu {
margin: 10px;
}
.mainscreen {
display: flex;
}
위 화면과 같이 navbar와 밑에 있는 화면요소가 겹치는 것을 볼 수 있다. 크롬 도구로 검사를 해보면 밑의 화면과같이 mainscreen부분이 전체 화면의 위에서 부터 시작하는걸 알 수 있다.
이를 해결하기 위해서는 mainscreen클래스에 padding-top 을 navbar의 height만큼 주면 해결이 가능하다
.mainscreen {
display: flex;
padding-top: 101px;
}
나머지 부분은 위와 동일
'HTML, CSS' 카테고리의 다른 글
| TIL 07 CSS Position Display (0) | 2021.10.06 |
|---|---|
| TIL 06 Semantic tag Web (0) | 2021.10.06 |
