jiraynor’s 하루 2시간 프로그래밍 - HTML 05. 단락 (Paragrap) 영상 보러가기
HTML 단락
HTML 단락
HTML <p>
요소는 문단을 정의합니다.
단락은 항상 새 줄에서 시작되며, 브라우저는 단락의 앞뒤에 공백(여백)을 자동으로 추가합니다.
예제 1
<p>첫번째 단락입니다.</p>
<p>두번째 단락입니다.</p>
HTML 표시
HTML이 어떻게 표시되는지 알 수 없습니다.
화면이 크거나 작거나 크기가 조정된 창은 다른 결과를 생성합니다.
HTML에서는 HTML 코드에 공백이나 행을 추가하여 표시를 변경할 수 없습니다.
브라우저는 페이지가 표시될 때 추가 공간과 행을 자동으로 제거합니다.
예제 2
<p>
이 단락은 소스코드에
많은 행이 포함되어 있습니다.
브라우저는
무시합니다.
</p>
<p>
이 단락은 소스코드에
많은 행이 포함되어 있습니다.
브라우저는
무시합니다.
</p>
HTML Horizontal Rules
<hr>
태그는 HTML 페이지의 주제 구분을 정의하며, 대부분의 경우 수평 규칙으로 표시됩니다.
<hr>
요소는 HTML 페이지에서 콘텐츠를 구분(또는 변경 정의)하기 위해 사용됩니다.
예제 3
<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>
<hr>
태그는 빈 태그입니다. 즉, 종료 태그가 없습니다.
HTML 줄 바꿈
HTML <br>
요소는 줄 바꿈을 정의합니다.
새 단락을 시작하지 않고 줄 바꿈(새 줄 바꿈)을 원하는 경우 <br>
을 사용합니다.
예제 4
<p>이것은<br>줄 바꿈을 포함한<br>단락입니다.</p>
<br>
태그는 빈 태그입니다. 즉, 종료 태그가 없습니다.
아래 시의 문제점
이 시는 한 줄에 표시됩니다.
<p>
나보기가 역겨워
가실 때에는
말없이 고이 보내 드리오리다
영변의 약산
진달래꽃
아름 따다 가실 길에 뿌리오리다
</p>
위 문제점의 솔루션 - HTML <pre> 요소
HTML <pre>
요소는 미리 포맷된 텍스트를 정의합니다.
<pre>
요소 내부의 텍스트는 고정 너비 글꼴(통상은 Courier)로 표시되며 공백과 줄 바꿈이 모두 유지됩니다.
<pre>
나보기가 역겨워
가실 때에는
말없이 고이 보내 드리오리다
영변의 약산
진달래꽃
아름 따다 가실 길에 뿌리오리다
</pre>