HTML[tag] p, br, pre, mark

<tag>에 관하여

-요약설명

• p 요소: 문단을 만들어주는 태그입니다.
• br 요소: 개행을 해주는 태그입니다.
• mark 요소: 텍스트에 형광칠을 해주는 태그입니다.
• pre 요소: 자유롭개 개행, 탭, 띄어쓰기를 사용할 수 있게 해주는 태그입니다.

-심화설명

 · p요소 / 표기법 <p>안녕하세요!</p>

<p>태그는 "paragraph"의 약자로 주로 문단을 나눌때 사용합니다. HTML은 개행과 공백을 하나의 공백으로만 인식합니다. 아래 예제에서보면 알 수 있듯이 HTML 에디터상에서 개행을 했다고 해서 띄어쓰기가 되지 않습니다.

예제

결과

위의 예제를 보면 결과에서 볼 수 있듯이 옆으로 쭉나열된것을 볼 수 있습니다. 이는 TEXT자체가 인라인 엘리먼트로 분리되어 있음을 뜻합니다. 그리하여 개행을할땐 주로 아래의 예제와 같이 <p>태그를 이용하여 나눌 수 있습니다. <p>태그는 주로 장문의 글을 문단으로 나눌때 사용됩니다. 예제에서는 짧은 글을 사용하였지만 보통 긴글을 사용할때 <p>태그를 사용합니다.

예제

결과

위의 예제처럼 <p>태그를 사용 하였을 시 결과와 같이 개행이 되는 부분을 확인 할 수 있습니다.

 · br 요소 / 표기법 <br> (단일 태그)

br태그는 p태그로 나누지않고 부분 부분 짧게 나눌때 주로 사용하게됩니다. 단일 태그로 사용되며 예제와 같이 사용 하였을 시 개행이 되는 방법을 확인 할 수 있습니다. 

예제

결과

위의 예제에서 보면 개행이 잘 된것을 확인 할 수 있습니다. 하지만 저렇게 br을 많이 사용하는것은 옳지 못합니다. 또한 단독으로 잘 사용하지 않습니다. 보통 아래와 같은 코드로 태그 안에 태그로 사용됩니다. 결과는 역시 같습니다.

예제

결과

 · pre 요소 / 표기법<pre>text</pre>

pre요소의 경우 "preformatted Text"의 약자로 줄바꿈을 마음껏 사용하여 사용할 수 있는 태그입니다. 탭, 개행, 띄어쓰기 모두가 사용 가능합니다. 하지만 웹접근성에 있어서, 스크린 리더가 읽지못하고 지나가기 때문에 따로 설명을 추가로 열거 해줘야하는 단점이 있습니다. 아래 예제를 살펴 보겠습니다.

예제

결과

결과에서 보면 <br>태그를 사용하지 않고도 개행이 된 부분을 확인 할 수 있습니다. 주로 프로그램 소스를 표현하는데 많이 사용합니다. 

 · mark 요소 / 표기법 <mark>안녕하세요!</mark>

mark요소는 말그대로 mark하는 것입니다. ㅎ .. 원하는 부분을 형광색으로 칠해줍니다. 아래 예제에서보면 "눈이"부분에 <mark>태그를 이용하여 형광색으로 칠해 준 부분을 확인할 수 있습니다.

예제

결과