02-1 텍스트 관련 태그 중 블록(block) 레벨 태그 <p, br, hr, blockquote, pre>

텍스트를 블록(block)으로 묶어 처리하는 태그를 알아볼게요

이 태그는 선택된 택스트에만 적용되는 것이 아니고 텍스트가 포함된 전체에 적용된답니다.

반대되는 개념으로는 인라인 태그가 있어요 이건 다음 글에서 살펴보도록 하죱

 

소제목 클릭하면 해당 부분으로 넘어갑니다

01. <hn>태그 <h1><h2><h3.... - 제목표시
02. <p>태그 - 단락 만들기
03. <br>태그 - 줄 바꾸기
04. <hr>태그 - 분위기 전환을 위해 줄 넣기
05. <blockquote>태그 - 인용문 넣기
06. <pre>태그 - 화면에 그대로 표시하기

 

01. <h1>제목 표시하기</h1> 

<hn>태그는 일반 텍스트보다 더 진하고 크게 표시됩니다.

h뒤의 숫자에 따라 <h1>부터 <h6>까지 있으며

숫자가 작을수록 크게 표시됩니다

 

 

 

 

 

 

 

02. <p>단락 만들기</p> 

텍스트를 표시하는 태그중 가장 많이 사용되는 태그라고 할 수 있습니다.

<p>태그는 텍스트의 단락을 만들어요

</p>로 표시한 안쪽까지 줄바꿈 없이 텍스트를 한 줄로 표시하는데 브라우저 창 의 크기가

넘어가게 되면 줄이 자동으로 아래로 내려갑니다

 

 

 

03. <br> 줄바꿈 하기

위 p태그같은 한줄로 쭉 이어지는 텍스트에서 임의로 줄 바꿈을 하고 싶을 때 사용하는 태그입니다

줄을 바꿀 위치에 <br>태그를 입력해주면 됩니다. 닫는 태그는 필요 없습니다

 

 

 

04. <hr>수평 줄 넣기

hr은 수평 줄을 넣을 때 사용하는 태그입니다.

텍스트의 주제가 바뀔 때 주로 사용하게 됩니다.

기본적으로 가로 선이 나타나지만 추후에 CSS를 사용하여 가로 선을 안보이게 할 수 있습니다.

닫는 태그는 없습니다.

 

 

 

05. <blockquote> 인용문 넣을 때 쓰는 태그</blockquote>

다른 사이트의 글을 인용할 때 blockquote 태그를 활용합니다.

이 태그를 사용하면 다른 텍스트들과 다르게 안으로 들어써지게 됩니다.

인용한 사이트의 주소를 넣어야 할 경우 cite 속성을 이용하여 인용사이트의 주소를 표시할 수도 있습니다.

 

 

 

 

 

 

 

 

06. <pre>입력 하는 그대로 보여지는 태그</pre>

html 편집기에서는 아무리 많은 줄바꿈을 하더라도 브라우저에서는 따로 표시되지 않습니다

이럴 때 사용하는게 pre 태그입니다.

줄바꿈 뿐만아니라 브라우저상에 코드를 표시해야할때도

유용합니다.

하지만 웹접근성에 대한 문제가 있다고 얘기가 나오기도 하는데요

웹 문서를 소리로 읽어주는 기계나 점자로 표시하는 기계들은 pre태그가 적용된 부분을 만났을 때 그냥 건너 뛰어버리기 때문입니다. 따라서 이부분에 따로 내용을 알 수 있게 텍스트를 추가하여 표시해두는게 좋겠습니다.

 

---

오늘은 여기까지

텍스트 블록 요소를 알아보았습니다

다음 글에서는 텍스트 인라인요소를 알아봅시다

블록요소와 인라인 요소를 잘 구별할 수 있어야 나중에 웹페이지를 만들때

헷갈리지 않는답니다.

저는 처음 공부할 때 그 둘을 잘 구별하지 않고 마구자비로 외우기만 해서

웹사이트를 만들 때 참 많이 애먹었어요ㅠㅠ

여러분들은 그럴일이 없으시길 바랍니다 ㅎ