47256 Members __ Online

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

DIV 레이아웃 [1] : 홈페이지 레이아웃 작업. 이제는 DIV로 하자.

posted by 라부
date : , update :
hit : 31548, scrab : 1 , recommended : 18

나모나 드림위버와 같은 위지윅 프로그램을 사용하여 웹디자인을 하는 많은 사람들의 경우 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 문법에 대해서도 자연스럽게 배우실 수 있을 것입니다.

 

걱정 뚝!

 

 

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

 

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

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

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









웹표준, div
댓글 5 | 엮인글 0

DIV 레이아웃 [2-1] : div, p, span 태그들의 차이점을 아시나요?
웹표준 강좌 06_ 문서구조





%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