본문으로 바로 이동 페이지 설정으로 이동 메뉴로 이동
페이지 설정
  • 어떠한 의견도 좋습니다. 웨버스터디가 더 나은 모습이 되도록 의견을 보내주세요.

P, Pre, Br, Hr 태그 그리고 특수 문자

최초 작성일
최종 수정일
이번 시간에는...
HTML에서 기초적인 태그 요소들로, 문단을 표현하는 요소들, p, pre, br, hr 요소에 대해 알아 봅니다. 또한 HTML 페이지 내에서 특수문자(이스케이프문자)를 어떻게 표현하는지 알아 봅니다.

지난 강의에서 제목 요소를 살펴보았으니, 이번에는 본문에 들어가는 요소들을 살펴보도록 하겠습니다.

P 요소

p 요소는 문단을 나타내는 요소 입니다. 문단에 대해서는 특별히 설명 드릴게 없습니다. 문단이란 것이 문장들이 모여서 만든 것이고, 문맥에 따라 문단을 나누시면 됩니다. 그리고 문단이기 때문에 당연히 이 요소는 줄 바꿈이 일어나는 블록 요소입니다.

하지만 종종 이 줄 바꿈 때문에 이 p 요소를 남용하기도 하는데요, 만약 의미적으로 p 보다 적절한 요소가 있다면 그 요소를 적으셔야 합니다. 웬만하면 p 요소는 다른 장식적인 요소보다는 주로 본문 내용으로 사용하기를 권장 드립니다.

또한, 이 p 요소는 블록 요소임에도 다른 블록요소들을 포함 할 수 없습니다. p 요소 안에는 인라인 요소만 포함 가능합니다.

Pre

pre 요소는 형식화된 텍스트를 나타내는 요소입니다. 이 요소 안의 텍스트는 띄어쓰기나 들여쓰기, 줄 바꿈 같은 것이 입력된 그대로 보여줍니다. 때문에 이 요소에는 독특한 포맷을 가진 '시'라던가, 들여쓰기의 형식을 가진 코드 소스 또는 특수문자로 그린 그림을 주로 넣습니다.

스크린리더나 점자 출력기에서는 pre 요소의 형식을 제대로 지킬 수가 없기 때문에, pre 요소의 내용을 넣기 전에 이 내용이 어떻게 표현될 지 고려해 보시기 바랍니다. 예를 들어 특수문자로 그린 그림 같은 경우는 설명 글 같은 대체 텍스트를 제공하는 것이 좋습니다.

참고로 pre 요소 역시 p 와 같은 블록요소이면서 안에는 인라인 요소만 포함 할 수 있습니다.

Br

지난 번에 한번 소개했었던 br 요소입니다. 이 요소는 알고 계시 듯, 줄 바꿈을 하는 요소입니다. 종종 단지 줄 바꿈을 위해서 이 요소를 많이 사용하는 경향이 있습니다만, 이 요소는 시처럼 줄 바꿈이 실제 내용의 일부분일 때에 사용하는 것이 맞습니다. 물론 부득이 하게 디자인 상 줄 바꿈을 강제 해야 할 때에 어쩔 수 없이 사용하는 일이 있지만, 이런 부분들은 css로 해결할 수 없는지 고민해봐야 합니다.

이 br은 인라인 요소입니다. 이 br을 이용해서 시를 pre가 아닌 p로 마크 업을 해도 괜찮습니다. 하지만 만약, 그 시의 포맷(띄어쓰기와 줄 바꿈 등)이 특이한 시라면 pre가 더 적절합니다.

Hr

hr 요소는 장면의 전환, 다른 화제로의 전환 등을 위해 사용하는 요소입니다. 하지만, 문서 개요에는 영향을 미치지 않습니다. (전 헤드라인 관련 강의에서 만들어 봤던 문서 개요를 말합니다.) 사실 hr 요소를 쓰면 화면에 수평선을 그리기 때문에, 시각적으로 주로 사용했습니다. html5 명세부터 주제를 분리하는 의미를 갖게 되었지만, 여러분은 그 이전 버전의 html을 마크 업 하더라도 이와 같은 의미로 사용하시기 바랍니다. 다시 한번 말씀 드리지만, 시각적인 부분은 css로 처리합니다.

