0013 단락(paragraph)을 정의하는 p요소
HTML의 <p> 요소는 단락을 정의하는 요소이다.
글을 쓸 때는 제목(heading)을 표시하고 이어서 아이디어와 완결된 생각 등을 문단, 단락 등으로 구분지어가며 쓴다. 웹 페이지에서는 이러한 단락을 구조적으로 나타내기 위하여 단락을 의미하는 paragraph의 첫 글자를 의미하는 <p> 요소를 이용한다.
<p>내용(content)</p>
즉, 시작태그 <p>와 종료태그 </p> 사이에 단락으로 작성된 텍스트를 내용(context)으로 집어넣는다. 종료태그를 잊지말자.
앞서 배운 <h> 요소와 <p> 요소를 이용하여 웹 페이지에 다음과 같은 글을 써보자.
Ankilog란?
Ankilog는 Anki를 이용하여 HTML을 효과적으로 배우고 익힐 수 있도록 만든 Anki와 Blog의 합성어입니다. 스스로 공부한 것을 정리하여 작은 단위로 쪼개고 꼭 외워두워야할 사항은 Anki로 정리하여 짬짬이 효과적으로 공부를 할 수 있는 좋은 도구입니다.
Anki를 충실히 하다보면 하루 2~30분의 시간의 투자로 전문지식을 추구하고 발전할 수 있습니다. 매일매일 적은 량을 스스로의 사정에 맞추어 충실히 나가다보면 지식이 갖추어지고 식견이 생기며 지혜가 발휘되는 변화를 느끼게 될 것입니다.
첫 줄은 제목(heading) 요소라면 그 다음부터 나타나는 단락들은 <p> 요소로 묶어주면 되므로 아래와 같이 작성하여 
p요소test.html로 저장한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>HTML Ankilog</title>
</head>
<body>
<h1>Ankilog란?</h1>
<p>Ankilog는 Anki를 이용하여 HTML을 효과적으로 배우고 익힐 수 있도록 만든 Anki와 Blog의 합성어입니다. 스스로 공부한 것을 정리하여 작은 단위로 쪼개고 꼭 외어야할 사항은 Anki로 정리하여 짜투리 시간을 활용하여 효과적으로 공부를 할 수 있는 좋은 도구입니다.</p>
<p>Anki를 충실히 하다보면 하루 2~30분의 시간의 투자로 전문지식을 추구하고 발전할 수 있습니다. 매일매일 적은 량을 스스로의 사정에 맞추어 충실히 나가다보면 지식이 갖추어지고 식견이 생기며 지혜가 발휘되는 변화를 느끼게 될 것입니다.</p>
</body>
</html>
이제 파일을 실행해보면 웹 브라우저에 아래와 같이 나타난다.
추가적으로 <p> 요소는 한 칸 이상의 공백(스페이스, 탭)과 줄바꾸기를 모두 한 칸의 공백으로만 나타내므로 공백과 줄바꾸기에 주의해야 한다. 가령, 다음과 같다.
HTML을 다음과 같이 작성하면
<p>HTML
Ankilog</p>
웹 브라우저에는 다음과 같이 나타난다.
HTML Ankilog
※ 줄바꾸기가 한 칸의 공백으로 나타남
HTML을 다음과 같이 작성하면
<p>괄호 안에 10칸의 공백( )</p>
웹 브라우저에는 다음과 같이 나타난다.
괄호 안에 10칸의 공백( )
※ 10칸의 공백이 한 칸의 공백으로 나타남
HTML을 다음과 같이 작성하면
<p>괄호 안에 2개의 탭( )</p>
웹 브라우저에는 다음과 같이 나타난다.
괄호 안에 2개의 탭( )
※ 2개의 탭이 한 칸의 공백으로 나타남
Anki 파일
아래는 본 포스팅의 내용을 갈무리하기 위한 Anki 파일입니다. 참고하시기 바랍니다.
Ankilog 파일: 
0013 단락(paragraph)을 정의하는 p요소.apkg
'Anki로 공부하기 > HTML공부' 카테고리의 다른 글
| 0015 URL 간략하게 이해하고 연습하기 (0) | 2018.11.15 |
|---|---|
| 0014 빈요소(empty element) br과 hr (0) | 2018.11.14 |
| 0012 제목(heading)의 h요소 (0) | 2018.11.12 |
| 0011 head 요소와 그 내부에 중첩된 title 요소 (0) | 2018.11.10 |
| 0010 속성(attribute)과 속성 작성방법 (0) | 2018.11.10 |