HTML 기본 구조 요소

(2019-05-13)

html 요소, head 요소, meta 요소, link 요소, header 요소, footer 요소, section 요소, aside 요소, Viewport, 뷰포트

1. html 요소웹문서의 시작과 끝을 나타냄 : <html lang='ko'> ... </html>속성 : lang='국가언어명'
     - (de: 독일어, en: 영어, kr: 한국어, zh: 중국어 등) ISO 639-1 (Language Code)


2. head 요소웹페이지 문서 내용이 아니라 문서에 대한 다양한 설정 정보들을 나타내는 곳

  ㅇ head 요소 내에 사용할 수 있는 요소들 : title, base, meta, link, script, style 등
     - title 요소 : 문서 전체의 제목 (또한, 즐겨찾기 제목)
        . 검색엔진이 보여주는 검색결과에 포함되는 등
     - meta 요소  : 문서 자체의 정보 제공 (문자인코딩,작성자,문서내용설명 등)
     - link 요소  : 외부 소스를 연결하여 현재 문서의 효과적 처리
     - base 요소  : 현재 웹페이지의 기본이 되는 URL 설정


3. meta 요소                                                   ☞ 메타데이터(Metadata) 참조

  ㅇ 문서 정보웹브라우저에게 제공키 위한 요소 (문서 자체를 설명)
     - (문서 내용, 문서 핵심 키워드, 작성자 정보, 문자인코딩,뷰포트 등)
        . 특히, 검색엔진 등이 웹페이지들을 검색할 때 유용한 정보 제공을 목적으로 함

  ㅇ head 요소 내에 위치함

  ※ 例)
       
<head>
   <meta charset="utf-8"> <!-- 문자 인코딩 방식 지정 -->
   <meta name="author" content="작성자 이름">
   <meta name="description" content="문서 내용 설명">
   <meta name="viewport" content="width=device-width,initial-scale=1.0">
   <meta http-equiv="keyword" content="콤마(,)로 구분된 검색키워드들">
   <title>웹페이지 타이틀</title>
</head>
ㅇ 뷰포트 (Viewport) - 웹브라우저 화면 크기를 장치(스마트폰,테블릿 등) 크기에 맞게 처리하는 것 . width=device-device : 화면 크기를 장치 크기에 맞춤 . initial-scale=1.0 : 장치 회전시, 화면 확대 비율의 자동 조정을 막아 줌 4. link 요소 ㅇ 다른 문서를 참조하는 a 요소와는 달리, 외부 소스를 연결하여(불러와서) 현재 문서의 효과적 처리 ㅇ 속성 - href="URL 경로 및 파일명" : 파일의 위치를 알려줌 - rel="stylesheet" : 연결할 대상이 스타일시트 임을 알려줌 - type="text/css" : 파일 형식이 텍스트/CSS 형식임을 알려줌 ㅇ 사용 例) 현재 문서의 번역 버전의 제공, 현재 문서의 스타일시트 적용 등 ㅇ head 요소 내에 위치함 5. 구획/구분 요소 (논리적인 구획 구분을 위함) ㅇ 레이아웃에 의미적인(Semantic) 마크업을 적용하려는 섹셔닝(Sectioning) 요소들 - 웹페이지 전체 또는 일정 영역을 논리적인 구획으로 분할할 때 유용한 요소들 ㅇ 종류 : 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. 기타 요소

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