출처 - http://blog.naver.com/wdig
######################################################
##### 작성자: 간츠 gantz2010@hotmail.com #####
##### 블로그: http://blog.naver.com/wdig #####
##### 기 타: 퍼 가실때는 출처를, 질문은 이메일로... #####
#####################################################
DIV 레이아웃 [1] : 홈페이지 레이아웃 작업. 이제는 DIV로 하자.
나모나 드림위버와 같은 위지윅 프로그램을 사용하여 웹디자인을 하는 많은 사람들의 경우 Table로 레이아웃을 잡아서 작업하는 것에 이미 익숙해져 있기 때문에 Div로 레이아웃 잡는 것을 굉장히 어렵고 부담스러워 하고 있는 것이 현실입니다.
하지만 관련 기술이나 트렌드의 변화 속도가 빠른 웹관련 분야에서 어렵다고 손 놓고 있을 수만은 없겠죠?
이제부터 Div 레이아웃 잡기를 공부해 보도록 합시다.
제일 먼저 왜 Div인가에 대해 얘기해 보도록 하겠습니다.
=========================================================================================
지금까지는 도대체 무었이 문제였나?
많은 한국의 웹디자이너들의 작업 방식은 거의 대부분 다음과 같을 것입니다.
(큰 회사일 경우, Creatives, Frontend Developer, Backend Developer등으로 세분화 되어 있겠지만요.....)
1. 포토샵 작업 (또는 플래시 작업)
2. 자르기
3. 드림위버나 나모 웹에디터 실행
4. 자른 크기대로 Table 잡기 (레이어 잡기)
5. 자른 이미지들 배치하기
6. 그 외 나머지 간단한 HTML 텍스트 작업과 자바스크립트 작업 마무리
지극히 간단하게 표현하긴 했지만
위의 방식을 사용하는 대부분의 웹디자이너분들은 아마도 그래픽 디자이너에서 웹디자이너로 전환하신 분들이 대부분일 것입니다. 따라서 'HTML'이라는 개발 측면 보다는 'Graphic'이라는 디자인 적인 측면이 더 강한 것이지요.
사실 위와 같은 과정을 통해서도 아주 멋지고 훌륭한 웹페이지를 만드는데에는 아무런 문제가 없습니다.
하지만 만일 다음과 같은 경우라면요?
1. 사이트 방문자 수가 몇십만 몇백만 이상 되는 대형 사이트라면?
(로딩 속도의 문제)
2. 미국과 같이 아직도 PPP 다이얼업으로 인터넷에 접속하는 방문자들이 많다면?
(무분별한 이미지의 과도한 사용)
3. 모바일이나 그 외 다른 기기를 통해 사이트를 방문하는 사람들이 있다면?
(브라우저 별 호환성 문제)
4. IE 말고도 다른 종류의 웹브라우저를 사용하는 방문자들이 있다면?
(브라우저 별 호환성 문제)
5. 수시로 이거 바꿔라 저거 바꿔라 하는 바람에 Table 구조가 엉망이 된다면?
(잦은 업데이트에 대한 문서구조적 대처)
6. 구글과 같은 검색엔진에 웹사이트가 노출되는 빈도수를 높이라고 얘기한다면?
(웹 문서 정보의 노출/표현 방식)
7. 회사에서 Web 2.0 어쩌고 저쩌고 하면서 웹디자이너를 압박한다면?
(기술적 트렌드)
8. Div로 레이아웃 작업할 수 있는 디자이너를 뽑는다는 구인광고에 이력서 넣기가 무섭다면?
(자기번뇌, 자아성찰)
1, 2, 3, 4 번에 대해서는 별 문제를 못느끼는 사람들도 있겠지만 5, 6, 7, 8 번은 결코 남의 얘기가 아닐 것입니다.
그리고 1, 2, 3, 4 번도 Senior Web Developer라면 결코 무시할 수 없는 얘기들이지요.
Div 레이아웃 ==> 위의 모든 문제 해결????
이런 뜻은 절대 아닙니다.
하지만 Div를 100% 제대로 사용하기 위해서는 W3에서 권고하고 있는 표준 HTML 문법을 사용해야 하기 때문에
Div 레이아웃 ==> 표준 HTML 문법 사용... 이라는 뜻으로 해석할 수 있으며
표준 HTML 문법 사용 ==> 위의 대부분의 문제들 해결 가능.... 일케 되는 것이지요.
이제 눈치 채셨나요?
Div로 레이아웃 작업하자는 얘기는 결국 표준 HTML 문법을 사용하여 웹사이트를 만들자라는 것과 같은 뜻입니다.
많은 분들이 Div를 어려워 하시는 이유중의 하나가 바로 이러한 본질적인 문제를 생각하지 못하고 있기 때문입니다.
표준 HTML 문법을 사용하려면 핸드코딩은 기본입니다.
모든 HTML 태그들의 용도와 사용법도 알아야되고 그것을 일일이 한줄 한줄 타입핑 칠수 있을 정도로 빠삭해야 된다는 얘기죠.
드림위버나 나모를 사용하여 웹페이지를 만들어 오셨던 분들이라면 여기서부터 막히게 되어 있습니다.
그래서 더 어렵게 느껴지는 것이구요.
이제부터 Div로 레이아웃 잡는 법을 배워보도록 하겠습니다.
하나 하나 따라해 보시면 핸드코딩 하는 법과 표준 HTML 문법에 대해서도 자연스럽게 배우실 수 있을 것입니다.
걱정 뚝!
DIV 레이아웃 [2-1] : div, p, span 태그들의 차이점을 아시나요?
<div>, <p>, <span> 이 세가지 태그들의 차이점을 알고 계시나요?
의외로 많은 웹디자이너분들께서 이 세가지 태그들의 차이점을 전혀 모르고 있더군요.
그냥 <br>은 한줄 밑으로, <p>는 두줄 밑으로 띄워주는 정도로만 알고 있는 정도죠.
하지만 이 세가지 태그는 그 역활이나 용도면에서 아주 많은 차이를 가지고 있습니다.
이 차이점을 정확히 이해하신다면 Div로 레이아웃 작업하는 것은 정말 식은 죽 먹기입니다.
============================================================================================================
<div> 태그에 대해 알아 봅시다.
다음의 코드를 봐주세요.
<div>구지성 *오~!!! 완죤 조아~~!!!!</div>
그리고 이것은 웹브라우저로 보았을때 입니다.
자. 뭐 별로 특이한 건 없죠?
그럼 다음과 같이 div에 border를 줘서 크기를 함 살펴 보도록 하죠.
<div style="border:1px solid red;">구지성 *오~!!! 완죤 조아~~!!!!</div>
Style(CSS)에 대해 잘 모르시는 분들이라도 괜찮습니다. 외우실 필요 없구요.
그냥 div 태그 영역의 테두리를 빨간색으로 그려 준것과 비슷하다고 생각하시면 됩니다.
그리고 이건 위의 코드를 웹브라우저로 보았을 때입니다.
어떠세요? 이제 div가 어떻게 생긴 녀석이라는게 눈에 들어오시나요?
div는 화면상에서 가로로 한줄 전체를 차지하는 녀석입니다.
웹브라우저 화면 왼쪽 끝에서 오른쪽 끝까지.... 한줄 전체를 차지하는 녀석입니다.
위의 그림처럼 브라우저 창의 크기가 가로로 늘어나면 div 도 함께 늘어 납니다.
말씀드린데로 div라는 태그는 화면의 가로 한줄 전체를 차지하기 때문이죠.
그럼 이번에는 요렇게 함 해보죠.
<div style="border:1px solid red;">
구지성 *오~!!! 완죤 조아~~!!!!<br />
구지성 *오~!!! 완죤 조아~~!!!!<br />
구지성 *오~!!! 완죤 조아~~!!!!
</div>
실제 프로젝트에서는 이런식으로 <br />을 쓰지 않습니다만 예제에서는 빠른 이해를 돕기위해 사용하였음을 참고해 주세요.
그리고 이것을 마찬가지로 웹브라우저를 띄워서 확인해 보겠습니다.
음.... <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>
[웹브라우저로 본 모습]
<div></div>가 하나면 가로 전체 한 영역...
<div></div><div></div>가 이런식으로 2개면 가로 전체를 차지하는 영역이 위에서부터 아래로 2개.....(위의 그림처럼) 이런식으로 되는 겁니다.
<div> 태그 한개가 하나의 장난감 블록이라고 생각하시고 위에서부터 아래로 하나 하나 쌓아 내려가는 형태라고 생각하시면 됩니다.
따라서 다음의 그림처럼 가로 방향으로 2개의 영역이 만들어질 수는 없습니다.
(table과 비교해서 가장 헷갈리는 부분이 바로 요거 때문이죠. 하지만 위와 같은 테이블식의 레이아웃은 빨리 머리속에서 지워 버리세요. 첫사랑은 늙어서도 생각납니다만 빨리 잊어야 새 사람을 만날수 있습니다.)
<div> 태그에서의 div는 Division의 줄임말입니다. Division은 분할하다라는 뜻이거든요.
HTML 문서( 웹브라우저의 화면)를 위에서부터 아래로 분할하여 하나 하나의 가로 영역(Block)을 만드는 태그.
이것이 바로 div 태그의 역할입니다.
이제 div 가 어떤 녀석인지 아셨겠죠?
다 이해하셨다면 다음에는 <p> 태그란 넘에 대해서 알아보도록 하겠습니다.
div와 비슷한듯 하면서도 비슷하지 않은... 자기 주장이 아주 강한 넘입니다.
<p> 태그에 대해 알아 봅시다.
p 태그는 div 태그와 별반 다르지 않습니다.
다음의 코드를 한번 보도록 하죠.
<p style="border:1px solid red;">p 태그로 맹글었어요.</p>
역시 이번에도 p 태그 영역에 빨간색으로 테두리선을 그렸습니다.
그리고 브라우저로 보면 일케 보입니다.
어때요? 역시 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 태그를 사용하여 해당 주제에 대한 내용 글을 입력하였다고 가정해 봅시다.
그리고 이것을 웹브라우저로 확인해 보도록 하겠습니다.
역시 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>
그리고 이것은 p 태그로 바꾼 모습입니다.
<p style="border:1px solid red;">p 태그로 맹글었어요.</p>
<p style="border:1px solid red;">p 태그로 맹글었어요.</p>
어때요? 먼가 좀 다르죠?
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> 태그
자. 오늘은 span 태그에 대해 알아보도록 하겠습니다.
언제나 그랬듯이 이번에도 span 태그는 어떤 모습으로 생겼는지 먼저 살펴 보도록 하죠.
<span style="border:1px solid red">구지성 *오~!!! 넘 조아~~!!!!!</span>
위의 코드를 브라우저로 확인해 보겠습니다.
아하... 이번에는 div 나 p 태그와는 좀 다른 모습이네요.
가로로 화면 왼쪽에서 오른쪽 끝까지 하나의 영역을 모두 차지하지 않고 오직 span 태그안에 들어있는 글자만을 감싸고 있는 모습입니다.
그럼 이렇게 한번 또 해보면 어떨까요?
<span style="border:1px solid red">구지성 *오~!!! 넘 조아~~!!!!! 구지성 *오~!!! 넘 조아~~!!!!!</span>
span 태그안에 글자들을 좀 더 많이 입력해 보았습니다.
이것을 다시 브라우저로 확인해 보도록 하죠.
오~~~ 글자수가 늘어나는 만큼 span 태그도 함꼐 늘어났습니다.
div 나 p 태그와 같은 Block-level Element (블락레벨 엘레멘트: 전 강좌에서 배운내용입니다.) 들은
그 안에 들어있는 내용들의 길이와는 상관없이 브라우저 화면 가로 전체 영역을 차지하기 때문에
브라우저 화면 가로 사이즈에 따라 같이 줄어들었다 늘어났다 했었죠?
근데 span 태그는 브라우저 창의 크기와는 상관없이 태그안에 들어있는 내용의 길이에 따라서 늘어나고 있습니다.
만약 span 태그안에 들어 있는 내용들이 브라우저 화면보다 길다면 어떨까요?
한번 해보죠.
<span style="border:1px solid red">구지성 *오~!!! 넘 조아~~!!!!! 구지성 *오~!!! 넘 조아~~!!!!! 구지성 *오~!!! 넘 조아~~!!!!! 구지성 *오~!!! 넘 조아~~!!!!!</span>
오호~~ 이것 참 애매한 모습이 됐네요.
분명히 span 태그는 한개인데 윗줄 아랫줄 2개인 것처럼 되버렸어요.
과연 이것을 어떻게 해석하면 좋을까요?
하나 더 해보겠습니다.
구지성 *오~!!! 넘 조아~~!!!!! <span style="border:1px solid red">구지성 *오~!!! 넘 조아~~!!!!! 구지성 *오~!!! 넘 조아~~!!!!! 구지성 *오~!!! 넘 조아~~!!!!! 구지성 *오~!!! 넘 조아~~!!!!!</span>구지성 *오~!!! 넘 조아~~!!!!!
span 태그 바깥쪽 앞, 뒤로도 글자들을 넣어 보았습니다.
그리고 이것을 브라우저로 확인해 보겠습니다.
참.. 내.... 이번에는 3줄이 되버렸어여... ㅜㅜ
....... 라고 생각하시면 오산입니다....
사실 위의 그림에서 처럼 브라우저 화면 보다 span 태그안의 내용이 길면 아래로 밀려 내려오면서
span 태그도 두줄, 세줄 처럼 보여지는데요..
사실은 한줄입니다.
저게 어떻게 한줄이냐구요? 그건 브라우저 창의 크기를 가로로 늘려보면 알 수 있습니다.
그림이 좀 작아 보이긴 하지만 그래도 보이실 겁니다.
브라우저 창의 크기를 가로로 늘려보니 분명 span 태그는 한줄(One Line) 입니다. (아주 중요!!!!)
같은 코드를 div로 바꿔서 해볼까요?
구지성 *오~!!! 넘 조아~~!!!!! <div style="border:1px solid red">구지성 *오~!!! 넘 조아~~!!!!! 구지성 *오~!!! 넘 조아~~!!!!! 구지성 *오~!!! 넘 조아~~!!!!! 구지성 *오~!!! 넘 조아~~!!!!!</div>구지성 *오~!!! 넘 조아~~!!!!!
span 태그 였을 때와는 많이 다릅니다.
두개를 비교해서 다시 한번 보겠습니다.
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 태그안에 아무런 내용을 넣지 않고 테두리만 표시되도록 한 후
브라우저로 확인해 보겠습니다.
분명히 테두리를 빨간색으로 표시하게끔 했지만 태그안에 아무런 내용이 없으니
span 태그도 화면상에 전혀 표시되지 않는군요. 높이도 없고 길이도 없습니다.
div와 p 태그는 어떨지 한번 비교해 볼까요?
<div style="border:1px solid red"></div>
<p style="border:1px solid red"></p>
위의 코드를 브라우저로 확인해 보겠습니다.
span 태그의 경우처럼 두 태그안에는 아무런 내용이 들어있지 않습니다.
위의 그림에서 보듯이 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 레이아웃에 대해 벌써 반은 배우신거거든여.,.....