html (1) h, p, br 태그

·2025년 4월 17일

html

목록 보기
1/9
post-thumbnail

block : 한 영역을 차지하는 박스 형태를 가지는 성질로 작성한 순서대로 위에서 아래로 한칸한칸 쌓이면서 표현되는 것/ 블록 속성을 가진 요소는 기본적으로 너비가 100%(=전체너비)로 지정

1. h1~h6 태그

코드

<h1>h1. 웹사이트의 가장 큰 제목(로고)</h1>
<h2>h2. 웹사이트의 가장 큰 카테고리 </h2>
<h3>h3. 주로 타이틀에 사용되어 굵게 표현 </h3>
<h4>h4. block 형태라 다음 태그를 사용하면 단락이
   내려감
</h4>
<h5>h5. 숫자가 뒤로 갈수록 사이즈가 줄어듬</h5>
<h6>h6. h5의 하위 카테고리 </h6>

결과

h1. 웹사이트의 가장 큰 제목(로고)

h2. 웹사이트의 가장 큰 카테고리

h3. 주로 타이틀에 사용되어 굵게 표현

h4. block 형태라 다음 태그를 사용하면 단락이 내려감

h5. 숫자가 뒤로 갈수록 사이즈가 줄어듬
h6. h5의 하위 카테고리

2. p 태그

p 태그는 단락 태그
문단을 정의할 때 설명 구간에서 글자를 담아 사용

코드

<p>
우리는 지금 html에 대해
공부하고 있습니다.
</p>

```

결과

우리는 지금 html에 대해 공부하고 있습니다.

3. br 태그

여러 줄의 텍스트르 포함할 수 있고
줄바꿈 태그 또는 내부에 있는 텍스트를 꾸며주는 다양한 인라인 요소를 포함할 수 있다.
단독 태그로 단락을 구분할 때 사용 / 편집기 상에서 임의로 문단을 내린다해도 웹상으로는 표현되지 않는다.

코드


  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit.Aperiam eveniet exercitationem corporis, odit rerum temporibus dicta doloribus laborum molestias quisquam!Nemo vitae totam reiciendis, tempora placeat odio voluptas quisquam harum!
   </p>

결과

Lorem ipsum dolor sit amet consectetur adipisicing elit.Aperiam eveniet exercitationem corporis, odit rerum temporibus dicta doloribus laborum molestias quisquam!Nemo vitae totam reiciendis, tempora placeat odio voluptas quisquam harum!

이 단락을 줄바꿈하고 싶으면 br 태그를 사용하면 된다.

코드

  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. <br>Aperiam eveniet exercitationem corporis, odit rerum temporibus dicta doloribus laborum molestias quisquam! <br>Nemo vitae totam reiciendis, tempora placeat odio voluptas quisquam harum!
   </p>

결과

Lorem ipsum dolor sit amet consectetur adipisicing elit.
Aperiam eveniet exercitationem corporis, odit rerum temporibus dicta doloribus laborum molestias quisquam!
Nemo vitae totam reiciendis, tempora placeat odio voluptas quisquam harum!

### 4.hr태그

수평줄을 나타내는 태그
단락의 구분/주제가 바뀔 때 입체적으로 보여진다.

코드

<h1>첫번째 제목</h1>
<hr>
<h2>두번째 제목</h2>

결과

첫번째 제목


두번째 제목

0개의 댓글