태그의 종류
| meta | 웹페이지에 추가 정보를 입력하는 태그 |
| head 영역에 웹 문서를 만든 이, 검색 키워드, 문서 설명 등을 포함하는 태그 | |
| title | 웹페이지의 제목 |
| script | javascript 소스코드를 작성하는 영역 설정 |
| style | 스타일 시트를 추가하는 태그 |
HTML5 문서 작성 규칙
1. HTML5 문서는 소문자로 작성할 것을 권장.
2. 본문 내 연속된 공백이나 줄 바꿈은 하나의 공백으로 처리.
3. 들어쓰기를 활용하면 좋겠다.(권장)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h2>태그의 종류</h2>
<p>meta : 웹페이지에 추가 정보를 입력하는 태그</p>
<p>title : 웹페이지의 제목</p>
<p>script : javascript 소스코드를 작성하는 영역 설정</p>
<p>style : 스타일 시트를 추가하는 태그</p>
<hr>
<h2>HTML5 문서 작성 규칙</h2>
<p>1. HTML5 문서는 소문자로 작성할 것을 권장.</p>
<p>2. 본문 내 연속된 공백이나 줄 바꿈은 하나의 공백으로 처리</p>
<p>3. 들어쓰기를 활용하면 좋겠다.(권장)
</body>
</html>
텍스트 관련 태그
| 제목 출력용 | 문서의 제목을 출력하기 위한 태그. h1 ~ h6까지 있음. |
<h2>제목 출력용</h2>
<p>문서의 제목을 출력하기 위한 태그. h1 ~ h6까지 있음.</p>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
본문 출력용
| <,> | 태그는 본문의 내용을 출력할 때 사용. |
| © | 공백(스페이스바) |
| &snsp; | 샵(#) |
| 색상을 나타날때 구분이 안되어서 기호가 안 나올수도 있음. 일반적으로 잘 나옴. | |
| & | & 기호 |
<h2>본문 출력용(Paragraph)</</h2>
<p><p> 태그는 본문의 내용을 출력할 때 사용.
<!--
'<' : <
'>' : >
-->
<p>© : 카피라이트</p>
<p> : 공백(스페이스바)</p>
<p># : 샵(#)</p><!-- 색상 나타내는거 할 때 구분이 안되어서 기호가 안 나올수도있음. 일반적으로 잘 나옴. -->
<p>& : & 기호</p>
<p>더 많은 특수 문자 확인</p>
<p>https://dev.w3.org/html5/html-author/charref</p>
<p> : 옆에 5개의 공백이 있습니다.</p>
<p> : 옆에 5개의 공백이 있습니다.</p>
p태그와 br태그
| p | 단락을 구분하기 위해 줄간격이 크다. |
| br | 줄만 바꾸는 태그라서 줄간격이 좁다. |
<h3>p 태그와 br 태그</h3>
</body>
<p>p 태그는 단락을 구분하기 위해 줄간격이 크다.</p>
<p>br 태그는 줄만 바꾸는 태그라서 줄간격이 좁다.</p>
<!--
p 태그 : 단락과 단락을 구별하기 위해서 사용함. 줄을 바꿔주는 효과를 봄
br 태그 : 줄바꿈태그. 줄간격이 짧음
-->
p태그와 br태그의 예제
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>숭례문</title>
</head>
<body>
<h3>숭례문</h3>
<p>600년 동안 한양을 둘러싸고 있었던 한양도성의<br>
남쪽에 위치한 문. 대한민국 국보 1호.<br>
현재도 서울의 중심에 위치하고 있다.<br>
서울의 상징이나 다름 없는 건축물이다.</p>
<p>도시 남문의 이름에 '남' 자가 안 들어가서<br>
의아해하는 사람이 있는데 인의예지를<br>
동서남북에 대응하는 방식으로 서울의 정문들<br>
이름이 붙여졌다. <br>
유교에서 가장 중요시하는 덕목인<br>
인(仁), 의(義), 예(禮), 지(智), 신(信)을<br>
기준으로 이름이 지어졌다.</p>
</body>
</html>
'HTML5 CSS3' 카테고리의 다른 글
| 0512 HTML - form 태그, 회원가입 예제 만들기 (0) | 2020.05.13 |
|---|---|
| 0512 HTML - iframe 공간 분할 예 (0) | 2020.05.13 |
| 0512 HTML - 사진(이미지), 영상, 오디오 추가하기 (0) | 2020.05.13 |
| 0511 HTML - table (0) | 2020.05.12 |
| 0511 HTML - 기초2 (0) | 2020.05.11 |