HTML 줄바꿈(br 태그), 문단지정(p 태그), 영역지정(div 태그), 범위지정(span 태그) 차이점 비교
<p> </p>태그의 p는 paragraph의 두문자어로 '문단'이란 뜻이다.
<div> </div>의 div는 division의 약자이며, '영역을 나눈다'는 뜻이고,
<span> </span>의 span은 '무엇이 적용되는 범위'라는 뜻이다.
쓰임의 목적으로 보면,
br태그는 하나의 문단안에서 줄을 끊어서 줄바꿈을 하는 것이 목적이고,
p태그는 문단과 문단을 나누는 것이 목적이다.
div태그는 하나의 페이지 안에서 영역을 나누는 것이 목적이고,
span태그는 줄을 바꾸거나 영역을 나누지 않고 일정한 범위를 지정하여 속성을 주는 것이 목적이므로, 줄바꿈을 하지않은 채 글꼴, 색상, 여백 등을 조절할 때 주로 사용된다.
태그를 넣는 위치로 보면,
br태그는 줄을 끊어 바꾸고자 하는 위치에 넣게되며,
p태그는 하나의 문단을 p태그로 싸게 되므로 <p>하나의 문단</p> 모양이 되고,
div태그는 하나의 영역을 div태그로 싸게 되므로 <div>하나의 영역</div> 모양이 되고,
span태그는 일정한 범위를 sapn태그로 싸게 되므로 <span>일정한 범위</span> 모양이 된다.
줄바뀜 측면에서 보면,
br태그는 줄바뀜이 한 번 일어나고
p태그는 줄바뀜이 한 번 일어나되, 문단사이에 빈줄이 들어가므로, br태그가 두 번 들어간 것과 같은 모양이 된다. 즉, 줄바뀜이 두 번 일어나는 셈이다.
div태그는 줄바뀜이 한 번 일어나므로, div영역과 바깥과의 사이에 여백이 없다.
span태그는 줄바뀜이 일어나지 않는다.
태그에 주는 속성으로 보면,
br태그는 쓰임상 속성이 아주 단순하지만,
p태그, div태그, span태그는 태그로 싸인 부분에 다양한 속성과 스타일을 줄 수 있다.
br태그 예)
이 문장은 br태그의 앞쪽에 있는 문장이다.<br />이 문장은 br태그 뒤쪽에 있는 문장이다.
이 문장은 br태그의 앞쪽에 있는 문장이다.
이 문장은 br태그 뒤쪽에 있는 문장이다.
이 문장은 br태그 뒤쪽에 있는 문장이다.
p태그 예)
<p>이 문단은 p태그로 감싼 첫 번째 문단이다.</p><p>이 문단은 p태그로 감싼 두 번째 문단이다.</p>
이 문단은 p태그로 감싼 첫 번째 문단이다.
이 문단은 p태그로 감싼 두 번째 문단이다.
이 문단은 p태그로 감싼 두 번째 문단이다.
br태그를 연속으로 주면 p태그와 같은 결과가 된다.
"이 문장은 br태그 앞쪽의 문장이다.<br /><br />이 문장은 br태그 뒤쪽의 문장이다."
이 문장은 br태그 앞쪽의 문장이다.
이 문장은 br태그 뒤쪽의 문장이다.
이 문장은 br태그 뒤쪽의 문장이다.
div태그 예)
이 부분은 div태그 앞에 있는 문장이다.<div>이 문장은 div태그 속에 들어간 문장이다.</div>
이 부분은 div태그 앞에 있는 문장이다.
이 문장은 div태그 속에 들어간 문장이다.
span태그 예)
이 부분은 span태그 앞에 있는 글이고, <span>이 부분은 span태그 안에 있는 글이다</span>
이 부분은 span태그 앞에 있는 글이고, 이 부분은 span태그 안에 있는 글이다
※ span태그에 아무런 속성을 주지 않았기 때문에, 외관상으로는 span태그가 없는 것과 차이가 없다.>> HTML 태그 사용법 목록: DIV P SPAN IMG A HR FONT BR ...