47367 Members __ Online

정렬
HOME스터디[s]웹표준

DIV 레이아웃 [2-2] : div, p, span 태그들의 차이점을 아시나요?

posted by 라부
date : , update :
hit : 52395, scrab : 1 , recommended : 18 , attach : 4

맘 먹고 짬내서 글쓴다는게 쉽지 않네여.

어영부영 놀다 보면 일주일이 그냥 가버려서... ㅡㅡ;;

오늘은 div 에 이어서 p 태그에 대해 알아보도록 하겠습니다.

 

=================================================================================================

 

 

<p> 태그에 대해 알아 봅시다.

 

 

p 태그는 div 태그와 별반 다르지 않습니다.

다음의 코드를 한번 보도록 하죠.

 

<p style="border:1px solid red;">p 태그로 맹글었어요.</p>

 

역시 이번에도 p 태그 영역에 빨간색으로 테두리선을 그렸습니다.

그리고 브라우저로 보면 일케 보입니다.

 

2201

 

어때요? 역시 div 와 별 차이가 없죠?

p 태그는 div 와 마찬가지로 왼쪽 끝에서 오른쪽 끝까지... 가로로 된 하나의 영역(Block) 전체를 차지하는 태그입니다.

다만 태그의 사용 목적이 div 태그의 사용 목적과는 전혀 다르다는 차이가 있을 뿐이지요.

 

p 태그는 paragraph의 머릿글자 p를 본떠서 만든 태그입니다.

Paragraph란 '절', '단락(段落)' 이라는 뜻입니다.

즉, p 태그는 HTML 문서 안에서 문장의 단락을 표시하는데 사용하라고 만들어진 태그라는 것을 알 수 있습니다.

 

div 태그는 HTML 문서를 분할하는 태그라고 이미 말씀 드렸었죠.

모양은 같은데 사용 목적이 다르다는게 그렇게 큰 차이인가... 라고 생각하시는 분들도 있겠죠.

맞습니다. 디자이너의 관점에서.... 두 태그는 시각적으로 그다지 큰 차이가 없습니다.

하지만 웹페이지를 하나의 HTML 문서라는 관점에서 본다면

사용 목적의 차이는 문서의 의미론적/구조론적으로 아주 큰 차이를 가지게 됩니다.

 

다음의 코드를 한번 봐주세요.

 

<h1>HTML을 공부합시다.</h1>

<div style="border:1px solid red;">div 태그로 맹글었어요. HTML을 열심히 공부합시다. 블라 블라 블라 블라</div>

<p style="border:1px solid red;">p 태그로 맹글었어요. HTML을 열심히 공부합시다. 블라 블라 블라 블라</p>

 

header 태그인 h1 태그를 사용해서 HTML 페이지의 주제에 대한 제목을 표시하고 div 태그와 p 태그를 사용하여 해당 주제에 대한 내용 글을 입력하였다고 가정해 봅시다.

그리고 이것을 웹브라우저로 확인해 보도록 하겠습니다.

 

2202

 

역시 div 태그나 p 태그나 눈으로 보았을 때는 별반 다른게 없죠?

근데.... 구글과 같은 검색엔진이 이 페이지를 검색할 때는 어떨까요?

'HTML을 공부합시다.' 라는 문서의 주제에 대한 관련 글은, 태그의 사용 목적대로라면 div 보다 p 태그안에 들어 있어야 하며  

검색엔진 또한 HTML 페이지를 분할하는 목적의 div 태그안에 들어 있는 내용 보다 p 태그안에 있는 관련 내용들을 먼저 검색하게 되는 것입니다.

 

Well-Formed Document(적격문서) 란 하나의 문서를 작성하는데 있어 미리 지정된 양식이나 형식에 맞추어

잘 작성된 문서를 말합니다. (이력서 양식, 보고서 양식... 뭐 이런것 있잖슴까..)

 

HTML도 워드 문서 같이 하나의 문서(Document)입니다.

HTML 문서(웹페이지)는 W3에서 제정한 문서 양식이 있으며

이 문서 형식(or 양식)대로 만들어진 웹페이지를 Well-Formed HTML Document 라고 부릅니다.

(Document Type(Doc Type): W3는 다양한 HTML 문서 형식을 지원하고 있으며

본인이 만들고자 하는 HTML 문서가 어떤 형태냐에 따라

어떤 양식을 적용할지를 사용자가 선택할 수 있게 하고 있습니다.

문서 형식에 대해서는 추후에 좀 더 자세히 살펴보도록 하겠습니다.

HTML이 문서라는 개념. 아주 중요합니다.

왜냐면 모든 문서에는 양식이 있고 그 지정된 양식에 따라 문서를 작성해야 하기 때문입니다.)

 

IE나 FF나 사파리, 오페라 등등 HTML 문서를 보여주는 웹브라우저들을 만드는 회사들은

W3의 문서 양식을 참조하여 웹브라우저를 만듭니다. 따라서 이 양식에 잘 맞춰서 웹페이지를 만든다면

