반응형
HTML5의 기본 구조는 웹 페이지를 작성하기 위한 표준 형식을 제공합니다. HTML 문서는 항상 <!DOCTYPE html> 선언으로 시작하며, 이 선언은 브라우저에게 HTML5 문서를 사용하고 있음을 알려줍니다.
아래는 HTML5의 기본 구조입니다
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>문서 제목</title>
<!-- 스타일시트 링크 -->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>헤더 영역</h1>
</header>
<nav>
<ul>
<li><a href="#section1">섹션 1</a></li>
<li><a href="#section2">섹션 2</a></li>
</ul>
</nav>
<main>
<section id="section1">
<h2>섹션 1</h2>
<p>내용이 들어갑니다.</p>
</section>
<section id="section2">
<h2>섹션 2</h2>
<p>내용이 들어갑니다.</p>
</section>
</main>
<footer>
<p>푸터 영역</p>
</footer>
<!-- 스크립트 링크 -->
<script src="script.js"></script>
</body>
</html>
위 참고-1 사진에서 보면 HTML 기본 페이지를 만들고 저장할 때, 인코딩 속성을 <meta charset="UTF-8"> 속성과 같은 값으로 저장해 주셔야만 제작한 사이트를 인터넷에 띄웠을때, 한글 깨짐 현상을 최소화 할 수 있습니다.
주요 요소 설명
- <!DOCTYPE html>: HTML5 문서를 선언.
- <html lang="ko">: 문서 언어를 한국어(ko)로 설정. // 영어 설정시 "en" 으로 변경.
- <head>: 메타데이터, CSS, 제목 등 문서의 정보를 포함.
(style, JavaScript를 외부링크로 불러오지 않을시 여기에 직접 기입 가능.)- <meta charset="UTF-8">: UTF-8 인코딩 사용으로 모든 언어 지원.
- <meta name="viewport" content="width=device-width, initial-scale=1.0">: 반응형 웹을 위한 초기 설정.
- <title>: 문서 제목을 설정. // 예) 크롬으로 네이버 접속시 탭에 NAVER라고 뜹니다. 그 곳을 설정하는 명령어.
- <body>: 실제 화면에 표시되는 콘텐츠를 포함.
- <header>: 페이지 상단의 헤더 영역. // 주로 문서 제목이라 보면 된다. 이글로 치면 "주요 요소 설명"
- <nav>: 내비게이션(메뉴) 영역. // 홈페이지 상단, 좌측, 우측 or 모바일 점선표시 등 카테고리 표시
- <main>: 문서의 주요 콘텐츠 영역. // 주로 맨 처음 보여지는 제일 큰 화면
- <section>: 주제별로 나뉜 콘텐츠 블록. // 주요 내용과 상세 페이지등이 포함된다.
- <footer>: 페이지 하단의 푸터 영역. // 회사 홈페이지 하단에 제작자 or 회사 정보가 이곳에 포함된다.
- 링크 및 스크립트:
- CSS: <link rel="stylesheet" href="styles.css"> // 확장명 .CSS로 저장한 외부 파일을 HTML코드에 적용시키는 명령어
- JavaScript: <script src="script.js"></script> // 확장명 .js로 저장한 외부 파일을 HTML 코드에 적용시키는 명령어.
HTML5의 주요 특징
- 반응형 웹 지원: meta viewport 설정으로 다양한 디바이스에서 사용 가능.
- 시맨틱 태그: <header>, <footer>, <section>, <article> 등 의미 있는 태그 제공.
- 멀티미디어 지원: <audio>와 <video> 태그를 사용해 별도의 플러그인 없이 멀티미디어 삽입 가능.
- 폼 기능 향상: 새로운 입력 타입(email, date, color 등)과 속성 추가.
현재 5.2 버전까지 나왔으며 추후에 6버전까지도 개발 예정이라고 하니, 코딩에 관심있는 분들 취미로 시작해서 직업이 될 수도 있으니 참고 하시어 발전된 성과를 얻으셨으면 합니다. 그럼 다음에 만나요~
반응형
'HTML&CSS' 카테고리의 다른 글
| CSS a속성에 대해 알아보자. (0) | 2024.12.27 |
|---|---|
| CSS 속성별 예제 및 설명 (0) | 2024.12.24 |
| 홈페이지 제작에 앞서 알아두면 좋을 프로그래밍 언어 (0) | 2024.12.23 |
| HTML5.2 에서 구현 할 수 있는 3D 그래픽은 어떤게 있을까 (5) | 2024.12.22 |
| HTML6 얼마나 발전한 코딩 일까 (2) | 2024.12.22 |
