(HTML/CSS/JavaScript) HTML 기본 템플릿에 이해 - 3
여기서 템플릿이란 말은 웹 페이지를 만들기 위한 기본적인 구조 또는 뼈대라고 생각하면 좋습니다.
즉 , HTML 문서를 작성할 때 공통적으로 사용되는 필수 요소들을 미리 정의해 놓은 형태를 의미합니다.
HTML 기본 개념 확인하기
1. HTML문서의 기본 구조
HTML 문서는 크게<html>,<head>,<body>라는 세 부분으로 나뉩니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>문서 제목</title>
</head>
<body>
<!-- 여기에 웹 페이지 내용이 들어갑니다 -->
</body>
</html>
코드 작성
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<meta name="decription" content="HTML 문서에 대한 설명, 구글 엔진이 의외로 참고를
많이는 안한다고 알려져 있음"/>
<meta name="keywords" content="HTML, CSS, JAVASCRIPT" />
<meta name="author" content="tenco" />
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>텐코딩</title>
</head>
<body>
</body>
</html>
1.DOCTYPE선언
<!DOCTYPE html>역활 : 브라우저에게 "이 문서는 HTML5로 작성됨"을 알려줍니다.
중요 포인트 : HTML 문서의 첫 줄에 반드시 작성해야 하며, 대소문자 구분없이 사용 가능합니다.
2.html 태그와 언어 설정
<html lang = "ko">역활 : HTML 문서의 시작과 끝을 나타내며, 모든 컨텐츠를 감쌉니다.
속성 lang="ko":문서의 주 언어가 한국어(ko)임을 설정합니다.
-주요값
-ko: 한국
en: 영어
jp: 일본
3. head 태그와 메타데이터와 설정
<head>
...
</head>역활 : 웹 페이지에 직접 표시되지 않는 정보를 담습니다.
<meta charset="UTF-8">
<meta name="description" contect="HTML 문서에 대한 설명, 구글 엔진이 의외로 참고를 많이는
안한다고 알려져 있음">
<meta name="keywords" contect="HTML,CSS,JAVASCRIPT">
<meta name="author" contect="Dava lee">역활 : 문서의 추가 정보를 제공합니다.
주요 속성:
- charset="utf-8": 문자 인코딩을 UTF-8로 설정(한글 표시 필수)
-name= "description": 페이지 설명(SEO에 유용, 현재는 덜 사용).
- name="keywords": 관련 키워드(과거 SEO에 유용, 현재는 덜 사용).
- name= "author" : 작성자 이름
메타데이터 주요 태그 표
| 태그 | 역활 | 코드 예시 |
| <meta charset="utf-8"> | 문자 인코딩을 UTF-8로 설정 | <meta charset="utf-8> |
| <meta name="description" content ="...."> | 페이지 설명 제공, 검색 엔진 참고 가능 | <meta name="description" content="설명"> |
| <meta name="keywords" content="....."> |
주요 키워드 정의,SEO 영향 미미 | <meta name="keywords' contect="HTML,CSS"> |
| <meta name="author" contect = "tenco"> |
작성자 정보 제공 | <meta name="keywords" content="HTML,CSS"> |
| <meta name= "viewport" content="...."> |
모바일 화면 크기 및 확대 /축소 설정 | <meta name="viewport" content="width=device-width'> |
| <meta http-equiv="X-UA- Compatible"> |
IE에서 최신 렌더링 엔진 사용 강제 | <meta http-equiv="X-UA- Compatible" content="ie=edge"> |
| <tltle>텐고딩 </title> | 브라우저 탭과 검색 결과에 표시될 제목 | <title>텐고딩 </title> |
4. 호환성 관련 태그
<meta http-equiv="X-UA-Compatible content="ie=edge">
5.반응형 웹을 위한 viewport 설정
meta name="viewport" context="width=device-width, user-scalable=no, initial-scale=1.0,
macimum-scale=1.0, minimum-scale=1.0">
6.LINK 태그란?
<link > 태그를 사용하면 외부 CSS파일로 스타일을 적용하거나. 파비콘으로 웹사이트의 개성을 더할 수 있습니다.
<link rel="stylesheet" href="style.css'>
<link rel= "icon" href="favicon.pug>역활 : HTML 문서에 외부 리소스(파일)를 연결합니다.
위치: <head>태그 안에 작성됩니다.
특징: <link>는 닫는 태그가 없는 단일 태그입니다.
주요 속성
| 속성 | 설명 | 주요 값 |
| rel | HTML 문서와 외부 리소스의 관계 표시 | stylesheet(CSS 파일), icon(파비콘)등 |
| href | 외부 리소스 파일의 위치 지정 | 파일 경로(상대 경로 또는 절대 경로) |
(1) rel ="stylesheet"
역할: CSS 파일을 연결해 웹 페이지의 스타일을 적용합니다.
예시: <link rel="stylesheet" href="style.css">
- style.css 파일을 불러와 HTML 문서에 스타일을 적용합니다.
(2) rel="icon"
역할 : 브라우저 탭에 표시될 파비콘(작은 아이콘을 설정합니다.)
예시 : <link rel=" icon" href="favicon.png">
favicon.png 파일을 파비콘으로 사용합니다.
팁 : 파비콘은 보통 .ico, .png, .jpg 형식의 이미지를 사용합니다
실습 예제
<!DOCTYPE html>
<html lang= "en">
<head>
<meta charset="UTF-8">
<meta name="description" content="HTML 연습 페이지 입니다.">
<meta name="keywords" content=HTML, CSS, Web">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--W3C 정의 인터넷 익스플로러로 웹 페이지를 열게 되면 최신 렌더링 버전으로 화면을 표시해 -->
<meta http-equiv="x-UA-Compatible' content="ie=edge">
<!-- 파비콘 연결해 보기 -->
<link rel="icon" href="img/favicon.png">
<title>Document</title>
</head>
<body>
<!-- 웹 브라우져에 표시 영역 -->
<h1>HTML 학습 페이지</h1>
<p>이 페이지는 HTML 문서의 기본 구조를 학습하기 위한 예제 입니다</p>
</body>
</html>