IE에서만 잘 보이고 FF에서는 깨져 보이는 호환성 빵점인 웹페이지와는 뭔가 다른 고급스런 결과물이 나오게 될 것입니다.

 

이야기가 쫌 옆으로 샜지만...

암튼 div 태그는 div 태그의 목적에 맞게... p 태그는 p 태그의 목적에 맞게 사용해야지만

Well-Formed HTML Document가 될 수 있으며

이럴 경우 검색엔진이나 스크린 리더, 웹브라우저 등 각종 관련 기기들과의 소통에도

큰 도움이 된다는 것을 기억해 두시기 바랍니다.

 

마지막으로 p 태그는 div와 시각적으로도 약간의 차이가 있습니다.

다음을 한번 보시죠.

div 태그를 연속적으로 2번 작성한 것입니다.

 

<div style="border:1px solid red;">div 태그로 맹글었어요.</div>
<div style="border:1px solid red;">div 태그로 맹글었어요.</div>

 

2203
 

 

그리고 이것은 p 태그로 바꾼 모습입니다.

 

<p style="border:1px solid red;">p 태그로 맹글었어요.</p>
<p style="border:1px solid red;">p 태그로 맹글었어요.</p>

 

2204

 

어때요? 먼가 좀 다르죠?

p 태그에는 상/하 마진(Margin)이 있어서 태그와 태그 사이가 위 아래로 약간 떨어져 있는 것을 볼 수 있습니다. 

div 태그는 기본적으로 상/하 마진이 없습니다만 p 태그는 기본 마진이 있습니다.

이 기본 마진 때문에 많은 분들이 <br /><br /> 대신 <p> 태그를 이용해 왔던 것이지요.

 

자 이제 그럼 정리해 보도록 하겠습니다.

 

 1. <div> 태그나 <p> 태그는 왼쪽에서 오른쪽으로 하나의 가로 영역(Block) 전체를 차지하는 태그들입니다.

이러한 태그들을 고급스럽게 Block-level Element (블락레벨 엘레멘트) 라고 부릅니다. (아주 중요!! 꼭 기억!!!!)

 

2. <div> 태그는 HTML 문서(우리가 웹페이지라고 부르는...)를 위에서부터 아래로 분할하는 역할을 합니다.

 

3. <p> 태그는 HTML 문서 안에서 문장의 단락을 나타내는 태그입니다. 긴 글의 단락... 하나 하나.... 이해하시겠죠?

 

4. 각 태그들을 2번 3번 처럼 그 목적에 맞춰서 사용하여 HTML 문서를 작성하면 의미적/구조적으로 Well-Formed HTML Document가 되며 이럴 경우 다른 장치들과의 호환성을 극대화 시킬 수 있습니다.

 

5. <p> 태그는 태그 자체에 기본적으로 상/하 마진(Margin)을 가지고 있습니다. 이와 같이 기본적으로 마진을 가지고 있는 태그들이 <p> 태그 말고도 더 있습니다. (아주 중요!! 꼭 기억!!!!)

 

잊지 마세요.

태그는 각각의 HTML 태그들이 가지고 있는 원래 목적대로 사용되어져야 한다는거....

그렇기 때문에 Table Tr Td 로 만든 레이아웃은

문서의 구조적/의미적으로 절대로 바람직한 HTML 페이지가 될 수 없다라는 거.....

 

다음에는 <span> 태그에 대해서 알아보도록 하겠습니다.

 

 

===========================================================================================================

아... 진짜 수박 겉 *기식으로 쭉쭉 진도가 나가는거 가타서 죄송하네여~

그래도 핵심 개념은 놓치지 않으려고 노력하고 있으니 이해해 주세여~ ^^;;

궁금하신거 있음 댓글 달아 주시구요~

 

 

출처 - http://blog.naver.com/wdig    

 

######################################################

#####     작성자: 간츠 gantz2010@hotmail.com                     #####
#####     블로그: http://blog.naver.com/wdig                      #####
#####     기   타: 퍼 가실때는 출처를, 질문은 이메일로...       #####

#####################################################









div, 레이아웃, 웹표준, 강좌
댓글 6 | 엮인글 0

DIV 레이아웃 [2-3] : div, p, span 태그들의 차이점을 아시나요?
DIV 레이아웃 [2-1] : div, p, span 태그들의 차이점을 아시나요?





%3Cul+class%3D%22Klocation%22%3E%3Cli+class%3D%22first%22%3E%3Ca+href%3D%22..%2Fhompy%2F%22%3EHOME%3C%2Fa%3E%3C%2Fli%3E%3Cli%3E%3Ca+href%3D%22..%2Fhompy%2Fstudy.php%22%3E%EC%8A%A4%ED%84%B0%EB%94%94%5Bs%5D%3C%2Fa%3E%3C%2Fli%3E%3Cli%3E%3Ca+href%3D%22..%2Fhompy%2Fstudy.php%3Fmid%3D69%22%3E%EC%9B%B9%ED%91%9C%EC%A4%80%3C%2Fa%3E%3C%2Fli%3E%3C%2Ful%3E