[나혼자웹] Header

김지민·2022년 5월 6일
0

나혼웹

목록 보기
1/4
post-thumbnail

header 명시 이유

굳이 다른 기능이 없다고 생각 되어서 그 이유에 대해서 찾아 봤다.
header, nav, aside 모두 시멘틱 태그라고 불리고, 의미론적 이유 때문에 쓰인다고 한다.

header 안에 inner가 있어야하는 이유

<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으로 가운데 정렬

margin: 0 auto;로 가운데 정렬을 하려면 무조건 width와 height가 정의 되어있어야한다.

profile
💡Habit is a second nature. [Git] https://github.com/Kimjimin97

0개의 댓글