제목과 문단 만드는 방법 - h1, h2, h3, h4, h5, h6, p
제목 (Heading)
제목은
><h1>, <h2>, <h3>,
<h4>, <h5>, <h6> >
태그로 만듭니다. 게시글과 밀접한 관련이 있으므로 순서에 맞게 사용하는 게
좋습니다. 제목과 하위 제목을 구분할 수 있어야 합니다.
올바른 순서로 제목을 작성하는 방법은 다음과 같습니다.
<h1>주제목</h1>
<h2> 제목 </h2>
<h3>부제목</h3>
<h4>소제목</h4>
<h5> ... </h5>
<h6> ... </h6>
<h1> 태그는 게시글의 제목에 사용되었으므로 이 태그를
사용하지 마십시오. 한 페이지 에 두 개 이상의 <h1> 태그를
추가하지 않는 것이 좋습니다.
문단 (paragraph)
문단은 <p> 태그로 만듭니다. 문단과
문단 사이는 간격이 큽니다. 문단 내에서 줄바꿈을 하고 싶다면
><br> >
태그를 이용합니다.
예제 1
제목과 문단이 있는 간단한 예제입니다. 제목의 기본 모양은 굵은 글자이고, 레벨에
따라 글자 크기가 다릅니다.
><h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet. Proin gravida velit dictum dui consequat malesuada.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet. Proin gravida velit dictum dui consequat malesuada.</p>
data-default-tab="html,result"
data-preview="true"
data-editable="true"
data-height="640"
data-pen-title="HTML 제목과 문단 heading paragraph h1, h2, h3, h4, h5, h6, p 예제1"
data-slug-hash="qBZQxQb"
data-theme-id="light"
data-user="LiveBlogger"
style="align-items: center; border: 2px solid; box-sizing: border-box; display: flex; height: 640px; justify-content: center; margin: 1em 0px; padding: 1em;"
>
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
예제 2
제목 레벨을 조정하여 구조를 바꿔보았습니다.
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h3>Heading 3</h3>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h2>Heading 2</h2>data-default-tab="html,result"
data-preview="true"
data-editable="true"
data-height="490"
data-pen-title="HTML 제목과 문단 heading paragraph h1, h2, h3, h4, h5, h6, p 예제2"
data-slug-hash="bGpQLZK"
data-theme-id="light"
data-user="LiveBlogger"
style="align-items: center; border: 2px solid; box-sizing: border-box; display: flex; height: 490px; justify-content: center; margin: 1em 0px; padding: 1em;"
>
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
예제 3
문단 내에서 <br> 태그로
줄바꿈을
하는 예제입니다. 두 번째 문단에 문단 내 줄바꿈이 있습니다.
><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet. Proin gravida velit dictum dui consequat malesuada</p>
<p>Lorem ipsum dolor sit amet,<br>consectetur adipiscing elit. Aenean nec mollis nulla.<br>Phasellus lacinia tempus mauris eu laoreet. Proin gravida velit dictum dui consequat malesuada</p>
data-default-tab="html,result"
data-preview="true"
data-editable="true"
data-height="441"
data-pen-title="HTML 줄바꿈 tag br 예제1"
data-slug-hash="dyMQdBN"
data-theme-id="light"
data-user="LiveBlogger"
style="align-items: center; border: 2px solid; box-sizing: border-box; display: flex; height: 441px; justify-content: center; margin: 1em 0px; padding: 1em;"
>
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
기타 HTML 참조
>제목 >
>문단 >
>줄바꿈 >
>공백 >
>목록 >
>이미지 >
>동영상 >
>오디오 >
>링크 >
>표 >
>양식 >
>인용구 >
>기초 >