HTML 기본 구조 요소

(2022-02-28)

html 요소, head 요소, link 요소

1. html 요소웹문서의 시작과 끝을 나타냄 : <html lang='ko'> ... </html>
     - 웹문서 전체를 가리키므로, 때론, 루트 요소 (Root Element) 라고도 함

  ㅇ 속성 : lang='국가언어명'
     - (de: 독일어, en: 영어, ko: 한국어, zh: 중국어 등) ISO 639-1 (Language Code)


2. head 요소웹페이지 문서 내용이 아니고, 문서에 대한 다양한 설정 정보들을 나타내는 곳
     - 즉, 웹브라우저 화면에 출력되지 않는 정보들을 설정하는 곳                ☞ 메타데이터 참조

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


3. link 요소

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

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

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

  ㅇ head 요소 내에 위치함


4. 사용 例)
    
<!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 요소의 종류 3. 기본 구조 요소 (html,head,title,body 등) 4. 의미 구조 요소 (header,section,footer 등) 5. meta 요소 6. a 요소 7. img 요소 8. 기타 요소 9. html 속성 10. 뷰포트
[form 요소]
  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. HTML 요소의 구성
                    2. HTML 요소의 종류
                    3. 기본 구조 요소 (html,head,title,body 등)
                    4. 의미 구조 요소 (header,section,footer 등)
                    5. meta 요소
                    6. a 요소
                    7. img 요소
                    8. 기타 요소
                    9. html 속성
                    10. 뷰포트
                1.   form 요소
              2.   HTML5
            2.   XML
          2.   DOM,BOM
          3.   웹 기능 요소
          4.   웹 디자인
        4.   웹 식별
        5.   웹 서비스
        6.   차세대 웹
        7.   웹기술 기타일반
      9.   인터넷 응용
      10.   인터넷 기타
      11.   패킷교환(PSN)
      12.   인터넷 관련 기관
  7.   정보기술(IT)
  8.   공학일반(기계,재료등)
  9.   표준/계측/품질
  10.   기술경영

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