반응형
html 텍스트 코드를 알아보겠습니다.
먼저 코드의 예와 결과를 보여드리겠습니다.
● 코드
<!DOCTYPE html>
<html>
<head>
<meta chartset="UTF-8">
<title>텍스트 태그</title>
</head>
<body>
<h1>제목을 기입합니다.</h1>
<p>문단 내용을 기입합니다.</p>
<hr>
<!--hr 태그를 통해 수평선을 표시하여 내용을 구분해 준다.-->
<h2>제목의 크기가 작아집니다.</h2>
<p>텍스트 내의 엔터를 통한
줄바뀜은 인식이 되지 않습니다.</p>
<!--결과를 보면 줄바꿈이 되지 않고 연결되어 표시되었다.-->
<p>텍스트 내의 엔터를 통한 <br>
줄바뀜은 인식이 되지 않습니다.</p>
<!--br 태그를 통해 줄바꿈을 해준다.-->
<p>텍스트 내의 스페이스 바를 통한
공백도 인식되지 않습니다.</p>
<!--결과를 보면 띄어쓰기가 한칸만 표시되었다.-->
<p>텍스트 내의 스페이스 바를 통한
공백도 인식되지 않습니다.</p>
<!-- 를 통해 공백을 표시한다.-->
</p>
</body>
</html>
● 결과
● 설명
p 태그
문단을 표시하는 태그
문단과 문단 사이에는 공백이 있다.
<p> 문단 내용 기입 </p>
h 태그
제목을 나타내는 요소를 표시하는 태그
h1, h2, h3, h4, h5, h6 와 같이 숫자와 함께 사용된다.
숫자는 제목을 크기를 나타낸다.
h1이 가장 크고 h6가 가장 작은 크기를 나타낸다.
<h1> 제목 내용 기입 </h1>
hr 태그
수평선을 나타내는 태그이다.
주제 변경 및 내용 구분을 위해 사용된다.
단일 태그이다.
<hr>
줄바꿈과 공백
html 문법에서 텍스트의 엔터를 통한 줄바꿈을 인정하지 않는다.
텍스트 줄바꿈을 위해서는 br 태그를 사용해야 한다.
<P> html를 공부합시다.
<br>
너무 재미가 있네요.
</P>
스페이스바를 통한 공백도 한 번 밖에 인정하지 않는다.
공백을 두 번 이상 표시하고자 할 때는 를 사용한다.
<P> html를 공부합시다.
너무 재미가 있네요.
</P>
반응형
'html' 카테고리의 다른 글
| 컨테이너 태그 - div, span 태그 (0) | 2022.07.25 |
|---|---|
| 이미지 태그(img) (0) | 2022.07.23 |
| 블록 태그와 인라인 태그 (0) | 2022.07.18 |
| HTML 기본 문법 (0) | 2022.07.14 |
| html 파일 만들어 실행시키기 (0) | 2022.01.18 |
