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. 뷰포트  


Copyrightⓒ written by 차재복 (Cha Jae Bok)               기술용어해설 후원
"본 웹사이트 내 모든 저작물은 원출처를 밝히는 한 자유롭게 사용(상업화포함) 가능합니다"