티스토리 네비게이션 메뉴 완벽 가이드 🚀 HTML & CSS로 상단 메뉴 꾸미기

티스토리 블로그에서 HTML & CSS로 네비게이션 메뉴(상단 메뉴) 커스터마이징

티스토리 블로그에서 네비게이션 메뉴는 방문자가 원하는 페이지로 빠르게 이동할 수 있도록 도와주는 중요한 요소다. 기본 제공되는 메뉴가 심플하지만, 직접 수정하면 더욱 개성 있고 실용적인 네비게이션을 만들 수 있다!
이 글에서는 HTML & CSS를 활용하여 네비게이션 메뉴를 커스터마이징하는 방법을 초보자도 따라할 수 있도록 단계별로 설명하겠다. 

 

---

1. 네비게이션 메뉴란? (역할 & 중요성)

네비게이션(Navigation) 메뉴는 블로그의 메뉴 바(상단 메뉴)를 의미하며, 보통 홈, 카테고리, 소개, 문의하기 등의 메뉴 항목이 포함된다.

 

✔ 방문자가 원하는 콘텐츠를 쉽게 찾을 수 있도록 도와줌
✔ 블로그의 가독성과 사용자 경험(UX)을 향상시킴
✔ 검색엔진 최적화(SEO)에도 긍정적인 영향을 미침
✔ 깔끔한 네비게이션 바는 블로그 디자인을 더욱 전문적으로 보이게 함

---

2. 티스토리에서 네비게이션 메뉴 수정 가능한 위치 찾기

티스토리 블로그의 네비게이션 메뉴는 HTML & CSS를 통해 직접 수정할 수 있다.

 

 네비게이션 메뉴 수정 위치 확인 방법

1️⃣ 티스토리 관리자 페이지 접속
2️⃣ 꾸미기 → 스킨 편집 클릭
3️⃣ HTML 편집 탭으로 이동
4️⃣ <nav> 또는 <ul class="gnb"> 등의 태그를 찾아 네비게이션 메뉴를 확인

 

💡 Tip: 네비게이션 메뉴는 보통 <header> 태그 안에 위치하며, <ul> (목록) 태그를 사용해 메뉴 항목이 구성된다.

---

3. 기본 HTML 코드 수정 – 메뉴 추가 & 삭제

네비게이션 메뉴의 기본 HTML 구조는 다음과 같다.

<nav>  
    <ul class="gnb">  
        <li><a href="/">홈</a></li>  
        <li><a href="/category/블로그">블로그</a></li>  
        <li><a href="/category/리뷰">리뷰</a></li>  
        <li><a href="/about">소개</a></li>  
        <li><a href="/contact">문의하기</a></li>  
    </ul>  
</nav>  

✔ 메뉴 추가하기

예를 들어, 갤러리 메뉴를 추가하고 싶다면 아래처럼 <li> 태그를 추가하면 된다.

<li><a href="/category/갤러리">갤러리</a></li>  

✔ 메뉴 삭제하기

예를 들어, 리뷰 메뉴를 삭제하고 싶다면 해당 <li> 태그를 제거하면 된다.

<!-- <li><a href="/category/리뷰">리뷰</a></li> -->  

💡 Tip: 메뉴를 수정한 후에는 반드시 "적용" 버튼을 눌러 변경 사항을 저장해야 한다.

---

4. CSS를 활용한 네비게이션 스타일 변경 (색상, 크기, 정렬)

HTML 수정만으로는 디자인이 변경되지 않는다. 네비게이션 스타일을 바꾸려면 CSS를 함께 수정해야 한다.

topnavmenu

🔹 기본 네비게이션 스타일 예제

.gnb {  
    display: flex;  
    justify-content: center; /* 중앙 정렬 */  
    background-color: #333; /* 배경색 (진한 회색) */  
    padding: 10px 0;  
}  
.gnb li {  
    list-style: none; /* 기본 리스트 스타일 제거 */  
    margin: 0 15px;  
}  
.gnb a {  
    text-decoration: none; /* 밑줄 제거 */  
    color: white; /* 글자색 (흰색) */  
    font-size: 16px;  
    font-weight: bold;  
    transition: 0.3s; /* 효과 부드럽게 적용 */  
}  
.gnb a:hover {  
    color: #ffcc00; /* 마우스 오버 시 글자색 변경 (노란색) */  
}  

💡 Tip: 위 코드를 적용하면 네비게이션 바의 배경색이 어두운 회색으로 변경되며, 링크에 마우스를 올리면 노란색으로 변함.

---

5. 드롭다운(하위 메뉴) 설정 방법

드롭다운(하위 메뉴)을 만들고 싶다면 HTML과 CSS를 추가해야 한다.

🔹 HTML – 하위 메뉴 추가하기

<li>  
    <a href="#">서비스</a>  
    <ul class="submenu">  
        <li><a href="/service1">서비스 1</a></li>  
        <li><a href="/service2">서비스 2</a></li>  
    </ul>  
</li>  

🔹 CSS – 드롭다운 스타일 추가하기

.submenu {  
    display: none;  
    position: absolute;  
    background-color: #444;  
    padding: 10px;  
}  
li:hover .submenu {  
    display: block;  
}  

💡 Tip: 드롭다운 메뉴를 적용하면 마우스를 올렸을 때 하위 메뉴가 나타나는 효과를 줄 수 있다.

---

6. 마무리 – 블로그 디자인을 완성하는 팁

✔ 네비게이션 메뉴는 사용자 경험(UX)과 SEO에 큰 영향을 미치는 요소이므로 신중하게 구성하자!
✔ HTML을 수정할 때는 태그를 올바르게 닫았는지 확인하고, CSS로 디자인을 깔끔하게 조정하자.
✔ 드롭다운 메뉴를 추가하면 메뉴 구성이 더욱 직관적으로 변할 수 있다.

지금까지 티스토리 블로그의 네비게이션 메뉴를 HTML & CSS로 커스터마이징하는 방법을 알아보았다! 🚀

 

🔜 다음 글에서는 더 심화된 블로그 디자인 최적화 방법을 다뤄보자! 😊