시맨틱 요소

(2019-07-11)

header 요소, nav 요소, section 요소, article 요소, footer 요소, aside 요소

Top > [기술공통]
[기초과학]
[진동/파동]
[방송/멀티미디어/정보이론]
[전기전자공학]
[통신/네트워킹]
[정보기술(IT)]
[공업일반(기계,재료등)]
[표준/계측/품질]
[기술경영]
통신/네트워킹 >   1. 통신 이란?
  2. 신뢰적 통신
[통신이론]
[선로/전송]
[통신망 일반]
[회선교환(PSTN)]
[무선/이동통신]
[광통신]
[인터넷/데이터통신]
인터넷/데이터통신 >   1. 데이터통신망
  2. 인터넷
  3. 데이터 네트워크 설계
[데이터 단위]
[프로토콜/계층]
[데이터 링크]
[TCP/IP]
[라우팅]
[인터넷 QoS]
[인터넷 관리]
[인터넷 응용]
[인터넷 기타]
[패킷교환(PSN)]
[인터넷 관련 기관]
인터넷 응용 > [NetBIOS]
[DNS]
[가상단말]
[FTP]
[전자메일]
[VoIP]
[웹기술]
[VPN]
[무선인터넷]
[전자상거래]
[개인 컨텐츠]
[인터넷 기타 응용]
웹기술 >   1. 웹 이란?
  2. 하이퍼텍스트
[웹 구성]
[HTTP]
[웹 페이지]
[웹 식별]
[웹 서비스]
[차세대 웹]
[웹기술 기타일반]
웹 페이지 > [마크업 언어]
[DOM,BOM]
[기능 요소]
[웹 디자인]
마크업 언어 >   1. 마크업 언어
  2. SGML
  3. DTD
[HTML]
[XML]
HTML >   1. HTML
  2. HTML 용어
  3. DHTML
  4. HTML5
[HTML 요소]
HTML 요소   1. HTML 구성 요소/종류
  2. 기본 구조 요소 (html,head,title,body 등)
  3. a 요소
  4. form 요소
  5. img 요소
  6. html 속성
  7. 기타 요소
  8. 시맨틱 웹
  9. 시맨틱 요소

1. 시맨틱 웹을 위한 구획/구분 요소 (논리적인 구획 구분을 위함)웹페이지 레이아웃에 의미적인(Semantic) 마크업을 적용하려는 섹셔닝(Sectioning) 요소들
     - 웹페이지 전체 또는 일정 영역을 논리적인 구획으로 분할할 때 유용한 요소들


2. 시맨틱 요소 종류

  ㅇ 종류 : header, nav, section, article, aside, footer

  ㅇ 개략적인 구획 例)
        

  ㅇ header 요소
     - 문서의 머리글
        . 통상 웹페이지 상단에, 로고 이미지,사이트 제목,네비게이션 등을 위치시킬 때 사용

  ㅇ nav 요소
     - 해당 사이트의 주 네비게이션링크를 제공할 때 사용

  ㅇ section 요소
     - 주제별로 그룹화(섹션화)시키거나, 장이나 절로써 구분시키는 글
     - 통상, 각 섹션은 머리글과 콘텐츠들로 구성됨

  ㅇ article 요소
     - 독립된 단편 글 또는 재사용 가능한 글
        . 例) 잡지/신문 등의 기사, 블로그의 포스트, 주석 등

  ㅇ aside 요소 
     - 본문 내용 중에 추가 설명 또는 분리된 컨텐츠 표현이 필요할 때,
     - 통상, 주변 콘텐트와 크게 관계가 없는 내용을 사이드바 영역으로 표시하는데 유용

  ㅇ footer 요소
     - 문서의 바닥글


[HTML 요소] 1. HTML 구성 요소/종류 2. 기본 구조 요소 (html,head,title,body 등) 3. a 요소 4. form 요소 5. img 요소 6. html 속성 7. 기타 요소 8. 시맨틱 웹 9. 시맨틱 요소

 
        최근수정     요약목록     참고문헌