[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 언어를 한눈에 볼 수 있는 이미지를 남기고!
다음에 더 궁금하고 유용한 웹언어를 소개해보도록 하겠습니다.
