굳이 다른 기능이 없다고 생각 되어서 그 이유에 대해서 찾아 봤다.
header, nav, aside 모두 시멘틱 태그라고 불리고, 의미론적 이유 때문에 쓰인다고 한다.
<header class="header">
<div class="inner">
<div class="menu-group">
<img class="logoimg" src="./imgs/logo.png" alt="logo" />
<ul class="menu-list">
<li><a href="#">About</a></li>
<li><a href="#">Literal</a></li>
<li><a href="#">History</a></li>
<li><a href="#">Philosopy</a></li>
</ul>
</div>
<div class="sing-group"></div>
</div>
</header>
.header {
border-bottom: 0.5px solid #312b02;
box-shadow: 0 0 5px rgbx(0, 0, 0, 0.75);
}
.header .inner {
height: 62px;
}
.header .menu-group {
display: inline-flex;
align-items: center;
background-color: red;
height: 100%;
}
inner의 height가 없는 경우에 menu group과 sign group을 포함할 수 없음
inner의 height를 설정하고, 자식인 menu group과 sing group의 height: 100%;로 설정한 후, align-items: center로 정렬하면 부모 노드의 가운데로 정렬할 수 있음
margin: 0 auto;로 가운데 정렬을 하려면 무조건 width와 height가 정의 되어있어야한다.