HTML 기본 구조 요소

(2019-08-29)

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

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

    요약목록
Copyrightⓒ written by 차재복 (Cha Jae Bok)        「 소액후원 」