반응형
html 기본 문서 만들기 4 - p 태그로 문단 나누기
네 안녕하세요, 이번 포스팅에서는 문단을 나누는 방법을 알아보도록 하겠습니다.
우리가 글을 쓸 때 어떤 부분이 끝나면 새로운 주제를 쓰기 위해서 새로운 문단을 만들죠?
그걸 이번에 웹에서 표현을 해보려고 합니다.
그럼 바로 시작하도록 하겠습니다.
1. 문단 나누기 : p 태그 이용
html 문서를 보게 되면 우리가 책을 보는 것처럼 여러 단락으로 나누어져 있는 걸 볼 수가 있습니다.
바로 이 단락을 나누는 태그가 p 태그입니다.
그리고 여기에 css 스타일을 적용을 하면 들여 쓰기와 내어 쓰기 등도 제어가 가능합니다.
하지만 지금은 기본적인 부분들을 배우고 있기 때문에 css에 대한 설명을 드릴 때 제가 이야기를 하도록 하겠습니다
그럼 예제 코드를 한 번 작성을 해보도록 하겠습니다.
<!DOCTYPE html>
<html lang="ko">
<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>단락 나누기</title>
</head>
<body>
<h3>2 개의 단락 나누기</h3>
<p>
HTML 문서도 본문을 여러 단락으로
나눌 수 있다. CSS 스타일을 사용하면
단락 단위로 내어 쓰기와 들여 쓰기가 가능하다.
</p>
<p>
여러 개의 빈 칸은 하나로 취급되며,
엔터 키 역시 하나의 빈 칸으로 처리된다.
</p>
</body>
</html>이렇게 한 번 작성을 해봤습니다.
여기에서 <p></p> 안에 있는 글들이 한 단락 안에 들어가는 문구가 됩니다.
그리고 문단 단위로 나눠지기 때문에 한 줄을 자동으로 비우고 새로운 문구가 시작이 됩니다.
그럼 결과 화면을 보도록 하겠습니다.
반응형
이런 식으로 단락이 나눠지는 구간은 자동으로 한 줄을 비우고 다시 새롭게 쓰인 걸 확인할 수 있습니다.
그리고 이렇게 문단을 나누는 것은 문장의 시작과 끝을 표시하는 것이기 때문에 매우 중요한 요소라서
잘 알아두실 필요가 있습니다.
여기까지 문단을 나누는 방법에 대하여 알아보았습니다.
다음 포스팅에서는 수평선을 긋는 법을 알아보도록 하겠습니다.
긴 글 읽어주신 독자분들께 진심으로 감사합니다~
반응형
'html, css, 자바스크립트 > html' 카테고리의 다른 글
| html 기본 문서 만들기 6 - br 태그 이용하여 새로운 줄로 넘어가기(개행하기) (0) | 2023.03.01 |
|---|---|
| html 기본 문서 만들기 5 - hr 태그로 수평선 긋기 (0) | 2023.03.01 |
| html 기본 문서 만들기 3 - title 속성으로 툴팁 달기 (0) | 2023.02.28 |
| html 기본 문서 만들기 2 - h 태그로 문단의 제목(장, 절, 소제목, etc...) 달기 (0) | 2023.02.28 |
| html 기본 문서 만들기 1 - title 태그로 페이지 타이틀 만들기 (0) | 2023.02.28 |
댓글