<!doctype html> -> 문서 유형
<html lang = "ko"> 언어 설정
html 뒤에 붙는 lang을 속성이라고 한다
머리 부분 문서의 각종 정보와 문서 자체에 대한 설명 내용
(문서의 각종 정보(제목, 설명, 외부파일 등등) 작성)
<head>
meta 태그 : 종료태그 없음. 사용자에게 표시되는 부분이 아니고
브라우저/검색엔진/기타 서비스 부분에서 사용되는 설정이다
<meta charset="UTF-8"> : 문서의 인코딩 설정
<meta name="generator" content="VS Code">
<meta name="author" content="이름">
<meta name="description" content="HTML 공부를 위한 문서">
<meta name ="viewport" content="width=device-width">
뷰포트(브라우저의 웹 콘텐츠를 볼 수 있는 창의 영역)설정. 장치길이만큼 설정
<title> 문서의 제목 설정</title>
<body>
몸체부
브라우저 화면 상에 표시할 모든 정보, 내용 작성
</body>
</head>
</html> - - > 끝 부분
<!DOCTYPE html> <!--문서유형 정의. HTML 형식 문서 선언-->
<html lang="ko"> <!-- 문서 전체를 감싸는 태그. 루트 요소로 문서의 시작과 끝을 표시.-->
<!-- lang 속성 : 문서 고유 언어 설정 (ko, en, ...)-->>
<!--머리부
문서의 각종 정보(제목, 설명, 외부파일 등등) 작성
-->
<head>
<!-- meta 태그 : 종료태그 없음. 사용자에게 표시되는 부분이 아니고,
브라우저/검색엔진/기타 서비스 부분에서 사용되는 설정
-->
<meta charset="UTF-8"> <!--문서의 인코딩 설정-->
<meta name="generator" content="VS Code"> <!--문서 작성 시 사용된 프로그램-->
<meta name="author"content="jonggun">
<meta name="description" content="HTML 공부를 위한 문서"> <!--문서에 대한 설명-->
<meta name="viewport" content="width=device-width">
<!--뷰포트(브라우저의 웹 콘텐츠를 볼 수 있는 창의 영역) 설정. 장치길이만큼 설정.-->
<!-- 문서의 제목 설정(브라우저의 탭 부분에 표시)-->
<title> HTML - 글자 관련 태그</title>
</head>
제목 태그 : h1 ~ h6
<h1> ~ <h6> 존재하지 않는 태그 사용 시 일반적인 글자로 인식이 된다
<hr> : 가로줄(수평선) 표시 태그
문단을 구분하는 태그 : <p>
문단을 나누는 태그로 p태그와 pre태그가 있다
p 태그 내에서는 줄바꿈 처리를 하고자 한다면 별도의 태그를 사용해야한다
<br> :
줄바꿈 처리를 해주는 태그
<pre> : 시작태그에서부터 종료태그까지 입력한 내용을 그대로 표현
<pre>pre 태그는 시작태그에서부터 종료태그까지 입력한 내용을 그대로 표현
줄바꿈처리!!
..
.
.
공백도..? @ @ @ @ @ @
내가 가장 존경하는 건 임수진 강사님
기호 문구는 될까..?
</pre>
: 띄어쓰기
<Strong> 글자를 굵게 표시하는 태그 </Strong>
<u>언더라인
<em> 글자를 기울여서 표시하는 태그</em>
<mark> 형광펜 효과와 함께 표시하는 태그
<s> 취소 선을 표시하는 태그
<small> 글자를 작게 표시해주는 태그 </small>
첨자 :
<sub> 아래 첨자
<sup> 윗 첨자
<p> 태그 중첩 사용 <br>
<b><em>굵은 글자, 기울여서 표시</em></b>
<br>
<s><mark>취소선, 형광펜 표시</mark></s>
</p>
목록태그 :
<body>
ul :순서가 없는 태그이다
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
</ul>
<Ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
</Ol>
순서가 있는 태그(ol)
=> 기본적으로 1부터 시작
숫자로 표시,7부터 시작,역순으로
<ol type="1" start="7" reversed>
표를 만드는 태그 : table, tr, th, td
<tr> </tr> : 표의 한 행을 나타내는 태그
<th> 표의 제목을 나타내는 태그
<td> 표의 일반 셀을 나타내는 태그
<h3>기본적인 표 만들기</h3>
<table border="1"> <!--border : 표의 테두리 두께-->
<caption><b>웹 브라우저 종류<b></caption>
<!--caption : 테이블 제목 표시 태그-->
<tr>
<!--width : 가로 길이 지정 속성(기본 px 단위)-->
<!--height : 세로길이 길이 지정 속성(기본 px 단위)-->
<th width="220px" height="50">브라우저명</th>
<th width="100">제조사</th>
<th width="400">홈페이지</th>
</tr>
<tr>
<td>Internet Explorer</td>
<td>MS</td>
</tr>
<tr>
<td>Chrom</td>
<td>GOOGLE</td>
</tr>
<tr>
<td>Satari</td>
<td>Apple</td>
</tr>
</table>
<figure>
<figcaption>figure, figcaption : 테이블의 설명 또는 이미지의 설명을 표현할 때 주로 사용되는 태그</figcaption>
</figure>
<hr>
<h3>표의 행과 열을 합쳐주는 속성</h3>
목록 <
<body>
<h2>목록 형태로 표시해주는 태그</h2>
<li>목록 태그 li</li>
<li>목록이다!!</li>
<h3>ul : 순서없는 목록태그</h3>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
</ul>
<li>HTML 태그
<ul>
<li>글자 관련 태그 : p, pre</li>
<li>목록 관련 태그 : ul, li</li>
</ul>
</li>
<hr>
<h3>ol : 순서 있는 목록 태그</h3>
<Ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
</Ol>
<hr>
<!--
순서 있는 태그(ol)
=> 기본적으로 1부터 시작
* 순서에 대한 속성*
- type : 순서 표시 타입 (숫자, 알파벳(A,a), 아라비아숫자(i))
- start : 시작값 설정. 숫자로 값 설정. (1,5, ...)
- reversed : 역순 표시
-->
<h4>숫자로 표시, 7부터 시작 역순으로</h4>
<ol type="1" start="7" reversed>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
</ol>
<h4>영문로 표시, 7번째 알파벳 시작</h4>
<ol type="a" start="7" reversed>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
</ol>
<h4>아라비아 숫자 표시, 3번째 알파벳 시작</h4>
<ol type="I" start="3">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
</ol>
<ol>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
<hr>
<h3>dl : 설명 관련 목록 태그 (주로 용어 정의 시 사용) </h3>
<dl>
<dt>제목 입력 태그</dt>
<dd>설명 입력 태그</dd>
<dt>프론트엔드 영역</dt>
<dd>등의 언어를 사용하요 사용자의 요청에 대한 처리후</dd>
<dt>백엔드 영역</dt>
<dd>Java,DB등을 사용하여 사용자의 요청에 따라 처리 </dd>
</dl>
<h2>비디오 태그</h2>
<!--
<video src = "비디오 파일 경로" controls autoplay loop>
width="" height="" poster="썸네일 이미지 경로"></video>
-->
<video src="resources/04_자료/sample.mp4"controls autoplay loop
width="300" height="200"
poster="resources/04_자료/sunflower.jpg"></video>