47472 Members __ Online

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

DIV 레이아웃 [6-1] : 적격 웹문서를 만들자

posted by 라부
date : , update :
hit : 29925, scrab : 0 , recommended : 16 , attach : 3

연말이라서 그런지 주변 분위기는 다들 조금씩 들떠 있는것 같은데 저는 이상하게 그냥 담담하네요....

한살 두살 나이를 먹어가면서 크리스마스의 마법에서 조금씩 풀려나고 있는 기분입니다. ㅜㅜ

 

 

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

 

 

DIV 레이아웃에서 정작 DIV 레이아웃은 중요하지 않다.

 

 

자, 이제 우리는 웹표준에 대한 기초적인 개념 공부를 끝내고

모두가 바라는 실전 DIV 레이아웃에 대해 배워 보려고 합니다.

 

DIV 레이아웃 작업은

'HTML'이라고 하는 하나의 '웹문서'를

'웹브라우저'라고 부르는 화판위에서 문서의 모양을 '재구성' 하는 작업이라고 볼 수 있습니다.

(CSS를 사용해서 말이죠....)

 

아무런 디자인이 되어 있지 않은 투박한 워드문서를

예쁜 디자인과 그림등으로 치장한 파워포인트 문서로 변경하는 것과 같은 맥락이라고 보시면 이해하시기가 수월할 것입니다.

 

'HTML은 문서다' 라는 것은 본 강좌 초기부터 몇번씩이나 강조했던 얘깁니다.

(그만큼 아주 아주 중요한 개념이라는 뜻이겠죠?)

 

문서라는 것은 타인에게 전달하고자 하는 것을 말이 아닌 글로써 적어 놓은 것을 의미합니다.

즉, 문서의 목적은 '내용의 전달'이지 '디자인'이 아니라는 거죠.

디자인은 사실 목적이라기 보다는 방법에 더 가깝습니다.

 

별로 예쁘지 않은 문서라 할지라도 작성자가 전달하고자 하는 뜻이

사람들에게 충분히 잘 전달되어졌다면

그 문서는 문서로써의 기능을 100% 달성한 것입니다.

 

HTML/XHTML은 문서의 내용을 담고

CSS와 Image 들로 그 내용을 예쁘게 꾸며준다... 라는 개념은 이제 다들 이해하고 계시죠?

이 얘기는 반대로 CSS와 Image 가 없어도 그 문서의 내용 자체는 정확하게 전달 될 수 있어야 한다.... 는 의미입니다.

 

DIV 레이아웃이라는 것이

단지 테이블로 이미지를 쪼개서 작업하던걸

DIV로 쪼개서 작업하는 것 정도로 여기신다면 오산이라는 말입니다. 

 

기껏 DIV로 2단, 3단, 4단 레이아웃을 만들고 나서... 그 안에 다시 테이블로 이미지를 쪼개서 넣거나

통짜 이미지를 넣어 사이트를 만들 거라면

그냥 테이블로 작업하시는게 더 나을 수 있습니다. 굳이 DIV로 레이아웃 작업 하실 필요 없습니다.

 

'그럼 DIV로 다시 쪼개서 넣는건 괜찮나요?' 라고 물어보지 마세요....

쪼갠다... 는 강박 관념을 제발 버리시기 바랍니다.

포토샵에서 전체 디자인을 먼저 한 후,

그것을 웹페이지로 전환하는 식의 작업 순서로는

이 '쪼갠다'는 강박 관념에서 벗어날 수 없습니다.

 

'우짜쓰까... ㅜㅜ... 포토* 작업한걸 쪼개지 않고 어케 작업을 해야될지 도저히 감이 잡히질 않아요....' 라고 고민되시는 분들은

다음의 설명을 잘 들어 주세요.

1. 하나의 웹페이지를 만드실 때 '디자인' 부터 생각하지 마시고 문서의 '내용'을 어떻게 구성할지를 생각하셔야 합니다.

2. 포토*을 먼저 실행하지 마시고 워드 프로그램을 여세요.

   그리고 전체 사이트의 내용들을 제목, 목차, 내용 등등... 일반 문서 양식에 맞춰 '문서'로 작성하신 후

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 페이지:

 

6101

 

 

2 페이지:

 

6102

 

 

(예제에 사용된 문서는 본 글에 첨부하였으니 다운 받으셔서 함 살펴 보시기 바랍니다.)

 

위의 워드 문서를 보시면

문서의 '제목'과 '목차', 그리고 해당 목차에 대한 '내용'으로 구성되어 있는 것을 알수 있습니다.

