HTML 기본 구조 요소

(2019-08-29)

html 요소, head 요소, meta 요소, link 요소, Viewport, 뷰포트

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

  ㅇ 주요 속성
     - name 속성 : title, description, author, keywords, viewport
     - content 속성 : 위 name 속성에 대응되는 속성값을 이 곳에 적어둠
     - charset 속성 : 문자셋 방식
     - http-equiv 속성 : refresh 등

  ㅇ 뷰포트 (Viewport)
     - 웹브라우저에서 실제 보이는 화면 영역
        . 즉, 마우스 등으로 화면 크기를 크게/작게 변경할 때 변하는 화면 영역
     - 웹문서 시작부의 meta 태그 요소에 뷰포트를 미리 정하면,
       웹브라우저 화면 크기를 장치(스마트폰,테블릿 등) 크기에 적절히 맞게 보여줄 수 있게 됨
        . width=device-device : 화면 크기를 장치 크기에 맞춤
        . initial-scale=1.0 : 장치 회전시에, 화면 확대 비율의 자동 조정을 막아 줌
     - 뷰포트 내 주요 속성들
        . (width, height, initial-scale, user-scalable, minimum-scale, maximum-scale, 
           target-densitydpi)
     - 뷰포트 단위
        . (vm, wh, wmin, wmax, ...)


4. link 요소

  ㅇ 다른 문서를 참조하는 a 요소와는 달리, 
     외부 소스를 연결하여(불러와서) 현재 문서의 효과적 처리

  ㅇ 속성 
     - href="URL 경로 및 파일명" : 파일의 위치를 알려줌
     - rel="stylesheet" : 연결할 대상이 스타일시트 임을 알려줌
     - type="text/css" : 파일 형식이 텍스트/CSS 형식임을 알려줌

  ㅇ 사용 例) 현재 문서의 번역 버전의 제공, 현재 문서의 스타일시트 적용 등
      <link href="../../css/style.css" rel="stlyesheet">

  ㅇ head 요소 내에 위치함


5. 사용 例)
    
<!DOCTYPE html>
<html lang="ko">
<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>
   <link href="../../css/style.css" rel="stlyesheet">
</head>
<body>

...

</body>
</html>


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

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