height, width 설정할 때

부모가 height, width 값을 갖고 있어야 height나 width 값을 퍼센트(%)로 적어 줬을 때도 스타일에 반영이 된다.

  <header>
    <h1>Heim's place</h1>

    <nav class="menu" aria-label="메뉴">
      <ul class="menu-items">
        <li class="menu-item-home">
          <a href="#/page/home" class="active-item">홈</a>
        </li>
        <li class="menu-item-skills">
          <a href="#/page/skills">기술</a>
        </li>
        <li class="menu-item-tools">
          <a href="#/page/tools">툴</a>
        </li>
        <li class="menu-item-projects">
          <a href="#/page/projects">작업물</a>
        </li>
      </ul>
    </nav>
  </header>

html 코드는 위와 같다.

이때는 CSS로 nav에 height를 퍼센트(%)로 주면 반영이 안 되고 픽셀로 줬을 때만 반영이 됐다. 왜냐구? %는 부모 요소를 기준으로 하는 값인데 부모인 header에 height 값을 안 줬기 때문에 % 값을 쓸 수 없었던 것이다. header에 width값도 지정해 주지 않았음에도 퍼센트로 값을 줬을 때도 반영이 잘 됐는데, 아마 header가 block 요소라서 width가 자동으로 지정되기 때문(가로로 꽉 차게)인 것 같다.

✨header에 height값을 주고 나니까 nav height 값을 퍼센트로 줘도 스타일이 잘 먹힌다!! ✨

....네비게이션 메뉴 수직 중앙정렬이 안맞는데 align-items가 반영이 안 돼서 원인을 찾고 있다.