47166 Members __ Online

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

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

posted by 라부
date : , update :
hit : 36411, scrab : 1 , recommended : 16 , attach : 9

div로 레이아웃 짜는 법은 안갈쳐주고 왠 태그 설명이냐고 투덜대시는 분들도 계실줄 압니다만... ^^;;

그래도 지금 설명 드리고 있는 것들을 꼭 이해하셔야만 합니다.

기본적인 것을 알지 못하면 맨날 남이 만들어 놓은 div 레이아웃 소스만 가져다가 쓸수 밖에 없거든요.

게다가 내가 원하는 모양으로 조금 수정해서 쓸라 치면 맘대로 안될때가 더 많지요.

근본적인 원리와 내용을 이해하지 못하면 자유 자재로 사용하는데 제약이 따를 수 밖에 없습니다.

그래서 기본적인 바탕에 대해 먼저 설명을 드리고 넘어가려는 것이니 인내를 가지고 봐주심 감솨하겠슴다. ^^

 

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

 

 

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

 

 

자. 오늘은 span 태그에 대해 알아보도록 하겠습니다.

언제나 그랬듯이 이번에도 span 태그는 어떤 모습으로 생겼는지 먼저 살펴 보도록 하죠.

 

<span style="border:1px solid red">구지성 *오~!!! 넘 조아~~!!!!!</span>

 

위의 코드를 브라우저로 확인해 보겠습니다.

 

2301

 

아하... 이번에는 div 나 p 태그와는 좀 다른 모습이네요.

가로로 화면 왼쪽에서 오른쪽 끝까지 하나의 영역을 모두 차지하지 않고 오직 span 태그안에 들어있는 글자만을 감싸고 있는 모습입니다.

 

그럼 이렇게 한번 또 해보면 어떨까요?

 

<span style="border:1px solid red">구지성 *오~!!! 넘 조아~~!!!!! 구지성 *오~!!! 넘 조아~~!!!!!</span>

 

span 태그안에 글자들을 좀 더 많이 입력해 보았습니다.

이것을 다시 브라우저로 확인해 보도록 하죠.

 

2302

 

오~~~ 글자수가 늘어나는 만큼 span 태그도 함꼐 늘어났습니다.

div 나 p 태그와 같은 Block-level Element (블락레벨 엘레멘트: 전 강좌에서 배운내용입니다.) 들은

그 안에 들어있는 내용들의 길이와는 상관없이 브라우저 화면 가로 전체 영역을 차지하기 때문에

브라우저 화면 가로 사이즈에 따라 같이 줄어들었다 늘어났다 했었죠?

근데 span 태그는 브라우저 창의 크기와는 상관없이 태그안에 들어있는 내용의 길이에 따라서 늘어나고 있습니다.

 

만약 span 태그안에 들어 있는 내용들이 브라우저 화면보다 길다면 어떨까요?

한번 해보죠.

 

<span style="border:1px solid red">구지성 *오~!!! 넘 조아~~!!!!! 구지성 *오~!!! 넘 조아~~!!!!! 구지성 *오~!!! 넘 조아~~!!!!! 구지성 *오~!!! 넘 조아~~!!!!!</span>

 

2303

 

오호~~ 이것 참 애매한 모습이 됐네요.

분명히 span 태그는 한개인데 윗줄 아랫줄 2개인 것처럼 되버렸어요.

과연 이것을 어떻게 해석하면 좋을까요?

 

하나 더 해보겠습니다.

 

구지성 *오~!!! 넘 조아~~!!!!! <span style="border:1px solid red">구지성 *오~!!! 넘 조아~~!!!!! 구지성 *오~!!! 넘 조아~~!!!!! 구지성 *오~!!! 넘 조아~~!!!!! 구지성 *오~!!! 넘 조아~~!!!!!</span>구지성 *오~!!! 넘 조아~~!!!!!

 

span 태그 바깥쪽 앞, 뒤로도 글자들을 넣어 보았습니다.

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

 

2304

 

참.. 내.... 이번에는 3줄이 되버렸어여... ㅜㅜ

....... 라고 생각하시면 오산입니다....

사실 위의 그림에서 처럼 브라우저 화면 보다 span 태그안의 내용이 길면 아래로 밀려 내려오면서

span 태그도 두줄, 세줄 처럼 보여지는데요..

사실은 한줄입니다.

 

저게 어떻게 한줄이냐구요? 그건 브라우저 창의 크기를 가로로 늘려보면 알 수 있습니다.

 

2305

 

그림이 좀 작아 보이긴 하지만 그래도 보이실 겁니다.

브라우저 창의 크기를 가로로 늘려보니 분명 span 태그는 한줄(One Line) 입니다. (아주 중요!!!!)

 

같은 코드를 div로 바꿔서 해볼까요?

 

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

 

2306

 

span 태그 였을 때와는 많이 다릅니다.

두개를 비교해서 다시 한번 보겠습니다.

 

2307

 

span 태그는 태그가 시작되는 곳과 끝나는 곳이 내가 태그를 입력한 그곳과 일치합니다.

하지만 div 나 p 와 같은 Block-level 태그들은 왼쪽 끝에서 오른쪽 끝까지 가로 방향의 한 영역(Block)을 차지해야만 합니다.

