47472 Members __ Online

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

DIV 레이아웃 [6-2] : 웹문서 행간 나누기 (DIV 블럭화 작업)

posted by 라부
date : , update :
hit : 40515, scrab : 0 , recommended : 13 , attach : 1

안녕하세요. 여러분들...

2009년 새해가 밝았습니다.

건강하고...

행복하고...

풍족하고...

보람있는 한해가 되시길 기원하겠습니다.

 

저도 올해 작심하고 담배 끊은지 어언 6일째가 되었습니다.

이번에는 꼭! 완전히! 끊을 수 있도록 응원해 주세염.

......

......

 

 

 

(요즘 열씨미 하고 있는 Mirror's Edge 라는 겜임데 넘 잼납디다.)

 

 

자.. 그럼.... 

새해를 맞아 더욱 새롭고 활기찬 기분으로 오늘의 강의를 시작해 보도록 하겠습니다.

(겜하느라 강좌 업데이트가 쪼금 늦었어여... ^^;;....)

 

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

 

워드 문서에는 행[行] 만이 존재한다.

 

엑셀 문서에는 행[行]과 열[列]이 있습니다.

이 행과 열을 이용하여 표도 만들고 DB도 만들고 서식도 만들고 여러가지 다양한 작업을 하게 되지요.

 

하지만 워드 문서에는 이중에서 열의 개념이 없습니다.

그저 위에서 아래로 문자를 적어 내려가는 행의 개념만 있지요.

 

근데 이 워드문서의 행이란것도 엑셀의 행과는 그 성격이 완전히 다릅니다.

엑셀의 행에는 1행, 2행... 이런식으로 고유 영역과 위치가 지정되어 있지만

워드문서에는 이런게 없습니다.

그냥 행간에 간격을 두거나 Horizontal Bar (가로 구분선)를 중간에 끼어 넣어서

시각적으로 내용을 구분하게 되는 것이죠.

여기서 중요한 것은....

워드 문서에서의 행은 문서 작성자가 원하는데로 행간이 구분되어진다는 것입니다. 

 

결론적으로 워드 문서는 

옆으로 쪼갤수는 없어도 위/아래로는 나눌수 있다... 뭐 이런 얘기죠...

 

그럼 지난 시간에 우리가 사용했던 워드 문서를 다시한번 보도록 하겠습니다.

 

 

 6201

 

 

워드 문서에는 열의 개념이 없기 때문에

만약 '위의 워드 문서를 내용별로 나누어 구분하여 보자...' 라고 했을 때

다음과 같이 할 수는 없습니다.

 

 

 6202

 

 

오직 아래와 같이 행간을 구분지은 모습으로 문서안의 내용들을 분류하게 되는 것입니다.

 

 

6203

 

 

 

 

 

웹문서 행간 나누기 (DIV 블럭화 작업)

 

지난 시간에 우리는 잘 정리된 워드 문서를 HTML/XHTML 문서로 치환하는 것을 공부했습니다.

이 공부를 통해 다음과 같은 정의가 성립된다는 것을 알았죠.

 

워드 문서 == HTML 웹문서

 

이것은 반대로 생각해도 역시 마찬가지 의미를 가집니다.

 

HTML 웹문서 == 워드 문서

 

그렇다면 지난 시간에 작성한 독도에 관한 HTML 문서(dokdo.html)도

위의 워드문서 처럼 내용별로 나누어 구분할 수가 있다는 뜻이 됩니다.

이렇게 말이죠....

 

6204

 

 

자, 이제 뭔가 슬슬 입질이 오기 시작하면서

DIV 레이아웃에 대한 감이 잡혀지는것 같은 묘한 느낌이 들지 않나요?

 

뭐든지 한번 감을 잡으면 그 다음부터는 공부가 아주 쉽습니다.

그러니 이참에 아예 쐬기를 박아 드리지요.

 

지난 첫 강좌 기억 나시나요?

 

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

 

이 강좌에서 DIV가 어떻게 생긴 녀석인지 배웠었죠...

그때 사용했던 그림을 한번 다시 보도록 하겠습니다.

 

짜잔~~~~

 

6205

 

 

아~!!!!!! 라는 탄성이 저절로 터져 나오시는 분들.....

진도 열심히 따라온 굿 스튜던트들 이십니당.

 

사실 첫강좌에서 DIV 라는 녀석의 모습을 보고....

왜 DIV는 테이블 처럼 화려하지 못하고 저렇게 단순한 모습일까.... 라는 의문을 가지신 분들도

분명히 계셨으리라 생각합니다만

DIV의 목적이

위에서 워드 문서를 가지고 한 것처럼

웹문서의 내용을 작성자가 의도한데로 행간을 구분하여 블럭화 시키는 것이라는 걸 염두한다면

저런 단순한 모습이... 지극히 자신의 역활에 충실한 모습이란걸 알수 있습니다.

 

위의 두 그림을 합친 모습을 보시면 더욱 이해가 빠르실 겁니다.

 

6206

 

 

이 그림을 좀 더 개선시켜보면 HTML 상에서는 어떤 모습이 될지 보다 더 정확하게 알 수 있습니다.

다음과 같이 말이죠...

 

6207

 

 

어떠세요? 이제 DIV가 어떤 일을 하는 엘레멘트인지 확실히 감 잡으셨죠?

이것을 dokdo.html 페이지에 적용하여 실제 HTML 코드로 작성해 보면 다음과 같습니다.

 

6208

 

(위의 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로 블럭화 작업을 마친 독도 페이지를 웹브라우저로 다시한번 보도록 하겠습니다.

 

6209

 

 

웹브라우저로 볼때는 확실히 별반 차이가 없죠?

위와 같이... 디자인이라고는 전혀 되어 있지 않은 밋밋한 모습의 웹페이지라 할지라도....... 

  

6210

 

우리가 위 부분에 어떤 스타일(CSS)을 어떻게 적용하느냐에 따라

마술처럼 그 모습이 바뀌게 되는 신비한 현상을 체험할 수 있습니다.

 

다음 시간에는... 이부분에 대해..... ...

DIV 블럭화 작업 후, 웹페이지에 디자인을 적용하는 방법을 공부해 보도록 하겠습니다.

그때까지 CSS 다시한번 더 복습하시면서 기둘려 주세요.

 

그럼 모두들 안녕히 계시구요...

전... 이만.....

다시 겜세상으로 고~고~씽~!!!!

 

 

 

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

 

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

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

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









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

DIV 레이아웃 [6-3] : DIV와 CSS로 페이지 레이아웃 잡기 (1)
DIV 레이아웃 [6-1] : 적격 웹문서를 만들자





%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