웹페이지 레이아웃 방법론(webpage layout methodlogy)

바햐흐로 2014년이 코앞이다.

 

웹페이지를 마크업하다보면 많은 착오가 생기기 마련

대부분 크로스 브라우징이 문제일 터

그래서 한번 포스팅을 시작한다.

레이아웃 구성 방법론에 대해 생각해본다.

 

 

1. table 코딩

고전의 전형적인 사이트를 표방하는 이방식은

table wrapper와 table container와 align속성으로 레이아웃을 구성하는데

엄밀히, 표를 표시하는 html요소 개념이라 w3c의 웹표준에는 어긋나는 잘못된 웹의 형태이다.

 

::장점::

브라우져 호환성이 좋다.

정형화된 틀로 나이지긋한 분들은 오히려 선호하는 경우도 있다.

세로정렬(vertical align)이 매우 편하다/이것이 핵심일지도 모른다.

 

::단점::

레이아웃이 틀에 박혀버린다. 예를 들어 마크업을 수정하지 않으면, 절대로 레이아웃 형태를 바꿀 수 업다.

코드가 지저분하다. 마크업의 양이 많아진다 tr td/더욱히 colspan을 나누지 않고, 테이블의 무분별한 사용하면 더욱 심각해진다.

반응형이나 적응형 웹은 구현하기 곤란해진다.

 

 

2. div 코딩

이것은 웹2.0 혹은 웹표준이 대두되면서 div로 block을 나누고, css float속성을 활용하여 구현하는 방식

table에서 div로 바꾸는 일이 한때 이슈였다.

 

::장점::

css를 활용하여 레이아웃 변형가능/마크업(코드)과 css(디자인)분리

document의 형태로 css없이도 잘보이는 하나의 문서

세로정렬(vertical align)에 애로사항이 발생/세로정렬이 필요한 게 잘못된 거지만, 디자이너는 봐주지 않으니..

max-width 등을 활용하여 반응형 웹제작에 용이/fluid layout 등

 

::단점::

호환성 문제에 따른 csshack이 필요한 경우도 있다.구버전 ie가 문제다.

css에 대한 한단계 높은 지식 요구/css속성에 대한 이해도

 

 

3. section 코딩

html5의 등장과 함께, div가 좀더 구체화된 의미있는 형태로 바뀐것일뿐, 위와 상동

 

::장점::

div코딩의 장점을 그대로 가져온다.

html5에 최적화(?)

미래지향적 css3,html5 코딩

단순히 보이는 시각적 웹이 아닌, 매우 의미있는(sementic)한 개념적인 문서화/bold와 strong의 차이!

 

::단점::

div코딩의 단점도 그대로 가져온다.

modernizr같은 크로스브라우징 helper를 써야해서, 무거워진다(?)

 

 

 

 

 

이글은 엄밀히 필자의 생각일뿐이다.

 

section 코딩을 수월하게 진행하는게 미래지향적으론 좋지만, 브라우저 환경은 그렇지 못하기에 모든 문제는 야기되었다.

어떻게 보면 구식방식이 안전하고 좋은 방법이 될지도 모른다.