따라서 div 는 왼쪽 끝이라는 조건을 맞추기 위해 위 그림처럼 <div> 다음에 나오는 텍스트 들을

한줄 아래의 위치로 내려보낼 수 밖에 없으며

오른쪽 끝까지... 라는 조건을 맞추기 위해 빈 공간이 좀 남더라도 </div> 다음에 나오는 텍스트들은 밑줄로 내려 보내는 것입니다.

(아주 중요!! 꼭 이해!!)

 

즉, div 나 p 태그와 같은 Block-level Element 들은 자신들이 가지고 있는 고유 영역(Block)이 있습니다만

span 태그는 자기 자신이 기본적으로 갖고 있는 영역(Block)이 없습니다.

그저 자신이 둘러싸고 있는 내용들의 양에 따라 스스로의 *길이*도 결정되어 지는 것이지요.

 

이와 같이 자기의 고유 영역이 없이 그저 자신이 둘러싸고 있는 내용들의 양에 따라 *길이*가 결정되어 지는 태그들

우리는 고급스럽게 Inline-level Element (인라인 레벨 엘레멘트) 라고 부릅니다.

(Inline-level Element 는 span 태그말고도 여럿 있는데 앞으로 하나 하나 배우게 되실 거에요.)

 

제가 위에서 *길이* 라는 표현을 썼습니다만 '크기'라는 말대신 '길이'라고 굳이 명시한 것은

이미 위에서 언급한 내용대로 span 과 같은 Inline-level Element들은 자신이 가지고 있는 고유 영역이 없기 때문에

높이(height)라는 개념이 없습니다. 

자신이 포함하고 있는 내용물들의 높이(폰트의 크기라든가 이미지의 크기)에만 의존하는 것 뿐입니다.

높이라는 개념 자체가 없기 때문에 '크기'라는 표현 대신 '길이'라는 표현을 사용한 것입니다.

이러한 '길이' 조차도 사실 그 안에 아무런 내용이 없다면... 없는 것(NONE)이 되버립니다.

 

무슨 소린지 헷갈리시나요?

그럼 다음을 한번 보겠습니다.

 

<span style="border:1px solid red"></span>

 

위처럼 span 태그안에 아무런 내용을 넣지 않고 테두리만 표시되도록 한 후

브라우저로 확인해 보겠습니다.

 

2308

 

분명히 테두리를 빨간색으로 표시하게끔 했지만 태그안에 아무런 내용이 없으니

span 태그도 화면상에 전혀 표시되지 않는군요. 높이도 없고 길이도 없습니다.

 

div와 p 태그는 어떨지 한번 비교해 볼까요?

 

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

 

위의 코드를 브라우저로 확인해 보겠습니다.

span 태그의 경우처럼 두 태그안에는 아무런 내용이 들어있지 않습니다.

 

2309

 

위의 그림에서 보듯이 div 나 p 태그는 태그안에 아무런 내용이 들어있지 않아서 높이(height)는 제로(0)가 되었지만

(위의 빨간줄은 테두리 선만 표시되어 있는 것일 뿐 실제 태그의 높이는 0 이란것을 알 수 있습니다.)

span 태그와는 달리 분명 가로로 하나의 영역을 확보하고 있는 것을 알 수 있습니다.

 

span 태그는 높이: NONE, 길이: NONE 이구요.

div 나 p 태그는 높이: 0, 길이: 100% 가 되었습니다.

게다가 p 태그의 경우에는 기본 마진(Margin) 까지 그대로 적용되어져 있는 것을 볼수 있습니다.

 

이제 NONE 하고 0 의 차이를 이해 하시겠습니까?

 

(만약 이 시점에서.... display:none 이라는걸 문뜩 생각하는 분이 계시다면 센스 짱입니다~~ 무슨 얘긴지 나중에 설명 드리도록 하겠습니다.)

 

 

자, 그럼 마무리 정리하겠습니다.

 

1. span 태그는 자신이 갖고 있는 고유한 영역이 없이 자신이 둘러싸고 있는 

    내용물의 양과 크기에 의존하여 높이와 길이가 결정되어 진다라는 것. (아주 중요!! 꼭 기억!!)

2. 그 높이는 한 줄(One Line)에 대한 높이이며 그 길이는 태그가 열리는 곳<span>에서 닫히는 곳</span>까지라는 것.

3. 다시말해 span 태그는 영역(Block) 단위가 아니라 줄(Line) 단위라는 것.

4. span 태그와 같은 성향을 가진 모든 태그들을 고급스럽게 Inline-level Element(인라인 레벨 엘레멘트)라고

    부른다는   것. (아주 중요!! 꼭 기억!!)

 

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

 

음... 열심히 설명하긴 했는데.... 쩝...

Block-Level Element 와 Inline-Level Element 가 어떤 차이점들이 있는지... 이것이 핵심입니다.

이 차이점만 확실히 안다면 div 레이아웃에 대해 벌써 반은 배우신거거든여.,.....

 

질문은 댓글로 올려 주세여~~~

 

 

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

 

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

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

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









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

DIV 레이아웃 [3-1] : HTML..... 표준과 비표준에 대하여...
DIV 레이아웃 [2-2] : 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