스타일 시트 CSS 로 ul 태그 기반 메뉴 쉽게 만드는 법

안녕하세요! 웹 디벨롭에 관심이 많으신 독자 여러분, 반갑습니다.

우리가 인터넷을 사용할 때 대부분의 웹사이트들이 상단에 나열하고 있는 네비게이션 메뉴는 정말로 눈여겨봐야 할 디자인 요소의 하나입니다. 보통은 CSS 프레임워크나 Flex 와 같은 최신 기술을 많이 사용하지만, 이 글에서는 더 근원적인 방법을 소개해 드리고자 합니다. 바로 HTML 의 기본 리스트 태그인

을 활용하여 CSS 로 메뉴를 깔끔하게 만드는 방법에 대한 내용입니다.

HTML 에서 가장 기본적인 리스트 태그로는 unordered list 의 줄여서

이 있으며, 안에는
• 요소들을 넣어 항목을 나열합니다. 이 태그들은 원래 글머리 기호로 시작되는 목록을 표기하기 위해 사용되지만, CSS 를 잘 다룬다면 이를 완전히 제어하여 원하는 메뉴 구성으로 변신시킬 수 있습니다.

  먼저 메뉴로 꾸미기 위한 첫 번째 작업은 불필요한 리스트 마크를 없애는 것입니다. 브라우저의 기본 설정에서는

  태그가 붙을 때마다 자동으로 점이나 라인을 찍어주지만, 우리는 그 대신 텍스트만 깔끔하게 나열하고 싶으니까요. 따라서