본문 바로가기
TIL/HTML5 & CSS

[HTML5] HTML기본구조, 글자관련태그

yndev 2022. 2. 9. 01:19

<!DOCTYPE html>

- HTML5 문서 형식 선언

 

<html lang="ko">

- <html> : html 문서의 내용을 정의

- lang 속성 : 페이지가 어떤 언어인지 표시

 

<head>

- 문서 제목과 스크립트, 스타일 시트으 ㅣ링크 또는 선언을 포함하는 문서의 일반적인 정보(메타데이터)를 정의

 

<meta charset="UTF-8">

- 문자 인코딩 선언

 

<title>제목</title>

- 브라우저의 제목 표시줄이나 페이지 탭에 보여지는 문서의 제목을 정의

 

<body>

- html 문서의 내용(content)을 정의

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>1_글자관련태그</title>
</head>
<body>
</body>

글자관련태그

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>글자관련태그</title>
</head>
<body>
    <h1>h1 태그입니다.</h1>
    <h2>h2 태그입니다.</h2>
    <h3>h3 태그입니다.</h3>
    <h4>h4 태그입니다.</h4>
    <h5>h5 태그입니다.</h5>
    <h6>h6 태그입니다.</h6>
</body>
</html>

 

    <h3>&lt;hr&gt; : 줄 바꾸면서 수평선 넣는 태그</h3>
    <hr />

 

    <h3>&lt;br&gt; : 줄 바꿈 태그</h3>
    br 태그는<br>
    줄을 바꾸는 태그

 

    <h3>&lt;p&gt; : 단락을 구분하는 태그</h3>
    <p>첫 번째 단락입니다.</p>
    <p>두 번째 단락입니다.</p>
    <p>세 번째 단락입니다.</p>

    <h3>문단을 나누는 태그(p, pre)</h3>
    문단 영역을 나누는 태그로는 p태그와 pre태그가 있다.
    <p>
        p태그는 문단 영역을 나누는 태그이지만
        한 개의 공백만 표시하며
        줄 바꿈 입력을 별도의 태그로 지정해주어야 한다.
    </p>
    <pre>
        pre태그는 여러칸                띄우기
        혹은 줄 바꿈 등을 포함하여
        입력한 내용 그대로 표현하는 태그이다.
    </pre>

티스토리툴바