47256 Members __ Online

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

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

posted by 라부
date : , update :
hit : 33606, scrab : 1 , recommended : 17 , attach : 7

<div>, <p>, <span> 이 세가지 태그들의 차이점을 알고 계시나요?

의외로 많은 웹디자이너분들께서 이 세가지 태그들의 차이점을 전혀 모르고 있더군요.

그냥 <br>은 한줄 밑으로, <p>는 두줄 밑으로 띄워주는 정도로만 알고 있는 정도죠.

하지만 이 세가지 태그는 그 역활이나 용도면에서 아주 많은 차이를 가지고 있습니다.

이 차이점을 정확히 이해하신다면 Div로 레이아웃 작업하는 것은 정말 식은 죽 먹기입니다.

 

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

 

 

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

 

 

다음의 코드를 봐주세요.

 

<div>구지성 *오~!!! 완죤 조아~~!!!!</div>

 

그리고 이것은 웹브라우저로 보았을때 입니다.

 

2101

 

자. 뭐 별로 특이한 건 없죠?

그럼 다음과 같이 div에 border를 줘서 크기를 함 살펴 보도록 하죠.

 

<div style="border:1px solid red;">구지성 *오~!!! 완죤 조아~~!!!!</div> 

 

Style(CSS)에 대해 잘 모르시는 분들이라도 괜찮습니다. 외우실 필요 없구요.

그냥 div 태그 영역의 테두리를 빨간색으로 그려 준것과 비슷하다고 생각하시면 됩니다.

그리고 이건 위의 코드를 웹브라우저로 보았을 때입니다.

 

2102

 

어떠세요? 이제 div가 어떻게 생긴 녀석이라는게 눈에 들어오시나요?

div는 화면상에서 가로로 한줄 전체를 차지하는 녀석입니다.

웹브라우저 화면 왼쪽 끝에서 오른쪽 끝까지.... 한줄 전체를 차지하는 녀석입니다.

 

2103

 

위의 그림처럼 브라우저 창의 크기가 가로로 늘어나면 div 도 함께 늘어 납니다.

말씀드린데로 div라는 태그는 화면의 가로 한줄 전체를 차지하기 때문이죠.

 

그럼 이번에는 요렇게 함 해보죠.

 

<div style="border:1px solid red;">

구지성 *오~!!! 완죤 조아~~!!!!<br />

구지성 *오~!!! 완죤 조아~~!!!!<br />

구지성 *오~!!! 완죤 조아~~!!!!

</div> 

 

실제 프로젝트에서는 이런식으로 <br />을 쓰지 않습니다만 예제에서는 빠른 이해를 돕기위해 사용하였음을 참고해 주세요.

그리고 이것을 마찬가지로 웹브라우저를 띄워서 확인해 보겠습니다.

 

2104

 

음.... <br />을 쓰니까 3줄이 됐네요. 당연한 얘기겠지만....

근데 div의 빨간 테두리선을 보니 한줄이 아니라 3줄을 감싸고 있네여.

아까는 분명히 제가 뭐라고 말씀 드렸었나요... div는 가로 한줄이라고 했었죠?

근데 <br />을 사용하니까 가로 3줄이 돼버렸어여..... 이런...

이럴땐 얼릉 말을 바꾸는게 *오~임돠.

 

정정하겠습니다.

div 태그는 HTML 문서(웹브라우저의 화면)에서 왼쪽부터 오른쪽 끝까지 가로로 된 하나의 영역(Block) 전체를 차지합니다.

 

한줄이라는 말을 한 영역(Block)이라는 표현으로 바꿨습니다.

이제 다음을 보시고 정리를 해보도록 합시다.

 

[코드]

 

<div style="border:1px solid red;">

구지성 *오~!!! 완죤 조아~~!!!!

</div>

<div style="border:1px solid red;">

구지성 *오~!!! 완죤 조아~~!!!!<br />

구지성 *오~!!! 완죤 조아~~!!!!<br />

구지성 *오~!!! 완죤 조아~~!!!!

</div> 

 

[웹브라우저로 본 모습]

 

2105

<div></div>가 하나면 가로 전체 한 영역...

<div></div><div></div>가 이런식으로 2개면 가로 전체를 차지하는 영역이 위에서부터 아래로 2개.....(위의 그림처럼) 이런식으로 되는 겁니다.

<div> 태그 한개가 하나의 장난감 블록이라고 생각하시고 위에서부터 아래로 하나 하나 쌓아 내려가는 형태라고 생각하시면 됩니다.

따라서 다음의 그림처럼 가로 방향으로 2개의 영역이 만들어질 수는 없습니다.

 

2106

 

(table과 비교해서 가장 헷갈리는 부분이 바로 요거 때문이죠. 하지만 위와 같은 테이블식의 레이아웃은 빨리 머리속에서 지워 버리세요. 첫사랑은 늙어서도 생각납니다만 빨리 잊어야 새 사람을 만날수 있습니다.)

 

<div> 태그에서의 div는 Division의 줄임말입니다. Division은 분할하다라는 뜻이거든요.

HTML 문서( 웹브라우저의 화면)를 위에서부터 아래로 분할하여 하나 하나의 가로 영역(Block)을 만드는 태그.

이것이 바로 div 태그의 역할입니다.

 

2107

 

이제 div 가 어떤 녀석인지 아셨겠죠?

다 이해하셨다면 다음에는 <p> 태그란 넘에 대해서 알아보도록 하겠습니다.

div와 비슷한듯 하면서도 비슷하지 않은... 자기 주장이 아주 강한 넘입니다.

 

 

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

 

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

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

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









div, 레이아웃, 웹표준
댓글 13 | 엮인글 0

DIV 레이아웃 [2-2] : div, p, span 태그들의 차이점을 아시나요?
DIV 레이아웃 [1] : 홈페이지 레이아웃 작업. 이제는 DIV로 하자.





%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