HTML | 헤더 섹션 설계 : 헤더 (<header> 태그), 내비게이션 링크 (<a href="/">)

⭕ HTML | 헤더 섹션 설계 : 헤더 (<header> 태그), 내비게이션 링크 (<a href="/">)

➡️ 헤더 (<header> 태그)

• 시맨틱 태그의 일부로서, 웹 페이지 상단에 위치함
• 주로 로고, 내비게이션 링크, 검색창 등 주요 정보를 그룹화함
• 기능을 수행하기보다는 구조적인 의미를 가지는 역활

 

➡️ 내비게이션 링크 (<a href="/">)

• 사용자가 클릭 시 메인 페이지로 이동하는 절대 경로를 제공함
• 서브 메뉴 구성: <ul> 태그로 묶인 <li> 요소들이 각각의 메뉴 항목을 나타내며, 기능이 완성되기 전까지는 <a href="javascript:void(0)">로 설정하여 어떠한 동작도 하지 않도록 함
• 구분선 (::before 사용): 메뉴 항목 간에 시각적으로 구분선을 추가함

 

➡️ 검색창

• <input type="text">를 사용하여 사용자 입력을 사용함
• 사용자가 입력 필드에 포커스를 맞췄을 때 테두리가 변경되도록 border 속성을 사용하여 시각적으로 구분되게 함