8. HTML 기본 태그
[HTML 강좌] 8. HTML 기본 태그 단락<p>, 줄바꿈<br>, 구분선<hr>, 공백< >
이번 포스팅에서는 <p>, <hr>, < >, <br> 의 정의와 활용법의 습득하여 기본적인 HTML 컨텐츠를 작성합니다.
<p></p> 태그
<p> 태그는 단락 또는 문단을 의미하며 영문으로 Paragraphs 로 표기합니다.
<p> 태그는 사용되는 첫번째 라인을 띠우고 표기됩니다.
<p> 태그가 사용되면 <p> 태그의 시작과 끝에 공백(space)를 자동으로 추가되며, 이는 수정할 수 없습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>8 강 연습 페이지.</title>
</head>
<body>
<p>여기는 첫번째 단락을 표시하고 있습니다.</p>
<p>여기는 두번째 단락을 표시하고 있습니다.</p>
</body>
</html>
HTML와 워드 또는 에디터를 통한 문서의 표현의 차이
HTML 문서는 워드나 텍스트 에디터에서 작성된 것처럼 웹브라우져에서 표현되지 않습니다.
이유는 HTML 문서를 표현하는 웹브라우저와 사용하는 장비(Device), 화면의 크기나 사용하는 윈도우의 크기등에 따라 나타나는 결과가 다르기 떄문에 명시적으로 표현되지 않는 공백(space) 이나 줄 띄우기를 허용하지 않습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>8 강 연습 페이지.</title>
</head>
<body>
<p>여기는 첫번째 단락을 표시하고 있습니다.</p>
<p>여기는 두번째 단락을 표시하고 있습니다.</p>
</body>
</html>
위 예제와 같이 소스에서 공백과 줄 바꿈을 여러 번 수행한 상태라도 웹브라우져에서는 허용하지 않고 삭제됩니다.
HTML에서 공백(Space)를 표기하는 특수문자
HTML 에서는 공백(Space)는 단어당 하나만을 허용합니다.
추가적으로 공백을 표현하고자 할때는 로 표현되는 특수문자를 추가하고자 하는 공백의 숫자만큼 표현합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>8 강 연습 페이지.</title>
</head>
<body>
<p>여기는 첫번째 단락을 표시하고 있습니다.</p>
<p>여기는 두번째 단락을 표시하고 있습니다.</p>
</body>
</html>
수평 구분선(Horizontal Rules)을 표시하는 <hr> 태그
HTML 문서에서 가로로 표현되는 구분선을 추가할때는 <hr> 태그를 사용합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>8 강 연습 페이지.</title>
</head>
<body>
<p>여기는 첫번째 단락을 표시하고 있습니다.</p>
<hr>
<p>여기는 두번째 단락을 표시하고 있습니다.</p>
</body>
</html>
줄바꿈(Line Break)을 표시하는 <br> 태그
HTML 문서에서 줄바꿈(Line Break)를 추가할때는 <br> 태그를 사용합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>8 강 연습 페이지.</title>
</head>
<body>
<p>여기는 첫번째 단락을 표시하고 있습니다.</p>
<br>
<br>
<br>
<br>
<p>여기는 두번째 단락을 표시하고 있습니다.</p>
</body>
</html>
워드 문서나 텍스트 에디터처럼 입력한 내용을 그대로 표시하는 <pre> 태그
위에서 설명한 것처럼 HTML 은 워드나 텍스트 에디터에서 편집한 것처럼 그대로 표현되지 않습니다. 그러나, 우리가 문서를 만들때 입력한 내용을 그대로 웹브라우져에 표현하고자 할때가 있습니다. 이 때 사용하는 태그가 <pre> 태그입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>8 강 연습 페이지.</title>
</head>
<body>
<pre>
<p>여기는 첫번째 단락을 표시하고 있습니다.</p>
<p>여기는 두번째 단락을 표시하고 있습니다.</p>
</pre>
</body>
</html>
마무리
이번 포스팅에서는 HTML 문서를 꾸미는데 가장 기본적으로 사용되는 태그를 알아보았습니다.
모든 내용을 외우려고 하지 마십시요. 이게 어떤 의미를 가지고 있는지만 알고 계시면 됩니다.
다음 포스팅에서는 기본적인 태그를 활용하여 HTML 문서를 만들었으니, 이 문서를 예쁘게 꾸미는 방식에 대해서 포스팅 하도록 하겠습니다.
댓글