hr 요소는 블록 요소로, 스스로 닫는 태그 형태입니다.

특수 문자들 (Escape Characters)

예전 마크 업의 기본 문법을 살펴 볼 때에, 왜 띄어쓰기와 줄 바꿈이 생략되는 지를 살펴 보았습니다. 그리고 줄 바꿈을 강제하기 위해서는 br 요소를 사용하라는 것도 살펴 보았고요. 하지만, 띄어쓰기를 어떻게 더 하는지에 대해서는 살펴보지 않았습니다. 이 띄어쓰기를 포함한 특수 문자들을 몇 가지 살펴보겠습니다.

일단 띄어쓰기에 대한 특수문자는 ' ' 입니다. 이러한 특수 문자는 다음과 같이 그냥 문자에 사용하면 됩니다.

이러한 특수 문자는 '이스케이프 문자'라고 하며, 말 그대로 특수 기호를 나타내는 문자들입니다. 왜 이런 특수 문자가 있을까요? 일단 띄어쓰기 같은 경우는 특수 문자 말고는 표현할 방법이 없긴 하고요, 만약 여러분이 다음의 글을 쓴다고 합시다.

x가 정수이고 'x < 5' 이면서 'x > 3' 이면 x는 4입니다.

저 아무 문제없어 보이는 문장에 약간의 위험요소가 있습니다.

x가 정수이고 'x < 5' 이면서 'x > 3' 이면 x는 4입니다.

바로 저 하이라이트 된 부분을 태그로 인식할 수 가 있습니다. 그렇기 때문에 저런 부분은 이스케이프 문자로 변환해 주는 것이 안전합니다.

기본적으로 이런 이스케이프 문자는 '&특수 문자 명;'의 형식으로 들어갑니다. 예를 들어 '<'는 '&lt;' (less than 의 줄임)이고, '>'는 '&gt;' (greater than)입니다. 그리고 만약 '&'를 사용하고 싶다면, '&amp;'를 적어주시면 됩니다.

또 다른 표현 방법으로 특수문자 이름 대신 유니코드 숫자를 넣는 방법도 있습니다. '&#숫자;'인 방식으로, 문자 명이 없는 특수문자들도 표현 가능합니다. 예를 들어 '&'의 숫자표현은 '&#38;'입니다.

몇 가지 주요한 이스케이프 문자코드는 아래의 표를 참고하세요. 아래의 표는 몇 가지만 담았고요, 이 외에도 이스케이프 문자코드는 아주 많습니다. 물론 모든 문자를 이스케이프 문자로 적으실 필요는 없지만, 표에 담긴 문자들은 반드시 이스케이프 문자로 적으시기 바랍니다.

주요 특수문자 코드표
표현문자 문자표현 숫자표현 문자 설명
스페이스(space) &nbsp; &#160; 공란(스페이스)
& &amp; &#38; 엠퍼샌드 (and)
< &lt; &#60; 보다 작은
= - &#61; 등호
> &gt; &#62; 보다 큰
© &copy; &#169; 저작권 표시 (Copyright)
요점 정리
  • p는 문단을 의미하는 요소. 블럭 요소이나, 자신을 포함한 블럭 요소를 포함할 수 없음. 오로지 인라인 요소만 위치 가능
  • pre는 형식화된 텍스트를 의미하는 요소
  • br은 줄 바꿈을 가진 형식화된 텍스트를 표현
  • hr은 화제의 전환
  • 특수 문자를 쓰지 않을 경우, 태그 소스 등으로 오인하여 문제가 발생할 수 있음

이 글이 유용하셨다면 친구들에게 공유 해주세요.