Ruby Coin

Rails 와 프론트 엔드 기술을 이용해 흥미 위주의 빠른 웹 개발 방법론

코스 전체목록

닫기

nav

정의

nav요소는 다른 페이지나 같은 페이지 안에 다른 부분으로 이어주는 네비게이션 링크로 구성된 섹션을 표현합니다.

 

설명

  • 페이지안에 모든 링크그룹이 nav요소일 필요는 없습니다.
  • nav요소는 주요 네비게이션 블럭을 구성하는 섹션입니다.
  • 푸터에도 사이트의 중요한 곳을 링크하는 링크 그룹이 존재하지만, nav요소대신 footer요소로도 충분합니다.

 

예제

 

 

댓글

오류나 오타 신고 환영합니다. ^^;;
(도와주세요!)

댓글 본문
  1. 기초부터
    감사합니다
  2. Lee Seulgi
    감사합니다 :)
  3. 작심삼일
    에러뜨내요 ㅠ
  4. 푸른하늘
    7
  5. mila0113@gmail.com
    <header> 요소는 소개 내용 또는 탐색 링크 모음을위한 컨테이너를 나타냅니다.
    일반적으로 하나 이상의 제목 요소 (<h1> - <h6>), 로고 또는 아이콘, 저자 정보 (꼭 포함할 필요는 없습니다.)
    하나의 문서에 여러 개의 <header> 요소를 포함 할 수 있습니다. (보통 section안에 header를 사용합니다.)
    고로 상단에 있어서 header가 아니라 레이아웃이 평균적으로 그리 돼 있다보니 header가 상단에 있게 된것입니다.
    header가 꼭 상단에 있을 필요는 없습니다.
    footer도 페이지를 만든사람, 저작권 정보, 연관된 콘텐츠에 대한 링크등과 같은 정보를 포함해야 footer를 사용할 수 있습니다.

    +요약
    1. 위치에 따라서 header, footer가 정해지는 것이 아니라 무엇을 포함하고 있느냐에 따라 달라진다.
    위치만으로 사용했을 경우 의미가 부여된 것이 아니기 때문에 시멘틱 태그가 아닙니다.

    2. 단지 꾸미기 용으로 사용하실 것이라면 div태그를 사용하시는 것이 맞습니다.
    대화보기
    • 김정수
      질문드려요! 어떤 기능을 하는것이 아니라 하셨는데, 유지와 보수의 편리성. 그러하다면 '그냥 이곳은 nav이며 nav가 뜻하는 영역이다~' 라는게 되는건가요? 만약 nav 대신 div를 사용한다면 div는 그냥 영역일뿐 아무 뜻이 없기 때문에 id나 class로 nav의 뜻을 넣게되는데 이러면 결국 같아지는건가요?
    • 곽소연
      나중에 알아보니 header footer등을 알아보니...이런 태그는 시멘트릭?태그(Semantic Tag)라고 하네요.
      http://coronasdk.tistory.com/104

      1. 태그가 어떤 기능을 하는 것이 아니고 그냥 여기서 부터는 윗부분에 있는 것이다. 여기서부터는 아래에 있는 것이다라는 것을 알려줘서 나중에 다른 사람이 이 코딩을 보고 유지 보수할 때 편리하게 하려는 목적도 있다고 합니다.

      2. 또 하나의 기능은 CSS에서 모양을 만들 때 사용하기도 합니다.
    • 곽소연
      아래 김상택님에게 답변드립니다.
      footer라는게 있고 header라는 것도 있습니다.
      아마 css에서 나오는 요소 같습니다.
      아니네요. html5태그였습니다. http://aboooks.tistory.com/347
      옛날에 배워서요. 옛날에는 이런 태그 없었거든요.

      nav태그는 네이게이션의 약자인 것 같습니다.
      nav태그로 이동하고 그러는 것이 아니고...단지 영역을 나타낼 때 또는 단순한 표시...
      여기부터는 다른 곳으로 이동하는 것들이 모여 있다는 것을 표시하기 위해...
      쓰는 태그 같습니다.
      header태그는 홈페이지의 위에있는 부분이다를 나타내고
      footer태그는 아래에 있는 부분이다를 나타냅니다...
      https://opentutorials.org......160 여기에서도
      Grouping태그로 분류해 놓았습니다.

      그리고...
      이것을 이용하여 CSS에서 이 나누어진 부분을 이용하여...
      모양등을 꾸밀 수 있는 것 같습니다.
      http://unikys.tistory.com/333
      대화보기
      • 김상택
        설명의 3번째 줄에 "푸터에도 사이트의 중요한 곳을 링크하는 링크 그룹이 존재하지만, nav요소대신 footer요소로도 충분합니다." 라는 문구 중 처음 "푸터에도"라는 단어는 무엇입니까?
      버전 관리
      리체
      현재 버전
      선택 버전
      graphittie 자세히 보기