html

* nav 태그

• html5에서 nav 태그는 현재 웹 사이트에서 주요한 지점으로 이동할 수 있는 네비게이션(NAVigation) 역할을 담당하고 있는 태그
  html5에서는 각 영역별로 그 의미를 나타내기 위하여 nav 태그와 같은 특정 태그를 사용하게 됨
  일반적으로 웹사이트에서 주요한 네비게이션은 바로 '메뉴'!

기본 탬플릿

<nav class="topmenu">
        <ul class="nav">
            <li><a href="#" class="link"> HOME </a></li>
            <li><a href="#" class="link"> LOCATION </a></li>
            <li><a href="#" class="link"> CONTACK US </a></li>
        </ul>
    </nav>

• 목록은 순서가 중요하지 않기 때문에 nav 태그로 메뉴를 만들 때에는 기본적으로 ul 과 li 태그를 이용
• li 태그 안에는 메뉴 a 태그로 링크를 만들어두는 것이 기본 템플릿

  

처음 적용하면 이렇게 나온다! 여기서 css를 이용하여 꾸며줘야함

css

📍id로 설정된 태그의 스타일을 지정할 때에는 # / class는 .

.topmenu {
            background-color: gray;
            width: 900px;
            height: 40px;
            margin: auto;
        }

.nav {
            list-style: none;         // 목록을 나타내는 점 없앰
            line-height: 40px;        //한 줄의 높이
            text-align: center;       //가운데 정렬
            font-family: 'Gaegu', cursive;
        }
        
➕ float : left //<li> 태그들이 왼쪽부터 흐르게 설정 (아래 내용은 오른쪽으로 옴)

.link {
            color: white;
            font-weight: bold;
            width: 200px;
            display: block;
        }

.link:hover {                         // 커서를 올렸을 때 나타나는 효과
            text-decoration: none;
            color: dimgrey;
            font-weight: bold;
        }

결과

🚨 주의할 점

• 노트북으로 css를 적용하다 모니터로 화면을 옮겼는데 css가 깨지는 것을 발견했다. 확인하는 화면에 따라 구현한 내용이 달라질 수 있는 것을 유의하고 한번 씩 확인하면 좋을 것 같다!

• 구글링하며 발견한 것은 브라우저별로 구현 내용이 달라질 수 있기 때문에 브라우저별 테스트를 해보는 것이 중요하다고 한다! (IE는 버전별로도 다르게 보일 수 있기 때문에 버전별 확인이 필요!)