47091 Members __ Online

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

DIV 레이아웃 [6-3] : DIV와 CSS로 페이지 레이아웃 잡기 (1)

posted by 라부
date : , update :
hit : 35856, scrab : 0 , recommended : 17 , attach : 1

담배 끊은지 벌써 한달이 지났습니다.

이번에는 진짜 끊을 수 있을것 같은데여...... 독한 넘이라고 욕하지 마시길.....

그래도 우리.... 하던 공부는 계속해서 독하게 합시당.

 

 

 

 

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

 

 

들어가기 전에

 

지난 시간에 우리는 웹문서 DIV 블럭화에 대해 공부해 보았습니다.

오늘 이 시간에는 DIV 블럭화가 끝난 웹문서를 가지고

어떻게 DIV 레이아웃 작업을 하는지에 대해 알아 보도록 하겠습니다.

 

근데.. 강좌를 시작하기에 앞서

지난 시간에 작성했던 dokdo.html 페이지에

다음과 같은 Footer DIV 블럭을 하나 더 추가 하기로 하겠습니다.

 

------------------------------------------------------------------------------------

<div id="footer">
    <p>Copyright &copy; 2009. (주)한국의 섬. All rights reserved.</p>
</div>

------------------------------------------------------------------------------------

 

6301

 

그래야지 좀 더 그럴듯한 웹페이지로써의 분위기도 날것 같고...

또 header와 footer가 있는 레이아웃을 많이들 쓰시니까

실전 예제에는 footer가 있는게 더 좋을것 같아서요......

 

웹브라우저에서는 이렇게 보입니다.

 

6302

 

 

다 되셨나요?

 

자~ 그럼 이제 본격적으로 오늘의 강좌를 시작해 보도록 하겠습니다.

 

 

 

 

XHTML = XML + HTML

 

지지난번 강좌에서

 

/* <![CDATA[ */
  
/* ]]> */

 

요거 설명 나중에 해드린다고 했었죠?

오늘은 우선 이 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 으로 열어 보세요.

 

6303

 

 

어떠세요? 우리가 만든 독도 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 페이지의 모습입니다.

 

6304

 

위에 보시면 '여깁니다. 여기...' 라는 부분 있죠?

그곳에다가 지금부터 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 배경색들은 작업을 진행하면서 최종적으로는 모두 제거될 예정입니다.)

 

웹브라우저로 보면 일케 보입니다.

 

6305

 

 

그리고 몇가지 기본설정을 하도록 하죠.

 

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 으로 하고 시작하는 것입니다.

 

6306

 

전체 문서 가장 자리의 여백이 없어졌죠?

맨 위의 여백은 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 으로 지정해 놓는 것입니다.

6307

(위 그림 같이 이미지에 링크가 걸렸을 때 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를 웹브라우저로 보면 일케 바뀐것을 알 수 있습니다.

 

6308

 

header의 빨간색 영역과 제목 글씨의 크기가 커졌죠?

이제야 좀 header 로써의 느낌이 나네요...

 

그리고 아까 body 의 마진을 0 으로 했을 때 남아있던 맨 위 여백도

h1 마진을 0 으로 하고나니까 마저 없어졌네요. 

 

절대 헷갈리시면 안되여...

위의 빨간색은 header div 의 배경색입니다. h1의 배경색이 아니에여...

근데 header div 안에 들어 있는 h1의 padding 을 사방으로 50px 이나 주어서 그 크기가 커졌기 때문에

h1을 감싸고 있는 header div 의 크기도 덩달아서 커진 것 뿐입니다.

만약 여기서 h1 에 검정 배경색을 지정하면 div 의 빨간색은 h1 의 배경 밑에 묻혀서 안보이게 됩니다.

요 개념 자~알 이해 하셔야 해여~!!!!!

 

 

(아쉽지만 다음 시간에 계속~~~~)

 

 

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

 

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

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

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









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

가.DIV로 쉽게 레이아웃 잡기 준비과정 :)
DIV 레이아웃 [6-2] : 웹문서 행간 나누기 (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