반응형
웹 페이지를 작성하려면 기본적으로 선언되어야 하는 것들이 있는데요. 이것을 HTML 문서 기본구조라 하며, 그 구조는 다음과 같습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>문서 제목</title>
</head>
<body>
<h1>HTML</h1>
<p>이번 시간에 배울 내용은 HTML 입니다.</p>
</body>
</html>
<!DOCTYPE html>
- 도큐먼트 타입으로 현재 문서가 어떤 버전으로 작성되었는지 미리 표시합니다. <!DOCTYPE>은 태그는 아니며 웹 문서 제일 처음에 표시합니다.
- 위 예시의 도큐먼트 타입 <!DOCTYPE html> 은 HTML5 버전 이라는 뜻이며, 이전 버전인 HTML 4.01 에서는 더 복잡하게 사용했습니다.
- 하지만 현재 대부분 HTML5를 사용하고 있기 때문에 웹 사이트를 만들때 제일 상단에 <!DOCTYPE html> 이 표시를 사용하면 됩니다.
<html lang="ko"> ~ </html>
- 웹 문서의 시작(<html>)과 끝(</html>)을 나타내는 태그입니다.
<head> ~ </head>
- <head> 태그는 문서정보(메타데이터)를 담고 있습니다.
- <title> <base> <meta> <link> <style> <script> 등 태그들이 있습니다.
<title> - 브라우저의 제목 표시줄이나 페이지 탭에 보이는 문서 제목을 정의합니다. 텍스트만 포함할 수 있으며 태그를 포함하더라도 무시합니다.
<title>NAVER</title>
<base> - 문서 안의 모든 상대 URL이 사용할 기준 URL을 지정합니다. 문서에는 하나의 <base> 요소만 존재할 수 있습니다.
<base href="/assets/images/" />
<link> - 요소는 현재 문서와 외부 리소스의 관계를 명시합니다. <link>는 스타일 시트를 연결할 때 제일 많이 사용하지만, 사이트 아이콘("파비콘"과 홈 화면 아이콘) 연결 등 여러가지로 쓰일 수 있습니다.
<!-- 파비콘 설정 -->
<link rel="shortcut icon" href="./favicon.ico" />
<!-- Style 시트 연결 -->
<link href="/style.css" rel="stylesheet">
<style> - 스타일 규칙을 담고 있습니다.
<style>
.title {
color: blue;
}
</style>
<script> - 데이터나 자바스크립트 코드를 웹 문서에 포함할 때 사용합니다.
<script src="javascript.js"></script>
<meta> - <base> <link> <script> <style> <title>과 같은 다른 메타관련 요소로 나타낼 수 없는 메타데이터를 나타냅니다. <meta charset="UTF-8">은 HTML 파일의 인코딩을 알려주는 태그로서, <meta charset="UTF-8"> 태그를 입력 해야지 한글, 특수문자 들이 깨지지 않고 잘 출력 됩니다.
<meta property="og:image" content="https://example.com/image.jpg">
<body>~</body>
- <html> 태그의 자식(Child)태그로, HTML 문서 내용을 넣는 구간 이며, 실제 웹 브라우저 안에 표시됩니다. <body> 태그 안에 실제 문서내용을 입력하여 웹 사이트를 만듭니다.
반응형
'HTML' 카테고리의 다른 글
| 9. 시멘틱 태그 (0) | 2024.04.12 |
|---|---|
| 8. Form 태그 (0) | 2024.04.12 |
| 7. 표(table) 태그 (0) | 2024.04.11 |
| 6. 이미지 & 멀티미디어 태그 (0) | 2024.04.11 |
| 5. Block & Inline Element 영역 (0) | 2024.04.11 |
