2.1 앵커 링크
HTML 페이지 내비게이션은 사용자들이 문서의 다양한 섹션으로 빠르게 이동할 수 있도록 도와줘. 이건 특히 내용이 많은 긴 페이지에서 유용해. HTML에는 이런 내비게이션을 구현하는 여러 가지 방법이 있어, id 속성을 사용하거나 JavaScript로 내비게이션을 구현하는 것처럼.
앵커 링크는 페이지 내에서 이동하는 가장 흔한 방법이야. 사용자가 앵커 태그를 통해 문서의 특정 부분으로 이동할 수 있게 해줘.
사용 예시:
id 속성을 사용해 앵커 생성하기:
<h2 id="section1">Section 1</h2>
<p>Content of section 1...</p>
<h2 id="section2">Section 2</h2>
<p>Content of section 2...</p>
<h2 id="section3">Section 3</h2>
<p>Content of section 3...</p>
앵커로의 링크 생성하기:
<nav>
<ul>
<li><a href="#section1">Go to Section 1</a></li>
<li><a href="#section2">Go to Section 2</a></li>
<li><a href="#section3">Go to Section 3</a></li>
</ul>
</nav>
사용자가 링크를 클릭하면 브라우저가 자동으로 지정된 id를 가진 요소로 페이지를 스크롤해. 이때 페이지는 새로고침되지 않아.
name 속성을 사용하는 내비게이션
name 속성도 앵커를 생성하는 데 사용할 수 있지만, 이 방법은 덜 일반적이고 구식이라 생각돼.
예시
<a name="top"></a>
<p>Top of the page...</p>
<a name="bottom"></a>
<p>Bottom of the page...</p>
<nav>
<ul>
<li><a href="#top">Go to Top</a></li>
<li><a href="#bottom">Go to Bottom</a></li>
</ul>
</nav>
2.2 JavaScript를 사용한 스크롤링
JavaScript는 페이지 내비게이션을 더 유연하게 해줘. scrollIntoView, scrollTo 같은 메서드를 사용해서 페이지의 다양한 요소로 부드럽게 스크롤할 수 있어.
사용 예시:
이 코드는 버튼을 클릭하면 페이지를 특정 요소로 부드럽게 스크롤해줘.
<button onclick="scrollToSection('section1')">Go to Section 1</button>
<button onclick="scrollToSection('section2')">Go to Section 2</button>
<button onclick="scrollToSection('section3')">Go to Section 3</button>
<h2 id="section1">Section 1</h2>
<p>Content of section 1...</p>
<h2 id="section2">Section 2</h2>
<p>Content of section 2...</p>
<h2 id="section3">Section 3</h2>
<p>Content of section 3...</p>
// 특정 섹션으로 부드럽게 스크롤하기 위한 함수
function scrollToSection(sectionId) {
// 해당 ID를 가진 요소를 찾기
document.getElementById(sectionId).scrollIntoView({ behavior: 'smooth' });
}
2.3 <nav> 태그
<nav> 태그는 HTML5에서 페이지의 내비게이션 링크를 포함하는 섹션을 정의하는 데 사용돼. 이 태그는 내비게이션 블록을 의미론적으로 표시하는 데 도움이 되고, 이는 웹 페이지의 구조를 개선하고 검색 엔진뿐만 아니라 사용자에게도 더 쉽게 접근할 수 있도록 해줘.
<nav> 태그는 사이트 또는 현재 문서 내에서 내비게이션을 위한 링크를 그룹화하는 데 사용돼. 이건 주요 메뉴, 보조 메뉴, 빵 부스러기, 페이지 목록 및 기타 내비게이션 요소가 될 수 있어.
문법
<nav>
<!-- 내비게이션 요소 -->
</nav>
사용 예시
<header>
<h1>내 사이트</h1>
<nav>
<ul>
<li><a href="#home">홈</a></li>
<li><a href="#about">소개</a></li>
<li><a href="#services">서비스</a></li>
<li><a href="#contact">연락처</a></li>
</ul>
</nav>
</header>
설명
<header>태그: 내비게이션 메뉴를 포함한 페이지 헤더를 만드는 데 사용돼<nav>태그: 페이지의 다양한 섹션으로 이동할 수 있는 링크 목록을 포함해<ul>및<li>태그: 내비게이션 링크 목록을 만들 때 사용돼<a>태그: 사용자가 페이지나 사이트의 다른 부분으로 이동할 수 있는 실제 링크를 정의해
2.4 <nav> 태그의 활용
<nav> 태그는 다음과 같은 내비게이션 링크를 그룹화하는 데 사용돼:
- 사이트의 주요 메뉴
- 보조 메뉴
- 빵 부스러기 (breadcrumbs)
- 페이지 넘김 링크
- 기타 내비게이션 링크
사이트의 주요 메뉴
<nav>
<ul>
<li><a href="#home">홈</a></li>
<li><a href="#about">소개</a></li>
<li><a href="#services">서비스</a></li>
<li><a href="#contact">연락처</a></li>
</ul>
</nav>
보조 메뉴
<nav>
<ul>
<li><a href="#faq">자주 묻는 질문</a></li>
<li><a href="#support">지원</a></li>
<li><a href="#privacy">개인정보 처리방침</a></li>
</ul>
</nav>
빵 부스러기 (breadcrumbs)
<nav aria-label="breadcrumb">
<ol>
<li><a href="/home">홈</a></li>
<li><a href="/category">카테고리</a></li>
<li>현재 페이지</li>
</ol>
</nav>
<nav> 태그 사용의 장점
의미론적 태그
<nav> 태그 사용은 검색 엔진과 장애를 가진 사람들을 위한 기술이 페이지 구조를 더 잘 이해하도록 도와줘. 이건 사이트의 접근성을 높이고 SEO(검색 엔진 최적화)를 개선해줘.
페이지 구조 개선
<nav> 태그는 내비게이션 요소를 본문 콘텐츠와 명확히 구분하여 페이지의 마크업을 더 논리적이고 구조적으로 만들어 줘.
스타일링의 용이함
<nav> 태그로 감싼 내비게이션 요소는 CSS로 쉽게 스타일링할 수 있어서 외관과 사용성을 개선할 수 있어.
GO TO FULL VERSION