그리고 전체적으로는 독도와 울릉도, 두 페이지 뿐이지만 이것은 단순한 예제기 때문에 나머지 항목들을 생략한 것 뿐입니다.

실제 프로젝트라면 제주도, 마라도, 거제도에 대한 내용들도 당연히 있어야 합니다.

그리고 편의상 하나의 목차에 대한 내용이 하나의 페이지 안에 다 들어가도록 간결하게 구성하였습니다.

 

이제 웹사이트에 들어갈 내용(컨텐츠)들이 모두 정리 되었으니

이 문서를 HTML/XHTML 페이지로 동일하게 만드는 작업인 3번 단계로 넘어가 보도록 하겠습니다.

 

 

 

 

일반 문서의 내용을 HTML 페이지로 전환하자

 

 

일단 먼저 가장 쉽게 할 수 있는 것은 HTML/XHTML 파일명을 정하는 것입니다.

1페이지에 대한 내용은 독도에 관한 것이니 dokdo.html 이라고 하는 파일이 필요할 것이고

2페이지에 대한 내용은 울릉도에 관한 것이니 ullungdo.html 이라고 하는 파일이 있으면 될것 같습니다.

나머지도 jejudo.html, marado.html, geojedo.html 뭐 다 이런식이겠죠.

 

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

*** 참 고 ************************************************************************************************

HTML 파일 이름을 어떻게 정할 것이냐... 는 웹사이트 기획 단계에서부터 생각하셔야 되는

아주 중요한 사안중에 하나입니다.

왜냐하면 이 HTML 파일 Naming 은 검색엔진 최적화(SEO: Search Engine Optimization)와 아주 밀접한 관계가

있기 때문입니다. 특히 구글 검색에서 랭킹을 더 올리고 싶으시다면 더욱 더 중요하게 생각하셔야 하구요.

이 부분에 대해서는 나중에 본 블로그의 'SEO 검색엔진최적화' 에서 별도로 다뤄 보도록 하겠습니다.

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

 

dokdo.html 파일에 다음과 같은 기본 셋팅을 합니다.

 

6103

 

기본 셋팅하는거 이미 다 배운거니까 따로 설명은 안드리겠습니다만
CSS 에서

 

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

 

요 부분은 나중에 따로 함 설명 드리도록 하겠습니다. 오늘은 그냥 패스~~~~

 

어쨌거나 이렇게 준비된 기본 셋팅 위에

워드 문서의 내용을 HTML/XHTML 로 전환해 보도록 하겠습니다.

 

'한국의 섬' 이라는 것은 전체 사이트의 제목이라고 보면 되니까 <h1> 을 쓰면 되겠고

'목차' 는 문서에서 보이는대로 그냥 똑같이 표현하면 됨으로 <ul> 을 쓰면 될 것 같습니다.

'독도' 는 큰 제목 다음으로 중요한 해당 페이지의 제목임으로 <h2> 를 쓰면 딱이겠네요.

그 외 나머지 사진이나 설명 글들은 모두 <p> 안에 위치시키면 작업 끝~!!!

 

그럼 이제 이렇게 작업한 코드를 한번 살펴 볼까요?

  

6104

 

 

그리고 이렇게 작업한 dokdo.html 을 파이어폭스로 한번 확인해 보겠습니다.

 

 

 

 6105

 

 

어떠신가요?

워드 문서의 모습과 거의 똑같지요?

다른점이라고는 '목차'의 각 항목에 링크를 걸어준거 밖에 없습니다.

뭐 웹문서니까 이건 당연한 거겠죠..

 

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) 버튼을 눌러 보세요.

 

 

6106

 

 

 

오~ XHTML 1.0 Strict 문법 검사를 오류없이 통과했다고 나옵니다.

드디어 우리는 XHTML 1.0 Strict 타입의 적격 웹문서 (Well-Formed Web Document)를 갖게 된 것입니다.

이제 HTML/XHTML 문서에 디자인을 입힐 차례가 온거죠.

 

다음 시간에는 오늘 작업한 dokdo.html 페이지를 가지고

4번과 5번 단계에 걸쳐있는 DIV 레이아웃 작업을 계속 진행해 보도록 하겠습니다.

 

 

 

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

 

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

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

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









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

DIV 레이아웃 [6-2] : 웹문서 행간 나누기 (DIV 블럭화 작업)
DIV 레이아웃 [5] : 웹표준 작업시 꼭 필요한 도구들





%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