<!DOCTYPE html>
<!-- 우리가 어떤 언어를 쓰는지 -->
<html lang="en">
<head>
<!-- UFT-8 : charset이라 하는데 작성되어 있는 문자를 어떻게 읽을지
이로인해 한글로 작성된게 깨짐 없이 잘 나타나는것임. 이는 여러가지 세팅 방식 중 하나임.
전 세계에서 널리 사용되는 방식 -> 아스키 코드 유니 코드 등등을 표현 가능
이게 빠진다면 우베 사이트에 한글로 작성된 것들이 깨짐 없이 볼 수 있는 것임.
문자 인코딩방식: 인코딩이란? 01과 같은 이진수를 컴퓨터가 이해할 수 있도록 변환하는 것-->
<meta charset="UTF-8">
<!--화면에 보여지고 있는 영역 : 디바이스의 너비, 높이 설정-> 아래는 화면 너비에 알맞게
맞추겠다라는 설정임. 예전에는 모바일, pc버전을 별개로 만들었지만 아래와 같은 설정을 할 수 있도록
업데이트가 되어지면서 사용하는 디바이스에 맞게 변경이 되도록 바뀜.
예을들어 m.naver.com 과 같이 모바일 버전의 주소도 존재하였음.
scale은 처음으로 로드될 때 보이는 크기 -> 즉, 줌 레벨
필수로 들어가야 되는 영역임.-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--tap 탭의 제목을 나타낸다. -->
<title>Document</title>
<link rel="stylesheet" href="CSS_test\week3(4).css" >
<!--<head>영역 안에 들어가는 것들!!
1. 오픈카드 : 사이트가 생성이 되면 보여지는 이미지? → 이게 오픈카드임.
→ 이게 헤더 영역 안에 들어감.
2. 파비콘 : 사이트의 아이콘, 로고 -> 내가 가지고 있는 이미지로 생성 가능
-->
</head>
<body>
<header>
<!-- 페이지 상단 영역 -->
<!-- 제목, 로고, 검색창 등 -->
</header>
<nav>
<!-- 네비게이션 메뉴 -->
<!-- 링크 요소들 -->
</nav>
<main>
<!-- 페이지의 주요 내용 -->
<!-- 한 페이지에 하나의 <main> 요소를 사용 -->
<article>
<!-- 독립적인 콘텐츠 -->
<!-- 블로그 글, 뉴스 기사, 카드 뉴스, 댓글 등 -->
<!-- 재사용이 가능하다. -->
<figure>
<!-- 피규어 요소 -->
<!-- 이미지, 도표, 그래프 등의 시각적인 콘텐츠 -->
<img src="image.jpg" alt="이미지 설명">
<figcaption>이미지에 대한 설명</figcaption>
<!-- img tag랑 비슷 -->
</figure>
</article>
<section>
<!-- 문서의 구획화된 콘텐츠 : 구조화 시킨다. -->
<div>
<!-- 이 섹션 내에 여러개가 또 나뉜다면 <div></div> -->
</div>
</section>
<aside>
<!-- 사이드바 영역 -->
<!-- 보조 콘텐츠 -->
</aside>
</main>
<footer>
<!-- 페이지 하단 영역 -->
<!-- 저작권 정보, 연락처 등 -->
</footer>
</body>
</html>
### 태그 정리
텍스트 작성
<hn></hn> :(1≤n≤6) 1이 가장 크다. (가장 중요)
해당 단어가 이 안에 있어야 검색 속도를 빠르게 한다.
글자가 클 수록 검색에서는 밀린다.
<p></p> : 본문의 내용
<br> : 줄바꿈. (breaking line)
<blockquote></blockquote> : 인용문 뒤에 p
<q></q> : 짧은 인용문, 앞에 p
<ins></ins> : 추가 콘텐츠
<del></del> : 삭제 콘텐츠
<sub> </sub>: 아래첨자
<sup></sup>: 위첨자
태그 실습
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Tag</title>
</head>
<body>
<h1>heading level1</h1>
<h2>heading level2</h2>
<h3>heading level3</h3>
<h4>heading level4</h4>
<h5>heading level5</h5>
<h6>heading level6</h6>
<p>본 내용을 작성할 때는 tag p를 사용합니다.</p>
<p>본 내용을 작성할 때는 tag p를 사용합니다.본 내용을 작성할 때는 tag p를 사용합니다.</p>
<p>본 내용을 작성할 때는 tag p를 사용합니다.<br>본 내용을 작성할 때는 tag p를 사용합니다.</p>
<p>본 내용을 작성할 때는 tag p를 사용합니다.</p>
<blockquote>Hello World!</blockquote>
<blockquote cite="https://namu.wiki/w/HTML">
<p>프로그래밍 언어가 아니라 마크업 정보를 표현하는 마크업 언어로[1] 문서의 내용 이외의 문서의 구조나 서식 같은 것을 포함한다. 보면 알겠지만 애초에 이름 HTML의 ML이 마크업 언어라는 뜻이다.
웹사이트에서 흔히 볼 수 있는 htm이나 html 확장자가 바로 이 언어로 작성된 <ins>GOOD</ins> <del>GOOD</del>문서다.</p>
</blockquote>
<p>하이퍼텍스트 <q cite="https://namu.wiki/w/HTML">여기에 짧은 인용문을</q> 프로그래밍 언어가 아니라 <ins>마크업 정보를</ins> 표현하는 마크업 언어로[1] 문서의 내용 이외의 문서의 구조나 서식 같은 것을 포함한다. 보면 알겠지만 애초에 이름 HTML의 ML이 마크업 언어라는 뜻이다.
웹사이트에서 흔히 볼 수 있는 htm이나 html 확장자가 바로 이 언어로 작성된 문서다.</p>
<h1>H<sub>2</sub>0</h1>
<h1>X<sup>2</sup></h1>
<p>이 시설은 <em>관계자 외</em> <strong>출입금지</strong>입니다.</p>
<p>이 시설은 <i>관계자 외</i> <b>출입금지</b>입니다.</p>
</body>
</html>
