안녕하세요. 세티 입니다. 요즘 글쓰기가 매우 뜸합니다.^^
인터넷에 좋은 자료들이 너무 많다 보니 글 하나를 쓸려고 해도 어떤 주제로 글을 쓸까 하는 고민을 하게 됩니다. 그렇게 고민하다 보면 글 쓸 시기를 놓치기도 하고, ‘나중에 써야지.’ 했다가 기억도 못하고 그럽니다.^^;; 그것도 그렇고 지난 1년간은 닷넷을 다룰 일이 없었습니다.그 1년간 웹 표준 기술(HTML+CSS+JavaScript)과 관련된 일을 했는데 그 곳에서 많이 배웠습니다.
많은 기회와 관심을 보여준 곳이었지만 제가 적응을 못했다고 보는 게 맞겠네요. ^^ 사실 회귀본능도 강하게 작용했구요.
모 아무튼… 새로운 곳에서 이것저것 잡다구리하게 일하고 있는데, 개발 표준 잡다가 심심해서 웹 표준 코딩과 닷넷을 결합해서 샘플을 하나 만들어 봤습니다.
사실 인터넷에 다 알려진 내용이라 새로울 건 없지만, 공유라는 차원에서 기록으로 남겨봅니다.~
웹 표준이란?
정보공학 측면에서 문서의 구조에 의미를 부여하자는 것이고, 그것을 사용하는 사용자들이 어떤 조건적 제약없이 쉽게 웹에 접근하여 이용 가능하도록 보장하는 것이라고 생각합니다.
문서의 구조에 의미를 부여한다는 것은 <bold>홍길동</bold> 처럼 무언가 강조되어야 할 글자에 디자인 의미를 가진 마크업을 사용하기 보단 <strong>홍길동</strong> 처럼 의미있는 테그 사용을 통해 문서의 구조를 만들자는 것입니다. 개발적 측면에서는 기존의 디자인+마크업+행위가 하나의 페이지에 모두 녹아있는 형태가 아닌 HTML, CSS, Javascript를 각각 분리하여 관리상의 이점을 가져가자는 측면도 있는 것입니다.
첫번째 샘플은 다음의 조건을 가집니다.
‘웹 페이지 자체는 HTML, CSS, Javascript로 구분하되 테이블의 렌더링은 C#에서 한다.’
먼저 웹페이지를 만들겠습니다.
웹 페이지의 기본 구조는 다음과 같습니다.
|
타이틀 요소 | |
|
메뉴요소 |
본문 요소 |
|
바닥글 | |
이 구조를 만들기 위해 구조를위한 마크업과 CSS를 생성했습니다.
코드는 아래와 같습니다.
|
HTML 코드 |
|
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="OneMaster.aspx.cs" Inherits="CELSSample_OneMaster_OneDetail_OneMaster" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <link href="/Css/CELSSample.css" rel="stylesheet" type="text/css" /> </head> <body> <form id="form1" runat="server"> <!—Outer Wrap à <div id="wrap"> <!— Title 영역 à <div id="title"> <p class="titMsg">One Master Sample</p> </div> <!— 메뉴 영역 à <div id="menu"> <span class="menuTitle">메뉴</span> </div> <!— 본문 영역 à <div id="main"> <!— 본문에 들어갈 내용이 위치함 à </div> <!— 바닥글 영역 à <div id="bottom"> <p class="bottomMsg">Copyright (c) KPS. All rights reserved.</p> </div> </div> </form> </body> </html> |
위의 코드를 보시면 문서 내부에 디자인 요소가 하나도 없음을 확인할 수 있습니다.
마크업을 데코레이션 하는데 필요한 CSS를 하나 생성합니다.
코드는 아래와 같습니다.
|
CSS 코드 |
|
body { background:#FFFFFF; font-size:12px; font-family:돋움; color:#333333; } ul { list-style:none; padding:0; } #wrap { width:1000px; margin:0 auto; } #title { height:50px; text-align:center; } #menu { float:left; width:130px; } #main { float:left; width:850px; } #bottom { float:left; width:1000px; height:30px; } .titMsg { padding-top:20px; color:#1425D0; font-family:돋움, dotum; font-size:14px; font-weight:bold; } .bottomMsg { padding-top:9px; text-align:center; font-size:10pt; font-family:돋움; } .menuTitle { height:20px; background:#DEB887; text-align:center; width:130px; display:block; padding-top:8px; } |
이렇게 마크업과 디자인을 구분하여 유지보수성을 높여줍니다. 기왕 만드는 김에 JS부분도 미리 만들어 놓겠습니다.
이렇게 해서 웹표준 코딩을 닷넷으로 적용하기 위한 준비를 끝냈습니다.
이제 이 웹 페이지 구조에 어떤 데이터를 읽고, 그것을 Html Table로 만들어서 보여줄려고 합니다. DataList를 사용하면 편하게 그릴수 있지만 웹 페이지 요소는 불가피한 경우를 제외하곤 ASP.NET 컨트롤의 사용을 최소화 하려고 합니다.
그런 의미에서 HtmlDataList 객체를 이용해서 표를 출력하고자 합니다.
'General .NET' 카테고리의 다른 글
| ASP.NET MVC(C#)으로 15분만에 영화 데이터베이스 애플리케이션 생성하기(2) (0) | 2009/11/18 |
|---|---|
| ASP.NET MVC(C#)으로 15분만에 영화 데이터베이스 애플리케이션 생성하기(1) (2) | 2009/11/17 |
| ASP.NET으로 웹 표준 코딩 해보기(1) (0) | 2009/05/22 |
| 웹 표준을 이용한 ASP.NET 2.0 웹 사이트 제작하기(1) (0) | 2009/03/17 |
| Socket Class (0) | 2008/11/30 |
| HttpWebRequest - 웹 화면 가져오기 (0) | 2008/11/30 |
