Creative Commons License

Microsoft .NET

닷넷!시작하기
닷넷! Ver 2.0~
닷넷!스킬업
웹개발
윈폼개발
실용모듈개발
Tip & Tech
하루 한 문법

Microsoft .NET 개발자들을 위한 공간입니다. 기초강의에서 부터 고급 기술 정보 및 팁등을 다루도록 하겠습니다.

.

웹개발

이제 웹 기반 응용개발 지식은 거의 필수적으로 요구되는 시대입니다. 구체적인 웹 사이트 개발은 아니더라도 거시적인 웹 기반 서비스에 대한 지식 배양을 위해 할 것이 참 많네요 ^^

[Web Page Layout] Table VS CSS

작성자 : 박종명
최초 작성일 : 2008-06-25 (수요일)
최종 수정일 : 2008-06-25 (수요일)
조회 수 : 3918

얼마전 아는 후배로 다음과 같은 예기를 들었다.

'제가 아는 디자이너 한분은 웹사이트 개편 때 CSS 파일만 수정하여 완전히 새로운 페이지를 만들는걸 봤습니다'
 
당시 난 웹사이트 개발을 약 3년 정도 손을 놓고 C/S 기반 개발을 한창 하던 중이었다.
그러나 수 년간 웹 개발을 해 본 입장에서 잘 이해가 되지 않는 부분이 있었다.
물론 페이지의 레이아웃과 CSS 는 웬지 디자이너 영역에 가까워 깊이 있는 경험이 없는 탓도 있었다.
 
'페이지의 레이아웃을 CSS 로만 관리한다? 색상 및 폰트, 배경이미지 등은 당연할 수 있지만 페이지 특정 영역들의
위치까지 제어한다?'


잠시의 의문만 가진채 생각없이 스쳐 지나쳤다.
(웹 사이트 개발을 주 업무로 하지 않은 시기라 깊은 관심을 두지 못했다)
 
근데, 마침 마르코 밸리나소의 ASP.NET 2.0 Website Programming 을 보다가 이와 관련된 내용이 나오는 것이었다.
'레이아웃 제어에 HTML 표 사용을 피하라' 라는 소 제목으로 약 두 페이지에 걸쳐서 소개되어 있다.
 
그가 이렇게 말한 이유는 다음과 같다.
1. W3C 는 "표는 표 형식의 정보('데이터용 표')를 표시하는 데에만 사용해야 한다." 라고 공식적으로 언급하고 있다(www.w3c.org/tr/wai-webcontent)  

2. Screen reader(시각 장애인을 위해 화면을 읽어 주는 소프트웨어)는 표가 사용된 페이지 레이아웃의 내용을 정확히 읽을 수 없다.  이는 공공기관 , 금융기관등 공공성을 띈 웹사이트의 경우 상당히 중요한 부분일 수 있다.

3. 사이트 개발이 단축되고 보수성이 용이해 진다.

4. CSS 는 클라이언트로 한번만 다운로드 되면 그 다음부터는 클라이언트 메모리에 캐싱된다. 즉 페이지의 응답속도가 빨라진다. (Table 의 경우 페이지 요청시 마다 매번 다운로드 된다)

5. 동적인 페이지 레이아웃 변경이 가능하다.  CSS 파일만 변경하면 레이아웃을 변경할 수 있으므로 ...

6. CSS 는 PDA 나 스마트 폰등의 모바일 기기를 지원한다. 여러 종류의 플랫폼에 유연한 대처가 가능하다
 
 
이와 관련해 웹사이트에 좋은 글을 하나 발견했다.
Div와 CSS 를 이용한 웹 표준 코딩의 장점
 
이 글에는 Table 로 작성된 페이지 레이아웃과 CSS 로 작성된 페이지 레이아웃의 실행결과와 차이점등을 짧지만
강력하게 비교 하고 있다. (꼭 한번 읽어 보도록 하자)
 
나 역시 테스트 삼아 한번 샘플을 작성해 봤다. 보통의 페이지 레이아웃을 다음과 유사하다

이 페이지에 대한 전체 레이아웃을 DIV 와 CSS 로 표현한 예제이다.
- page.htm -

<link href="style.css" text="text/css" rel="stylesheet">

 

<div id="header">

  Header

</div>

<div id="left">

  Left

</div>

<div id="body">

  Body

</div>

<div id="right">

  Right

</div>

<div id="footer">

  Footer

</div>


 
- style.css-

#left

{

   position: absolute;

   top: 184px;

   left: 0px

   width: 184px;

   height: 500px

   font-size: 20px; 

   border:4 orange dashed;

   background-color:gold;  

}

 

#right

{

   position: absolute;

   top: 184px;

   right: 0px;

   width: 184px;

   height: 500px

   font-size: 20px;

   border:4 solid black;

   background-color: red;

}

 

 

#header

{

   position: absolute;

   top: 0px;  

   width: 100%;

   height: 200px

   font-size: 20px;

}

 

#footer

{

   position: absolute;

   bottom: 0px;

   width: 100%;

   height: 200px

   font-size: 20px;

   background-color; red;

}

 

#body

{

   position: absolute;

   top: 184px;

   left: 184px;

   font-size: 20px;

   background-color; red;

}


 
html 페이지의 코드는 확실히 줄어들었다.
css 는 좀 과다한 듯 하나(테스팅을 위한 기교성 코드가 좀 있다--;) 이는 클라이언트에 캐싱되기 때문에 페이지 응답속도에 영향을 미치지 않는다.
 
웹 개발자들이 간과하기 쉬운 페이지 레이아웃과 CSS 및 Html 등은 이런 이슈 하나만 봐도 더 이상 무시할 수 없는 요소가 된다. 사실 디자이너나 웹 개발자 모두 html,css,javascript 에 능통하는 것이 좋다는 개인적인 견해를 가지고 있다. 최소한 웹 개발을 한다면 말이다.
 
사실 이 내용은 이미 대부분의 웹 개발 관련자 분들이 아는 내용일 수 있다.
다 아는 내용을 주저리 주저리 하는 것은 개인적으로는 신선한 충격이었기 때문이다 ^^;

이름
비밀번호
홈페이지
VM <- 왼쪽의 문자를 오른쪽 박스에 똑같이 입력해 주세요