이런건 어떻게 표준 코딩해야할까요?

안녕하세요. 기본적으로 nav를 작성하는 구조,

디자인에 해당하는 코드들을 아래 예시를 통해 나누어서 보여드리겠습니다.

(사람마다 방식이 다를 수 있습니다.)

1. HTML 구조

<div class="nav">

  <div class="gnb">

       <ul>

          <li></li>

          <li></li>

          <li></li>

          <li></li>

       </ul>

  </div>

</div>

2. CSS 디자인

ul,ol,li { list-style : none}

.nav { width : 100%;}

.gnb { width : 원하는 네비게이션 크기; height : auto; overflow:hidden;

        box-sizing : border-box; margin : 0 auto;}

.gnb ul li { float : left; width : 25%; border : 1px solid gray; border-bottom : 2px solid gray; background : 원하는 박스 색깔; color : 원하는 글자 색깔; font-size : 원하는 글자 크기; line-height : 44px;}

여기서 margin : 0 auto 은 가로 가운데 정렬을 의미하고

line-height 는 높이가 44px인 상태로 li안의 글자를 세로 가운대 정렬을 의미합니다.

메뉴 항목들이 a태그로 링크가 걸려있거나 버튼으로 클릭이벤트가 걸려있는 경우에는

메뉴 항목에 해당하는 태그를 각 li태그 안에 넣어주시면 됩니다^^

일반적으로 레이아웃 구조는 세로로 떨어지는 특징이 있기 때문에

가로로 배치하시는 경우에는 inline-block 을 사용하시거나 float, position 등을 이용하여

가로로 레이아웃을 잡아주는 것입니다.