프론트/HTML
텍스트 표시 방법과 특징
개발하는묭이
2021. 12. 20. 17:09
문단
글을 내용상 끊어서 구분한 토막글
p 태그는 문단 요소를 나타내는 태그로써 가장 많이 사용되는 태그이다
하나의 p태그는 하나의 문단을 표현한다
문단과 문단 사이에는 공백이 있다
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>텍스트 태그 연습</title>
</head>
<body>
<h1>텍스트 태그 연습</h1>
<p>텍스트를 표시하고 있습니다.</p>
<hr>
<h2>작은 제목</h2>
<p>제목의 크기가 바뀌었습니다.</p>
<p>p 태그는 하나의 문단을 나타냅니다.</p>
<p>따라서 하나의 p태그는 자기만의 영역을 가집니다.</p>
</body>
</html>
제목(headline)
h 태그는 제목(표제) 요소를 나타내는 태그이다
숫자와 함께 사용되면 숫자 1일때 가장 크고 6일때 가장 작다
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
<h1>제목을 나타내자!</h1>
<h2>제목을 나타내자!</h2>
<h3>제목을 나타내자!</h3>
<h4>제목을 나타내자!</h4>
<h5>제목을 나타내자!</h5>
<h6>제목을 나타내자!</h6>
</body>
</html>
수평선
hr 태그는 수평선을 표시하는 단일 태그이다
주제 변경 또는 내용 구분을 위해 주로 사용한다
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
<p>지금까지 스포츠 뉴스였습니다.</p>
<hr>
<p>날씨입니다. 따뜻하지만 미세먼지가 가득할 예정입니다.</p>
</body>
</html>
HTML 텍스트의 특징
일반적으로 엔터는 줄바꿈을 의미한다
HTML 코드에서는 이를 무시한다
또한 스페이스를 통한 공백도 한 번씩 밖에 인정되지 않는다
줄바꿈 태그와 공백문자
HTML에서는 br 태그가 줄바꿈을 담당한다
공백을 두 번 이상 표시하고자 할 때는 를 사용한다
br과  를 통한 공백을 주는 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>텍스트 태그 연습</title>
</head>
<body>
<h1>텍스트 태그 연습</h1>
<p>텍스트를 표시하고 있습니다.</p>
<hr>
<h2>작은 제목</h2>
<p>제목의 크기가 바뀌었습니다.</p>
<p>p 태그는 하나의 문단을 나타냅니다.</p>
<p>따라서 하나의 p태그는 자기만의 영역을 가집니다.
<br><br><br> <!-- 엔터를 3번 출력하겠다 -->
지금 영상을 만들고 있는데 ... 저희 집 고양이가
<!-- 조합문자를 연달아 10번 집어넣어 공백을 10번 주겠다-->
너무 방해를 해서 힘드네용
</p>
</body>
</html>
내용 정리
- p 태그는 문단을 표시하는 태그이다
- h1 ~ h6 태그는 헤드라인을 표시하는 태그이다
- 숫자가 작을수록 크다
- 수평선 hr은 주제 변경이나 내용 구분시에 사용하는 태그이다
- html은 텍스트의 줄바꿈 , 공백 등을 엔터와 스페이스로 처리하지 않는다
- 스페이스는 한 번씩만 허용된다 (연달아 입력할 경우 한 번 외엔 무시)
- 태그 br는 줄바꿈을 , 문자조합  는 공백을 나타낸다