【초학자용】 인라인 요소와 블록 요소를 이해하여 깨끗한 네비게이션 바를 작성한다.

네비게이션 바를 작성할 때, 각 요소의 종류를 이해하지 못했기 때문에 작성에 어려웠기 때문에 초학자용으로 조금 정리해 보았습니다. 아마 여기저기서 넘어지는 사람도 있을까 생각하기 때문에, 조력이 되면 다행입니다.

※뭔가 책이라든가를 바탕으로 만든 것은 아니기 때문에 잘못되었을 가능성도 있습니다. 경험에 근거해 정리하고 있는 곳은 있으므로 거기엔은 양해 바랍니다.

완성 이미지



마크업

html

<nav>
  <ul>
    <li>
      <a href="">menu1</a>
    </li>
    <li>
      <a href="">menu2</a>
    </li>
    <li>
      <a href="">menu3</a>
    </li>
  </ul>
</nav>

css

nav{
  background-color: gray;
  text-align: center;
  border: 2px solid black;
}

/* navの中の全てのliタグ */
nav li{
  padding: 10px;
}
nav li:not(:last-child){
  border-bottom: 2px solid black;
}

/* liのhoverアクション */
nav li:hover{
  background-color: orange;
}

/* navの中の全てのaタグ */
nav a{
  color: white;
}

브라우저를 확인해 보면 ...



li의 호버 액션 자체는 할 수 있었지만, 중요한 링크가 나오지 않는다・・・
예, 이것은 태그의 인라인 요소와 관련이 있습니다.

원래 인라인 요소란?

HTML에는 블록 요소와 인라인 요소가 있습니다.
자세한 것은 스스로 조사해 납득해 주었으면 합니다만, 간단하게 말해 버리면 이하와 같이 됩니다.

・블록 요소・・・「개행」과 「높이」가 있는 요소. 「폭」은 「부모 요소에 대해서 100%」.

・인라인 요소・・・「높이」가 없고, 옆 줄(개행)이 없다)가 되는 요소. 「폭」은 「자식 요소에 대해서 100%」.

이번 문제 아이, a 태그는 "인라인 요소"입니다.
인라인 요소는 「폭」은 「자식 요소에 대해서 100%」이므로, 이번의 경우 「menuX」라고 하는 텍스트의 폭이 됩니다.

그렇게하는 것은 간단합니다. a 태그를 블록 요소로 변경합니다.

css

nav{
  background-color: gray;
  text-align: center;
  border: 2px solid black;
}

/* navの中のliタグ */
nav li{
  padding: 10px;
}
nav li:not(:last-child){
  border-bottom: 2px solid black;
}

/* liのhoverアクション */
nav li:hover{
  background-color: orange;
}

/* navの中のaタグ */
nav a{
  color: white;
  display: block;
}

브라우저를 확인해 보면 ...




이것으로, 할 수 있을까 생각하고 커서가 텍스트의 높이 밖에 오면 링크가 표시되지 않게 된다.




여러가지 시험해, a태그에 height:100%;를 지정해도 무리···

그럼 결국 어떻게 할까.

이 네비게이션 바에 있어서 제일 우선하지 않으면 안 되는 요소는 무엇인가?

이번에는 링크를 연결하는 것이 목적이므로 "a 태그를 중심으로 코팅을한다"가 정답.

그래서 최종 코드는 아래.

css

nav{
  background-color: gray;
  text-align: center;
  border: 2px solid black;
}

/* navの中の全てのaタグ */
nav a{
  color: white;
  display: block;
  padding: 10px;
}

/* navの中の最後のliの中のaタグ以外のaタグ */
nav li:not(:last-child) a{
  border-bottom: 2px solid black;
} 

/* navの中の全てのaタグのホバーアクション */
nav a:hover{
  background-color: orange;
}

이렇게하면 목록의 어느 위치에서든 호버하여 링크가 표시됩니다.

무엇을 어떻게 바꿨는가

처음에는 nav li를 중심으로 생각하고 있었기 때문에, css도 nav li의 기술이 많아지고 있었다.
다만 그것이라면 중요한 a태그(링크)의 범위가 li태그의 높이 가득까지 펼칠 수 없다.
그래서 li에 맞추고 있던 css를 이번 네비게이션의 중심인물인 a태그로 옮겼다.
이렇게 하면 li의 크기를 신경쓰지 않고 a 태그의 크기를 자유롭게 바꿀 수 있으므로 나중에 개조할 때도 편하다.
단순히 결과론이지만 코드량도 줄어들기 때문에 좋은 결과가 된 것은 아닐까 생각한다.

마지막으로

이번은 꽤 초학자 전용으로 써 주셨으므로 조금이라도 조력에 익숙해지면 좋다고 생각합니다!