HTML+CSS+JAVASCRIPT/HTML

[HTML.01] HTML의 기본

Mink__02 2024. 1. 17. 15:14

1. HTML 의 기본 구조

<!DOCTYPE html> <!--1번-->
<html lang="en">
<head><!--2번-->
    <meta charset="UTF-8"><!--3번-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title> <!--4번-->
</head>
<body><!--5번-->
    
</body>
</html>

 

1번: 현재 문서가 HTML5 언어로 작성한 웹 문서라는 것을 의미한다.

2번: head는 문서와 관련된 정보, 문서에 사용할 외부 파일 링크 등을 표시해준다. (웹 상에서는 보이지 않는다!)

-> <meta ... > 을 이용하여 표시해준다.

3번: 한글로 표시하기 위하여, UTF-8 세트를 사용한다.

4번: <title>... </title>로 문서 제목을 표시해준다.

5번: 실제 브라우저에 표시될 내용을 입력한다.

 

2. HTML  시멘틱 태그

 

Semantic Tag란?

-> 태그를 이용하여 구조 및 역할, 내용 등을 정확하게 알 수 있도록 한다.
<main> .. </main> : 본문영역
<header> .. </header> :헤더 영역
<footer> ..</footer>: 푸터 영역
<nav> ..</nav> : 내비게이션 영역
<article>..</article>: 독립적인 컨텐츠 영역
<section>..</section> : 컨텐츠 분할 영역
<aside>..</aside>: 사이드바 영역
<div> .. </div> : 여러 소스를 묶는 역할