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. body 요소
ㅇ 실제 웹브라우저에 표시될 내용들이 이곳에 위치함
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>