html css nav
■ html의 시맨틱 태그 중의 하나인 <nav> 태그에 대해서 알아보겠습니다. <nav>태그는 주로 '메뉴바'를 만들 때 사용하는데요. 링크를 걸어서 홈페이지 내의 다른 문서를 연결하는 역할을 합니다. 이 태그는 header, aside, footer 태그 사용해도 되고, 위치에 구애받지 않고 독립적으로 쓰일 수도 있습니다. 이번 글에서는 nav 태그 안에 ul, li 태그를 이용해서 메뉴를 만드는 과정을 진행하면서 이 태그의 배치에 대해서 알아볼 텐데요.
■ <nav> 태그 안에 <ul> 태그를 배치하면 <ul> 태그가 블록레벨 요소이기 때문에 세로 배치입니다. 즉 어떤 메뉴들을 입력하면 세로로 배치되는데요. 이 녀석을 가로로 배치할 수도 있거든요. 그 방법을 알아볼게요.
■ 세로로 배치되어 있던 메뉴를 가로로 바꾸려면 그림처럼 <li>의 속성을 [float : left;] 해주시면 되구요. 왼쪽의 다른 메뉴와 적당한 거리를 유지하기 위해서 왼쪽만 margin값을 설정했습니다. 그림처럼 가로로 배치 되면서 블릿도 없어집니다. 세로로 있는 상태에서 블릿을 없앨 때는 [list-style-type : none;] 속성을 넣어주시면 됩니다. 참고하시구요.
다음은 참고사항으로 링크가 걸려 있는 텍스트의 색을 바꿔보고, 밑줄을 없애보겠습니다.
■ [nav ul li a] 의 CSS 속성에서 텍스트 색을 빨간색으로 바꾸고 text-decoration 속성을 [none]로 해주시면 밑줄이 사라지게 됩니다.
이렇게 해서 <nav> 태그를 가로로 배치하는 과정을 정리해봤습니다. 수고하셨어요.^^