출처 - http://blog.naver.com/wdig
######################################################
##### 작성자: 간츠 gantz2010@hotmail.com #####
##### 블로그: http://blog.naver.com/wdig #####
##### 기 타: 퍼 가실때는 출처를, 질문은 이메일로... #####
###################################################
DIV 레이아웃에서 정작 DIV 레이아웃은 중요하지 않다.
자, 이제 우리는 웹표준에 대한 기초적인 개념 공부를 끝내고 모두가 바라는 실전 DIV 레이아웃에 대해 배워 보려고 합니다.
DIV 레이아웃 작업은 'HTML'이라고 하는 하나의 '웹문서'를
'웹브라우저'라고 부르는 화판위에서 문서의 모양을 '재구성' 하는 작업이라고 볼 수 있습니다.(CSS를 사용해서 말이죠....)
아무런 디자인이 되어 있지 않은 투박한 워드문서를
예쁜 디자인과 그림등으로 치장한 파워포인트 문서로 변경하는 것과 같은 맥락이라고 보시면 이해하시기가 수월할 것입니다.
'HTML은 문서다' 라는 것은 본 강좌 초기부터 몇번씩이나 강조했던 얘깁니다.
(그만큼 아주 아주 중요한 개념이라는 뜻이겠죠?)
문서라는 것은 타인에게 전달하고자 하는 것을 말이 아닌 글로써 적어 놓은 것을 의미합니다.
즉, 문서의 목적은 '내용의 전달'이지 '디자인'이 아니라는 거죠.
디자인은 사실 목적이라기 보다는 방법에 더 가깝습니다.
별로 예쁘지 않은 문서라 할지라도 작성자가 전달하고자 하는 뜻이
사람들에게 충분히 잘 전달되어졌다면 그 문서는 문서로써의 기능을 100% 달성한 것입니다.
HTML/XHTML은 문서의 내용을 담고 CSS와 Image 들로 그 내용을 예쁘게 꾸며준다... 라는 개념은 이제 다들 이해하고 계시죠?
이 얘기는 반대로 CSS와 Image 가 없어도 그 문서의 내용 자체는 정확하게 전달 될 수 있어야 한다.... 는 의미입니다.
DIV 레이아웃이라는 것이 단지 테이블로 이미지를 쪼개서 작업하던걸 DIV로 쪼개서 작업하는 것 정도로 여기신다면 오산이라는 말입니다.
기껏 DIV로 2단, 3단, 4단 레이아웃을 만들고 나서... 그 안에 다시 테이블로 이미지를 쪼개서 넣거나
통짜 이미지를 넣어 사이트를 만들 거라면
그냥 테이블로 작업하시는게 더 나을 수 있습니다. 굳이 DIV로 레이아웃 작업 하실 필요 없습니다.
'그럼 DIV로 다시 쪼개서 넣는건 괜찮나요?' 라고 물어보지 마세요....
쪼갠다... 는 강박 관념을 제발 버리시기 바랍니다.
포토샵에서 전체 디자인을 먼저 한 후,
그것을 웹페이지로 전환하는 식의 작업 순서로는
이 '쪼갠다'는 강박 관념에서 벗어날 수 없습니다.
'우짜쓰까... ㅜㅜ... 포토* 작업한걸 쪼개지 않고 어케 작업을 해야될지 도저히 감이 잡히질 않아요....' 라고 고민되시는 분들은
다음의 설명을 잘 들어 주세요.
그리고 전체 사이트의 내용들을 제목, 목차, 내용 등등... 일반 문서 양식에 맞춰 '문서'로 작성하신 후
3. 해당 문서와 동일한 형태로 웹브라우저에서도 표현될 수 있게끔 HTML/XHTML 엘레멘트로 전환 시키십시요.
4. 그런다음 문서의 각 내용들이 어떤 블럭으로 묶일 수 있는지를 판단한 후 각 블럭을 DIV로 감쌉니다. (이때부터가 디자인에 대한 구상을 해야되는 시점입니다.)
5. 이러한 DIV 블럭들을 CSS를 이용하여 원하는 곳에 위치 시킵니다. =>이것이 바로 DIV 레이아웃 작업입니다.
6. 포토*을 열어 해당 블록들(배경, 아이콘, 제목 등등등....)에 필요한 이미지(디자인) 작업을 진행합니다.
7. 작업한 이미지(디자인)들을 CSS를 이용하여 각각의 HTML 엘레멘트들에 적용 시킵니다.
물론 실제 프로젝트에서는
사이트의 규모에 따라 이보다 훨씬 더 복잡한 절차를 거치겠지만 기본적인 흐름은 거의 같습니다.
위의 7 단계 중 가장 중요하고 핵심적인 것은 3번입니다.
('뭐라고라? DIV 레이아웃 작업에서 가장 중요한 것이 5번이 아니라 3번이라고라?.... 두둥~!!!!!!')
왜냐면....
3번 단계가 없다면 어쩔 수 없이 디자인을 쪼개서 작업할 수 밖에 없구요.
3번 단계를 거친다면 웹표준에 맞춰 근사한 DIV 레이아웃 작업이 가능해지기 때문입니다.
그리고 3번 단계를 거쳐서 작업한 페이지는 설사 CSS와 Image 등.. 모든 디자인이 OFF 가 되어 버려도
사이트의 내용(컨텐츠) 자체는 최소한 원래의 워드 문서로 작업했던 그 모양 그대로 나타나기 *문에
전하고자 하는 사이트의 내용을, 어떤 환경에서든지.... 누구에게나.... 100% 잘 전달시킬 수가 있게 됩니다.
(참고로 여기서 말한 '누구에게나'에는 검색엔진도 포함됩니다. 무슨 뜻인지 아시겠죠? ^^ )
참 아이러니 합니다.
DIV 레이아웃에서 정작 DIV 레이아웃은 중요하지 않다니 말입니다.
제가 본 강좌를 시작하면서
많은 분들이 원하시는데로 2단 레이아웃, 3단 레이아웃 등... 레이아웃 만드는 것을 바로 시작하지 않고
주저리 주저리 웹표준 기초부터 강의한 이유가 바로 이것 때문입니다.
웹사이트의 전체 내용을 정리하여 문서를 만들어 보자.
자. 그럼 이제 함 시작해 볼까요?
1, 2번 단계를 거쳐서 다음과 같은 워드 문서를 준비했다고 가정하겠습니다.
1 페이지:
2 페이지:
(예제에 사용된 문서는 본 글에 첨부하였으니 다운 받으셔서 함 살펴 보시기 바랍니다.)
위의 워드 문서를 보시면
문서의 '제목'과 '목차', 그리고 해당 목차에 대한 '내용'으로 구성되어 있는 것을 알수 있습니다.
그리고 전체적으로는 독도와 울릉도, 두 페이지 뿐이지만 이것은 단순한 예제기 때문에 나머지 항목들을 생략한 것 뿐입니다.
실제 프로젝트라면 제주도, 마라도, 거제도에 대한 내용들도 당연히 있어야 합니다.
그리고 편의상 하나의 목차에 대한 내용이 하나의 페이지 안에 다 들어가도록 간결하게 구성하였습니다.
이제 웹사이트에 들어갈 내용(컨텐츠)들이 모두 정리 되었으니
이 문서를 HTML/XHTML 페이지로 동일하게 만드는 작업인 3번 단계로 넘어가 보도록 하겠습니다.
일반 문서의 내용을 HTML 페이지로 전환하자
일단 먼저 가장 쉽게 할 수 있는 것은 HTML/XHTML 파일명을 정하는 것입니다.
1페이지에 대한 내용은 독도에 관한 것이니 dokdo.html 이라고 하는 파일이 필요할 것이고
2페이지에 대한 내용은 울릉도에 관한 것이니 ullungdo.html 이라고 하는 파일이 있으면 될것 같습니다.
나머지도 jejudo.html, marado.html, geojedo.html 뭐 다 이런식이겠죠.'
-------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="utf-8" xml:lang="utf-8">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<style type="text/css">
/* <![CDATA[ */
/* ]]> */
</style>
</head>
<body>
<h1>한국의 섬</h1>
<ul>
<li><a href="dokdo.html">독도</a></li>
<li><a href="ullungdo.html">울릉도</a></li>
<li><a href="jejudo.html">제주도</a></li>
<li><a href="marado.html">마라도</a></li>
<li><a href="geojedo.html">거제도</a></li>
</ul>
<h2>독도</h2>
<p><img src="dokdo.jpg" title="바다위에 떠 있는 독도의 모습" alt="독도 사진" /></p>
<p>독도는 독섬이라고도 하며, 면적은 18만 7,554㎡이다. 울릉도에서 동남쪽으로 87.4㎞ 떨어진 해상에 있으며, 동도(東島)•서도(西島) 및 그 주변에 흩어져 있는 89개의 바위섬으로 이루어진 화산섬이다. 동도는 동경 131도 52분 10.4초, 북위 37도 14분 26.8초에, 서도는 동경 131도 51분 54.6초, 북위 37도 14분 30.6초에 위치한다. 동도•서도간 거리는 151m로 좁은 수도(水道)를 이룬다. 동도는 해발고도 98.6m, 면적 73,297㎡이고, 서도는 해발고도 168.5m, 면적 88,740㎡이다.</p>
<p>옛날에는 삼봉도(三峰島)•가지도(可支島)•우산도(于山島) 등으로도 일컬어졌다. 울릉도가 개척될 때 입주한 주민들이 처음에는 돌섬이라고 하였는데, 이것이 돍섬으로 변하였다가 다시 독섬으로 변하였고, 독섬을 한자로 표기하면서 독도가 되었다고 한다.</p>
</body>
</html>
##########################################################################################
*** 참 고 ************************************************************************************************
HTML 파일 이름을 어떻게 정할 것이냐... 는 웹사이트 기획 단계에서부터 생각하셔야 되는
아주 중요한 사안중에 하나입니다.
왜냐하면 이 HTML 파일 Naming 은 검색엔진 최적화(SEO: Search Engine Optimization)와 아주 밀접한 관계가
있기 때문입니다. 특히 구글 검색에서 랭킹을 더 올리고 싶으시다면 더욱 더 중요하게 생각하셔야 하구요.
이 부분에 대해서는 나중에 본 블로그의 'SEO 검색엔진최적화' 에서 별도로 다뤄 보도록 하겠습니다.
###########################################################################################
dokdo.html 파일에 다음과 같은 기본 셋팅을 합니다.
기본 셋팅하는거 이미 다 배운거니까 따로 설명은 안드리겠습니다만
CSS 에서
/* <![CDATA[ */
/* ]]> */
요 부분은 나중에 따로 함 설명 드리도록 하겠습니다. 오늘은 그냥 패스~~~~
어쨌거나 이렇게 준비된 기본 셋팅 위에
워드 문서의 내용을 HTML/XHTML 로 전환해 보도록 하겠습니다.
'한국의 섬' 이라는 것은 전체 사이트의 제목이라고 보면 되니까 <h1> 을 쓰면 되겠고
'목차' 는 문서에서 보이는대로 그냥 똑같이 표현하면 됨으로 <ul> 을 쓰면 될 것 같습니다.
'독도' 는 큰 제목 다음으로 중요한 해당 페이지의 제목임으로 <h2> 를 쓰면 딱이겠네요.
그 외 나머지 사진이나 설명 글들은 모두 <p> 안에 위치시키면 작업 끝~!!!
그럼 이제 이렇게 작업한 코드를 한번 살펴 볼까요?
그리고 이렇게 작업한 dokdo.html 을 파이어폭스로 한번 확인해 보겠습니다.
어떠신가요?
워드 문서의 모습과 거의 똑같지요?
다른점이라고는 '목차'의 각 항목에 링크를 걸어준거 밖에 없습니다.뭐 웹문서니까 이건 당연한 거겠죠..
CSS나 그 외 어떠한 디자인적인 요소의 이미지들을 전혀 사용하지 않은 상태에서
오직 HTML 엘레멘트로만 페이지의 내용을 구성하였기 때문에
모습 자체는 상당히 투박하긴 해도dokdo.html 이라는 페이지가 전달하고자 하는 내용(컨텐츠)이 무엇인지를
우리는 100% 이해할 수 있습니다.
다시말해... 만약 누군가가 CSS를 지원하지 않거나 이미지를 렌더링 할 수 없는 저기능 원시 브라우저로
이 dokdo.html 페이지를 본다 하더라도아무런 문제없이 해당 페이지에서 제공되는 정보를 취득할 수가 있다는 뜻입니다.
게다가....
<h1>, <h2>, <p>와 같이 의미론적으로도 아주 적절한 엘레멘트들을 사용하여
페이지 안의 내용(컨텐츠)들을 표현하였기 때문에 구글과 같은 검색 사이트의 검색 로봇이 사이트를 인덱싱 할 경우
문서의 구조와 그에 대한 내용을 우리가 의도한 그대로... 올바르게 알려줄 수가 있습니다.
위의 코드로 작성된 dokdo.html을 가지고 이제 어디한번 XHTML 문법 검사를 해볼까요?
파이어폭스에 있는 Web Developer 애드온의 Tool 메뉴를 보시면 Validate Local HTML 항목이 있습니다.
그것을 선택하시면 W3의 로컬 파일 HTML 문법 검사 사이트가 나옵니다.
본인 컴에 저장되어 있는 dokdo.html 파일을 선택한 후 Validate( 또는 Revalidate) 버튼을 눌러 보세요.
오~ XHTML 1.0 Strict 문법 검사를 오류없이 통과했다고 나옵니다.
드디어 우리는 XHTML 1.0 Strict 타입의 적격 웹문서 (Well-Formed Web Document)를 갖게 된 것입니다.
이제 HTML/XHTML 문서에 디자인을 입힐 차례가 온거죠.
DIV 레이아웃 [6-2] : 웹문서 행간 나누기 (DIV 블럭화 작업)
dokdo.html 페이지를 가지고 4번과 5번 단계에 걸쳐있는 DIV 레이아웃 작업을 계속 진행해 보도록 하겠습니다.
워드 문서에는 행[行] 만이 존재한다.
엑셀 문서에는 행[行]과 열[列]이 있습니다.
이 행과 열을 이용하여 표도 만들고 DB도 만들고 서식도 만들고 여러가지 다양한 작업을 하게 되지요.
하지만 워드 문서에는 이중에서 열의 개념이 없습니다.
그저 위에서 아래로 문자를 적어 내려가는 행의 개념만 있지요.
근데 이 워드문서의 행이란것도 엑셀의 행과는 그 성격이 완전히 다릅니다.
엑셀의 행에는 1행, 2행... 이런식으로 고유 영역과 위치가 지정되어 있지만 워드문서에는 이런게 없습니다.
그냥 행간에 간격을 두거나 Horizontal Bar (가로 구분선)를 중간에 끼어 넣어서 시각적으로 내용을 구분하게 되는 것이죠.
여기서 중요한 것은.... 워드 문서에서의 행은 문서 작성자가 원하는데로 행간이 구분되어진다는 것입니다.
결론적으로 워드 문서는 옆으로 쪼갤수는 없어도 위/아래로는 나눌수 있다... 뭐 이런 얘기죠...
그럼 지난 시간에 우리가 사용했던 워드 문서를 다시한번 보도록 하겠습니다.
워드 문서에는 열의 개념이 없기 때문에
만약 '위의 워드 문서를 내용별로 나누어 구분하여 보자...' 라고 했을 다음과 같이 할 수는 없습니다.
오직 아래와 같이 행간을 구분지은 모습으로 문서안의 내용들을 분류하게 되는 것입니다.
웹문서 행간 나누기 (DIV 블럭화 작업)
지난 시간에 우리는 잘 정리된 워드 문서를 HTML/XHTML 문서로 치환하는 것을 공부했습니다.
이 공부를 통해 다음과 같은 정의가 성립된다는 것을 알았죠.
워드 문서 == HTML 웹문서
이것은 반대로 생각해도 역시 마찬가지 의미를 가집니다.
HTML 웹문서 == 워드 문서
그렇다면 지난 시간에 작성한 독도에 관한 HTML 문서(dokdo.html)도
위의 워드문서 처럼 내용별로 나누어 구분할 수가 있다는 뜻이 됩니다.
이렇게 말이죠....
DIV 레이아웃 [2-1] : div, p, span 태그들의 차이점을 아시나요?
이 강좌에서 DIV가 어떻게 생긴 녀석인지 배웠었죠...
그때 사용했던 그림을 한번 다시 보도록 하겠습니다.
짜잔~~~~
사실 첫강좌에서 DIV 라는 녀석의 모습을 보고....
왜 DIV는 테이블 처럼 화려하지 못하고 저렇게 단순한 모습일까.... 라는 의문을 가지신 분들도
분명히 계셨으리라 생각합니다만
DIV의 목적이
위에서 워드 문서를 가지고 한 것처럼
웹문서의 내용을 작성자가 의도한데로 행간을 구분하여 블럭화 시키는 것이라는 걸 염두한다면
저런 단순한 모습이... 지극히 자신의 역활에 충실한 모습이란걸 알수 있습니다.
위의 두 그림을 합친 모습을 보시면 더욱 이해가 빠르실 겁니다.
이 그림을 좀 더 개선시켜보면 HTML 상에서는 어떤 모습이 될지 보다 더 정확하게 알 수 있습니다.
다음과 같이 말이죠...
어떠세요? 이제 DIV가 어떤 일을 하는 엘레멘트인지 확실히 감 잡으셨죠?
이것을 dokdo.html 페이지에 적용하여 실제 HTML 코드로 작성해 보면 다음과 같습니다.
(위의 HTML 파일은 본글에 첨부하였습니다.)
위에서 회색으로 표시된 <div id="wrapper"></div> 부분은
header, menu, content 이 세개의 DIV 들을 한꺼번에 제어하기 위해 추가된 <div> 입니다.
이 wrapper 라는 div 가 세개의 div들을 통으로 감싸고 있기 때문에
나중에 페이지의 전체 가로 크기를 조정한다든가 할때 아주 유용하게 쓸수 있습니다.
==========================================================================================
**** 참 고 ********************************************************************************
꼭 이렇게 해야된다는 것은 아닙니다. DIV 레이아웃에 있어서 정답은 없으니까요...
앞으로 작업을 쭈욱 해보면 아시겠지만 기본적인 틀이나 방식에서
올바른 범위를 벗어나지만 않는다면
그냥 본인에게 편리한 방향으로 작업을 진행하면 됩니다.
==========================================================================================
자.. 지금까지 우리는.... 웹문서도....
워드 문서처럼..... 그 내용들을 종류나 성격별로 분류하여
행간을 나누어 그룹화 시킬 수 있다는 것을 알았으며
이것을 실제 HTML 코드로 구체화 시키기 위해
웹문서의 내용들(HTML 코드들)을 DIV 엘레멘트를 이용하여 블럭화 하는 작업도 진행해 보았습니다.
DIV 블럭화 작업을 하는 이유는 웹페이지에 디자인을 입히기 위해서 입니다.
만약.... 디자인 필요없다... 위의 모습 그대로 사이트를 오픈하겠다... 라고 한다면 굳이 DIV 블럭화 작업을 할 필요도 없습니다.
DIV 블럭화 작업을 하지 않은 상태라 할지라도 저 독도 페이지는 아주 훌륭하게 작성된 적격 웹문서니까요...
결국 DIV 란 디자인(레이아웃)을 위해 존재하는 엘레멘트란 의미가 됩니다.
'왜 테이블 대신 DIV 인가?'....... 이제 더 확실히 이해 되시죠?
==========================================================================================
**** 참 고 ********************************************************************************
DIV 로 HTML 코드들을 블럭화 시켰다 하더라도
원시 저기능 웹브라우저로 위에서 작업한 독도 웹페이지를 보는데에는
여전히~~ 아무런 문제가 없습니다.
<p>에는 기본 마진이 있다고 했었죠?
<div>에는 이러한 기본 마진 같은 것이 없기 때문에
CSS로 디자인적인 요소를 가미하기 전까지는 시각적으로 아무런 변화가 생기지 않기 때문입니다.
인라인 엘레멘트 중에서는 span 이 div 와 같은 역활을 합니다.
==========================================================================================
자... 이제 HTML 코딩 작업은 모두 끝났습니다.
더 이상 할게 없습니다~~!!!!!
남은 것은 CSS를 이용하여 시각적으로 웹페이지를 멋지게 디자인하는 일입니다.
CSS를 사용하면 위에 작성된 HTML 코드들을 전혀 건드리지 않아도
얼마든지 변화 무쌍하게 원하는 디자인으로 웹페이지의 모양을 변경할 수 있습니다.
스킨을 바꾸면 디자인이 바뀌는 테터툴스나 제로보드 같은 것들도
이처럼 웹문서의 HTML은 문서적으로 구조화 되어 고정된 상태에서
CSS만을 변경하여 전체 사이트의 디자인을 바꾸는 것입니다.
그럼 마지막으로,
위의 DIV로 블럭화 작업을 마친 독도 페이지를 웹브라우저로 다시한번 보도록 하겠습니다.
웹브라우저로 볼때는 확실히 별반 차이가 없죠?
위와 같이... 디자인이라고는 전혀 되어 있지 않은 밋밋한 모습의 웹페이지라 할지라도.......
우리가 위 부분에 어떤 스타일(CSS)을 어떻게 적용하느냐에 따라
마술처럼 그 모습이 바뀌게 되는 신비한 현상을 체험할 수 있습니다.
DIV 레이아웃 [6-3] : DIV와 CSS로 페이지 레이아웃 잡기 (1)
들어가기 전에
지난 시간에 우리는 웹문서 DIV 블럭화에 대해 공부해 보았습니다.
오늘 이 시간에는 DIV 블럭화가 끝난 웹문서를 가지고
어떻게 DIV 레이아웃 작업을 하는지에 대해 알아 보도록 하겠습니다.
근데.. 강좌를 시작하기에 앞서
지난 시간에 작성했던 dokdo.html 페이지에
다음과 같은 Footer DIV 블럭을 하나 더 추가 하기로 하겠습니다.
------------------------------------------------------------------------------------
<div id="footer">
<p>Copyright © 2009. (주)한국의 섬. All rights reserved.</p>
</div>
------------------------------------------------------------------------------------
그래야지 좀 더 그럴듯한 웹페이지로써의 분위기도 날것 같고...
또 header와 footer가 있는 레이아웃을 많이들 쓰시니까
실전 예제에는 footer가 있는게 더 좋을것 같아서요......
웹브라우저에서는 이렇게 보입니다.
다 되셨나요?
자~ 그럼 이제 본격적으로 오늘의 강좌를 시작해 보도록 하겠습니다.
XHTML = XML + HTML
/* <![CDATA[ */
/* ]]> */
요거 설명 나중에 해드린다고 했었죠?
DIV 블럭화 작업 후, 웹페이지에 디자인을 적용하는 방법을 공부해 보도록 하겠습니다.
오늘은 우선 이 CDATA란 것에 대해 먼저 설명을 하도록 하겠습니다.
CDATA는 Character DATA의 약자로써 글자 그대로 '문자 데이터'라는 뜻을 가지고 있습니다.
이 CDATA는 HTML 이 아니라 사실은 XML에서 사용하는 개념인데요...
어떤 데이터를 '해석(Parse)'하지 않고 그냥 문자 그대로 표현하는 것입니다.
다음과 같은 XML이 있다고 가정해 볼까요?
<div><h1>구지성 *오~!!</h1></div> (구지성 *오~ 진짜 오랜만에 다시 나왔네여~ ^^; )
여기서의 <h1></h1> 은 XML 엘레멘트로써의 h1 이됩니다만
<div><![CDATA[<h1>구지성 *오~!!</h1>]]></div>
위와 같은 경우에는 그냥 아무런 의미없는 문자로써의 <h1>구지성 *오~!!</h1> 가 되는 것입니다.
이렇듯 CDATA 절을 사용하면 XML 파서는 특수한 문자나 기호('<', ' >', '&')를 그냥 아무 의미없는 문자로 여기고 파싱하지 않습니다.
자바스크립트에서 n = 1+1 이라고 하면 n은 2가 되지만
n = "1+1" 이라고 하면 n은 그냥 1+1 이라는 문자열이 되는것과 비슷한 개념이지요.
XHTML 이란 XML과 HTML의 합성어로, 쉽게 표현하자면 XML의 구조를 가진 HTML이란 뜻입니다.
HTML에는 CSS나 자바스크립트 같이 여러가지 다양하고 특수한 기호나 코드들을 사용하는 타입들이 있습니다.
XHTML은 XML의 구조를 갖기 때문에
이러한 스크립트들을 CDATA 절 안에 위치시켜 XML로써 문서를 파싱할 때 에러가 나지 않도록 해야 되는 것입니다.
근데 HTML은 CDATA 절을 사용하지 않기 때문에 /* */ 와 같이 주석문을 써서 감추는 것 뿐이지요.
즉 HTML에서는 CDATA 를 주석문을 써서 감추게 되지만 XML 일 경우에는 CDATA 절이 적용되게 되는 것입니다.
===================================================================================================
**** 참 고 *****************************************************************************************
HTML은 이미 각각의 엘레멘트들 마다 사용하게될 Minimal Content Model 이
CDATA인지 PCDATA인지가 이미 결정되어져 있습니다.
따라서 CSS나 자바스크립트가 아닌 HTML 엘레멘트들 안의 내용들은 CDATA 절을 사용할 필요가 없습니다.
XHTML Abstract Modules 에 대해 더 자세히 알기 원하시는 분들은 여기로....
http://www.w3.org/TR/2008/REC-xhtml-modularization-20081008/abstract_modules.html#s_text (영문)
===================================================================================================
아우 헷갈려......
그냥 쉽게 말하자면......
XHTML은 HTML 로도 쓰이고 XML 로도 쓰일 수 있다.... 뭐 이런 거에여.
지금 가지고 계신 dokdo.html 의 파일 이름을
dokdo.xml 로 변경한 다음
IE 7 으로 열어 보세요.
어떠세요? 우리가 만든 독도 XHTML Stric 문서는 HTML 웹문서임과 동시에 XML 의 구조를 그대로 가지고 있죠?
정리하자면....
1. XHTML은 XML 의 구조를 가지고 있는 HTML 이다....
2. XML에서는 특수 문자나 기호를 CDATA 절 안에 넣어야 한다.
3. HTML에는 CSS나 자바스크립트 처럼 특수 문자나 기호를 사용하는 것들이 있다.
4. 따라서 XML 구조하에서는 이런 것들을 CDATA로 묶어 줘야 한다.
5. 다만 HTML에는 CDATA 라는 개념이 없기 때문에 주석문으로 감춰줘야 하지만 XML 일때에는 주석문안의 CDATA 라도 작동된다.
6. CSS나 자바스크립트 말고 일반 HTML 엘레멘트들은 이미 사용하게 될 컨텐트 타입이 정해져 있기 때문에 CDATA의 사용이 필요 없다.
이해가 되셨나요?
웹문서가 XML의 구조를 가지게 되면 엘레멘트와 어트리뷰트들의 확장성, 또는 이식성이 증가되는 장점이 있으며
Document Object Model나 Ajax 등을 효과적으로 사용할 수 있는 등 프로그래밍적으로도 많은 도움이 됩니다만
이런 내용들은 본 강좌의 범위 밖이라 생략하기로 하고
일단 이해가 가든 안가든 CSS나 자바스크립트는 무조건 CDATA 절로 묶어줘야 한다는것만 기억하고 계세요.
(이렇게 간단히 한줄로 끝날 수 있는 얘기를 왜 저렇게 복잡시럽게 했을까요?...... 미스테리입니다..... ^^;; )
CSS 예)
<style type="text/css">
/* <![CDATA[ */
/* ]]> */
</style>
자바스크립트 예)
<script type="text/javascript">
// <![CDATA[
// ]]>
</script>
준비 되셨나요?
자. 이제 본격적인 CSS 작업을 시작해 보도록 하겠습니다.
우선 다음을 봐주세요.
우리가 지금부터 작업하게 될 dokdo.html 페이지의 모습입니다.
위에 보시면 '여깁니다. 여기...' 라는 부분 있죠?
그곳에다가 지금부터 CSS 작업을 시작할 겁니다.
HTML 은 하나도 건드릴게 없습니다.
오직 CSS 작업만 합니다.........
DIV 레이아웃 작업의 시작
DIV 레이아웃 작업을 할때 각각의 DIV가 어떤 모습인지를 직접 눈으로 보면서 작업하면 더 쉽겠죠?
일단 각각의 DIV에 배경색을 설정하여 그 모습을 확인해 보도록 하겠습니다.
#header { background-color:red; }
#menu { background-color:silver; }
#content { background-color:orange; }
#footer { background-color:pink; }
(오렌지나 핑크는 올바른 Color Value가 아닙니다만 편의상 알아보기 쉽게하기 위하여 사용하였습니다.
어차피 위의 div 배경색들은 작업을 진행하면서 최종적으로는 모두 제거될 예정입니다.)
웹브라우저로 보면 일케 보입니다.
그리고 몇가지 기본설정을 하도록 하죠.
body {
font-family:"돋움","굴림",verdana,arial,sans-serif;
font-size:0.75em;
margin:0;
}
<body></body> 안에 들어있는 모든 내용들의 글씨 폰트를 정한 다음 그 크기를 브라우저 기본 글씨 크기의 0.75em 으로 설정했습니다.
브라우저의 기본 글씨크기는 12pt (16px) 이니까 0.75em 이면 12px 이 되겠네요...
body 의 margin은 0으로 했습니다.
웹브라우저들 마다 body 엘레멘트의 기본 마진 크기가 약간씩 차이 나기 때문에
만약 body에 마진을 줄 필요가 있다면
body 자체에 마진을 주기 보다
그 하위 엘레멘트의 마진 크기를 조절하는 방법이 더 좋습니다. (dokdo.html 이라고 가정한다면 wrapper div 가 되겠네요...)
따라서 방탄웹을 구축하기 위해서라도 body 마진 크기를 일단 0 으로 하고 시작하는 것입니다.
전체 문서 가장 자리의 여백이 없어졌죠?
맨 위의 여백은 body 의 마진 때문에 생긴게 아니라 h1 엘레멘트의 마진 때문에 생긴 겁니다.
IE로 보면 윗쪽 여백도 없지만 그건 IE가 후져서 그래여................... ( 표현이 참....-_-'' )
그 다음에는 웹페이지 내의 모든 이미지들의 border 두께를 0 으로 지정합니다.
img {
border:0; ( 또는 border:none; )
}
또는 이처럼 링크가 걸린 이미지들만 border 를 0 으로 설정해도 무방합니다.
a img {
border:0; ( 또는 border:none; )
}
XHTML Stric 에서는 <img src="sample.gif" border="0" /> 처럼 border 어트리뷰트를 직접 사용할 수 없습니다.
만약 border="0" 이라는 속성이 없는 상태에서 이미지에 <a><img src="sample.gif" /></a>와 같이 앵커가 걸리게 되면
보기 싫은 파란색 border가 자동적으로 생기게 됨으로
그것을 방지하기 위해 CSS에서 일괄적으로 이미지들의 border 두께를 0 으로 지정해 놓는 것입니다.
(위 그림 같이 이미지에 링크가 걸렸을 때 border:0; 설정이 되어 있지 않으면
파란색 테두리가 자동적으로 생깁니다. 아주 보기 싫죠....)
마지막으로 전체 레이아웃의 최소 width 를 지정합니다.
#wrapper {
min-width: 1000px;
}
이렇게 하면 wrapper 의 width가 최소한 1000px 로 이하로는 작아지지 않기 때문에
(1000px 보다 화면이 작아지면 스크롤바가 생깁니다.)
레이아웃의 가로 사이즈가 너무 많이 작아져서 디자인이 깨지는 것을 방지 할 수 있습니다.
==========================================================================================
**** 참 고 ********************************************************************************
min-width 프로퍼티는 IE6 에서는 작동하지 않기 때문에
MS expression을 사용하여 별도의 최소 width 값을 설정해 주어야 합니다.
이것에 대해서는 나중에 보다 더 상세한 설명을 해드리도록 하겠습니다.
==========================================================================================
자~ 지금까지 작업한 기본 설정 CSS입니다.
#header { background-color:red; }
#menu { background-color:silver; }
#content { background-color:orange; }
#footer { background-color:pink; }
body {
font-family:"돋움","굴림",verdana,arial,sans-serif;
font-size:0.75em;
margin:0;
}
img {
border:0;
}
#wrapper {
min-width: 1000px;
}
그럼 이제 각 DIV들의 모양과 자리를 바꿔 보도록 하겠습니다.
DIV 의 형태와 위치 변경
제일 먼저 header 의 h1 입니다.
#header h1 {
margin:0;
padding:50px;
font-family:"굴림";
font-size:2em;
}
id 가 header 인 div 안에 있는 h1 을 설정하는 것입니다.
h1 의 크기가 달라지면 이것을 감싸고 있는 header div 도 함께 크기가 변하게 되니까...
본 예제의 경우에는 #header 자체를 변경하기 보단 h1 을 변경하는 것이 더 좋습니다.
일단 마진을 0으로 주었구요.
패딩을 50px 로 하였습니다.
글씨체는 굴림으로 하고
사이즈는 2em 으로 기본 글씨크기보다 더 크게 잡았습니다.
==========================================================================================
**** 참 고 ********************************************************************************
padding 이나 margin 을 주는 방법은 여러가지 입니다.
1. margin: 5px 10px 15px 20px;
일케하면 top 이 5px, right 이 10px, bottom 이 15px, left 가 20px 이 됩니다.
윗쪽 부터 시계방향인거죠...
2. margin: 5px 10px;
일케하면 top 과 bottom 이 5px, right 과 left 가 10px 이 됩니다.
윗쪽 부터 서로 바라보는 두 방향이 한쌍이 되는 것입니다....
3. margin: 5px;
일케하면 사방이 5px 이 됩니다. 간단하죠...
4. margin: 5px auto;
일케하면 위아래는 5px 이 되고 왼쪽 오른쪽은 반반이 됩니다...
DIV 블럭을 가운데 정렬 할때 이 auto를 주로 사용합니다.
5. 다음의 것들은 굳이 설명 드리지 않아도 아시겠져?
margin-top: 5px;
margin-right: 5px;
margin-bottom: 5px;
margin-left: 5px;
==========================================================================================
==========================================================================================
**** 중요개념!! 별 5개짜리~!!!! ***********************************************************
******************************************************************************************
h1 에 사방으로 패딩을 50px 이나 줘서 그 크기를 크게 만드는 것이 가능한 이유는
h1 엘레멘트가 Block-Level Element 이기 때문입니다.
==> div, p, h1~h5, form, ul 등과 같은 모든 Block-Level Element 들은
width 와 height, margin 과 padding 으로 그 크기를 조절할 수 있습니다.
하지만 span, a 등과 같은 Inline-Level Element 들은 높이 개념이 없기 때문에
마음대로 크기 조정을 할 수가 없습니다.
만약 어쩔 수 없이 Inline-Level Element 의 크기를 조정 해야만 한다면
span { display: block; } 처럼 display 프로퍼티를 이용하여
해당 Inline-Level Element 를 Block-Level Element 로 전환한 후
width 와 height, margin 과 padding 을 지정하시면 됩니다.
단, Block-Level Element 로 전환한다는 뜻은 간단히 말해 span 이 div 랑 똑 같아진다는 말입니다. 이점을 꼭 유의하세요~
Block Modules 에 대해 더 자세히 알기 원하시는 분들은 여기로....
http://www.w3.org/TR/1999/xhtml-modularization-19990406/xhtml_modules.html#s_block (영문)
==========================================================================================
자 어쨌든 CSS 설정을 한 header를 웹브라우저로 보면 일케 바뀐것을 알 수 있습니다.
header의 빨간색 영역과 제목 글씨의 크기가 커졌죠?
이제야 좀 header 로써의 느낌이 나네요...
그리고 아까 body 의 마진을 0 으로 했을 때 남아있던 맨 위 여백도
h1 마진을 0 으로 하고나니까 마저 없어졌네요.
절대 헷갈리시면 안되여...
위의 빨간색은 header div 의 배경색입니다. h1의 배경색이 아니에여...
근데 header div 안에 들어 있는 h1의 padding 을 사방으로 50px 이나 주어서 그 크기가 커졌기 때문에
h1을 감싸고 있는 header div 의 크기도 덩달아서 커진 것 뿐입니다.
만약 여기서 h1 에 검정 배경색을 지정하면 div 의 빨간색은 h1 의 배경 밑에 묻혀서 안보이게 됩니다.
요 개념 자~알 이해 하셔야 해여~!!!!!