해당 태그는 html파일을 만들면 자주 볼 수 있습니다.
선언의 목적은 문서간의 호환성을 높이기 위함입니다.
HTML 문서 버전의 종류에는 HTML5, HTML4 이하 및 XHTML가 있고, 사용 용도와 발전 기간에 따라 버전이 달라졌기 때문에 과거 HTML 버전에서는 해당 버전에 맞게 문법을 검사하고 현재 버전에서는 현재 기준에 맞게 검사하는 기능입니다.
때문에 DOCTYPE선언은 HTML문서에서 태그를 정의하기 전에 가장 먼저 선언되어야만 합니다.
해당 태그도 독타입과 마찬가지로 html파을을 만들면 자주 볼 수 있는 태그입니다.
ko면 한국어, en이면 영어라고 다들 어리짐작 할 수 있지만,
lang 속성은 웹 접근성에 관한 내용이라고 합니다.
큰 예로 lang 속성에 명시된 값을 통해 스크린 리더가 인식을 합니다.
즉 시각 장애인이나, tts 기능을 사용하기 위해 스크린 리더가 해당 문서를 어떤 언어에 적합한 발음을 제공 할것인가를 결정합니다.
<head>요소는 기계가 식별할 수 있는 문서 정보(데이터)를 담는 곳 입니다.
<title>, <script>, <style>등이 head테그 안에 사용됩니다.
<!doctype html> <!-- !doctype == 해당 파일이 어떤 파일인지 알려줌-->
<html lang="en"> <!-언어--->
<head> <!--페이지 제목, 보이지 않는 페이지에 필요한 속성, 요소 추가-->
<meta charset="utf-8"> <!--이게 있어야 언어가 깨지지않음-->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>스파르타 강의 1주차</title> <!--페이지 제목(여기 제목으로 구글에서 검색됨)-->
<style> <!--css-->
</style>
<script> <!--js-->
</script>
</head>
<body>
<div class="mytitle"> <!--div: 구분 / class: 해당 div에 이름 부여-->
<button onclick="hey()">영화 기록하기</button> <!--버튼 생성 / onclick: 클릭했을 때-->
</div>
<div class="wrap">
<div class="row row-cols-1 row-cols-md-4 g-4">
<div class="col">
<div class="card">
<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
class="card-img-top" alt="..."> <!--해당 주소의 이미지 출력-->
<div class="card-body">
<h5 class="card-title">영화 제목이 들어갑니다.</h5> <!--제목(1~5 크기조정)-->
<p class="card-text">여기에 설명이 들어갑니다.</p> <!--단락/줄바꿈-->
<p>⭐⭐⭐</p>
<p class="mycomment">여기에 코맨트가 들어갑니다.</p>
</div>
</div>
</div>
</div>
</body>
</html>
참고한 사이트 및 블로그
TCPSCHOOL: http://www.tcpschool.com/html-tags/doctype
마이구미님 블로그: https://dasima.xyz/doctype-html/
'🔥웹개발종합반' 카테고리의 다른 글
Week2. Ajax (0) | 2022.09.12 |
---|---|
Week2. Jquery (0) | 2022.09.09 |
Week1 Homework. 아이유 팬명록 (0) | 2022.09.09 |
Week1. css 라이브러리 Bootstrap 사용법 (0) | 2022.09.06 |
Week1. <HTML/CSS> 폰트(글꼴) 적용 방법 (0) | 2022.09.06 |