본문으로 바로가기

[Html] <p> <br> <div> <span> 태그의 차이점 및 문단간격없음(티스토리)


오늘은 <p> <br> <div> <span> 태그의 차이점을 알아보고

티스토리 블로그의 이즈윅 문서편집기의 문단 간격 없음에 대해서 알아보겠습니다.


블로그 html 수정 스킨 관리 및 포스팅을 하다 보면

기존의 이즈웍 문서편집기도 사용할 때도 많지만 html에디터도 필수적으로 사용을 하게 됩니다.


그러면 문서를 작성하고 html태그를 들어가보면 위 4개의 태그가 섞여서 있는 것을 알 수 있습니다.

또 특정 영역은 글꼴 및 크기가 변경되어 일관성이 없어진 부분도 있구요.

각 4개의 태그들이 영향을 미치게 되어서 발생하는 경우인데 각 태그의 차이점과 기능

알아보는 시간을 갖도록 하겠습니다.


<p> 태그 (paragraph)  : '문단'이라는 뜻으로 문단지정 태그 기능

<br> 태그 (Line Break) : 줄을 바꾸는 기능

<div> 태그 (division) : 영역을 나눈다는 의미, 한 페이지 내에서 영역을 지정

<span> 태그 : 폭 범위라는의미로 범위 지정 기능, 영역을 나누거나 줄 바꿈을 하지 않고 일정 범위 지정해 속성을 줌


<p>태그와 <br>태그의 기능과 차이점


우선 <p> 태그와 <br> 태그를 알아보겠습니다. 두 개를 동일 기능으로 많이 사용하게 되는데 대부분

두 태그를 글자의 줄을 바꾸는 기능으로 알고 있는데 결과물은 비슷하지만 원리는 다릅니다.


<p> 태그는 말그대로 문단이라는 뜻으로 각 한줄 한줄이 독립적인(Block-level Element) 태그입니다.

문단과 문단을 나누기 위함이 목적이고

<br> 태그는 하나의 문단안에서 줄을 끊어서 단순히 줄을 바꾸는 기능입니다.


예제로 살펴보죠.

<p> 태그를 사용 했을 때 입니다.

공백 라인이 하나 더 추가되어 문단이 구분 되어 있는 것을 알 수 있습니다.


여기에 <br> 태그를 추가 해보면

문단 안에서 줄바꿈이 되는 것을 알 수 있습니다.


만약 <br> 태그가 아닌 <p>태그로 줄바꿈을 나눈다면 아래 형태가 되겠죠?

아래와 같이 모든 문단이 구분되어져서 가독성이 떨어지게 됩니다.


이렇게 때문에 예전에는 <br>태그를 사용이 쉽게 사용 가능하고 

문단 단락의 구분 및 줄바꿈의 표현이 용이하므로

<p>태그 보다 <br>태그를 선호하는 분들도 많았고

예전에는 티스토리 블로그도 <p> 태그 와 <br> 태그를 따로 사용하겠금 제공했습니다.

왜냐하면 <p> 태그로 나누기를 사용할시에는 Shift+Enter 방식으로 줄바꿈을 해주거나

일일히 마진을 수정해주지 않으면 위 예시처럼 모든 단락이 구분처리가 되어버려 가독성이 떨어지기 때문이죠.


하지만 <br> 태그도 단점이 존재합니다. <p>태그처럼 속성(attribute)값을 줄 수도 없고 스타일을 꾸미기 위해선

주로 <span>태그 또는 <div>태그를 사용하게 되는데 블로그 스킨에 영향을 받게 되어 폰트 스타일이

제대로 나타나지 않을 수 있게 됩니다.


그리고 최근 HTML5에서는 웹표준으로 <p>태그를 권장하며 <br>태그의 남용을 자제 하는 것을 권장합니다.

그렇기 때문에 지금은 티스토리도 <p>태그를 문서편집기로 사용하게 되었고


불편한 기능을 보완할 [문단 간격 없음 사용 기능]을 새롭게 추가해서

사용자들에게 제공하고 있습니다.




인터넷 웹 언어에서 줄 바꾸기 하나도

간단해 보이지만 이렇게 숨은 의미와 기능이 있었습니다.


그리고 추가 궁금증! 하나더! 티스토리 블로그는 자체적으로 빈 줄에는

<p style="text-align: center; line-height: 1.8;"><br /></p>

삽입하게 됩니다.

<br>태그는 마침 태그가 없기 때문에 <br /> 표기 하는게 원칙이며,

최근 웹 언어 및 브라우저에서는 <br>로 사용해도 무관합니다.

<br />는 xhtml언의 호환을 위해서 자동 입력되는 것으로 보입니다.


마지막으로 많이 사용하는 간단한 html 언어를 한눈에 볼 수 있는 이미지를 남기고!

다음에 더 궁금하고 유용한 웹언어를 소개해보도록 하겠습니다.



저작자 표시 비영리 변경 금지
신고

댓글을 달아 주세요

  1. 2016.02.09 04:26

    비밀댓글입니다

  2. BlogIcon ForReal 2016.04.20 19:19 신고

    섬세하게 설명해주셔서 저처럼 기본없는 사람은 도움받고 갑니다^0^

  3. 2016.12.11 22:46

    비밀댓글입니다

  4. BlogIcon 뚜기★ 2017.07.12 21:49 신고

    감사합니다 ㅠ_ㅠ 광고좀 추가로 달려고 했더니 코드가 조금씩 달라서 사이즈 조정을 못하고 있었는데 이거보니 이해가 가네요!! 덕분에 광고 배치 잘 했습니당 +_+

  5. 행인 2017.10.04 11:09 신고

    처음으로 코딩을 시작하는 사람인데 정말 너무 많은 도움 받고 갑니다.

티스토리 툴바