검색결과 리스트
렛츠웹 + 게임에 해당되는 글 523건
- 2009.01.05 웹서비스의개념과관련기업에미치는영향
- 2009.01.05 웹사이트_분석방법
- 2009.01.05 스토리보드 & 플로우차트
- 2009.01.05 사이트 구축제안서 작성요령
- 2009.01.05 사이버쇼핑몰통계조사
- 2009.01.05 사업계획서주의사항
- 2009.01.05 사업기획서 샘플
- 2009.01.05 사업설명회자료
- 2009.01.05 네트워크마케팅
- 2009.01.05 기획서 사례(KIST)
- 2009.01.05 개인위치정보의법적문제와위치기반의서비스의전망
- 2007.10.09 표준웹코딩 예제
- 2007.06.09 표준웹코딩의 장점 Table for layout과 CSS layout의 비교실험
글
웹서비스의개념과관련기업에미치는영향
웹서비스의개념과관련기업에미치는영향-himang1974.pdf'렛츠웹 + 게임 > Planning Data' 카테고리의 다른 글
| 웹사이트 유료화 어떻게 하나 (0) | 2009.01.05 |
|---|---|
| 웹서비스의현황및전망 (0) | 2009.01.05 |
| 웹사이트_분석방법 (0) | 2009.01.05 |
| 스토리보드 & 플로우차트 (0) | 2009.01.05 |
| 사이트 구축제안서 작성요령 (0) | 2009.01.05 |
글
웹사이트_분석방법
웹사이트_분석방법-himang1974.ppt'렛츠웹 + 게임 > Planning Data' 카테고리의 다른 글
| 웹서비스의현황및전망 (0) | 2009.01.05 |
|---|---|
| 웹서비스의개념과관련기업에미치는영향 (0) | 2009.01.05 |
| 스토리보드 & 플로우차트 (0) | 2009.01.05 |
| 사이트 구축제안서 작성요령 (0) | 2009.01.05 |
| 사업계획서주의사항 (0) | 2009.01.05 |
글
스토리보드 & 플로우차트
'렛츠웹 + 게임 > Planning Data' 카테고리의 다른 글
| 웹서비스의개념과관련기업에미치는영향 (0) | 2009.01.05 |
|---|---|
| 웹사이트_분석방법 (0) | 2009.01.05 |
| 사이트 구축제안서 작성요령 (0) | 2009.01.05 |
| 사업계획서주의사항 (0) | 2009.01.05 |
| 사업기획서 샘플 (0) | 2009.01.05 |
글
사이트 구축제안서 작성요령
제안서란 어떤 사기업이나 공기업에서 자사의 Project를 발주시키기 위해 수주업체의 개발 경험이나 기술적 특징들을 분석할 목적으로 제출 받는 문서를 말합니다.
이런 제안서는 해당 프로젝트를 이해하는데 중요한 역할을 하며, 해당업체의 기술력을 평가 할 수 있는 어느 정도 공정한 잣대의 역할을 하고 있습니다. (실제로는 저도 잘 모르지여..^^) 그러나, 단순하게 어떤 어떤 일을 하니, 제안서를 작성해 달라고 한다는 것은 모순이 있습니다. 그래서, 해당 발주처가 이러 이러한 내용을 첨가해서 이렇게 개발했으면 좋겠다는 “제안요청서(RFP)”를 발행하게 되지요. 이 제안요청서에 해당 프로젝트에 대한 자세한(?) 목록과 기술적인 부분, 제안서 제출 일자, 제출 부수, 평가항목당 배점 등등 제안서를 보고 입찰하는데 있어 필요한 제반 정보와 담당자의 전화번호가 기재되어 있습니다. 대개, 이런 프로세스로 진행되는 프로젝트는 대규모의 프로젝트에 속하며, 다루는 금액의 단위가 크기도 하고, 한 업체가 아니고, 몇몇 업체가 컨서시엄을 이루어 제안에 참여하기도 합니다. 저희가 제작하려는 사이트 구축 제안서는 이러한 제안서만큼이나 풍부한 내용이 기술되지는 않지만, 그 뼈대는 이러한 제안서의 형식을 따랐음을 말씀 드리고자 합니다.
사이트구축제안서작성요령-himang1974.doc'렛츠웹 + 게임 > Planning Data' 카테고리의 다른 글
| 웹사이트_분석방법 (0) | 2009.01.05 |
|---|---|
| 스토리보드 & 플로우차트 (0) | 2009.01.05 |
| 사업계획서주의사항 (0) | 2009.01.05 |
| 사업기획서 샘플 (0) | 2009.01.05 |
| 사업설명회자료 (0) | 2009.01.05 |
글
사이버쇼핑몰통계조사
'렛츠웹 + 게임 > IT&Economy Data' 카테고리의 다른 글
| 온라인 쇼핑거래 1.4조 육박..`사상최대` (0) | 2009.01.06 |
|---|---|
| e-스포츠 산업의 현황과 발전방안 (0) | 2009.01.05 |
| 중국 내수시장 공략의 성공조건 (0) | 2009.01.05 |
| 2005년 10대 트렌드 (0) | 2009.01.05 |
| 2004년 10대 히트상품 (0) | 2009.01.05 |
글
사업계획서주의사항
--
많은 수의 사업계획서가 매일매일 창투사에 접수되고 있다. 이중 일부가 투자되는데 이를 위해선 회사는 사업계획서 작성시 사업내용, 비전 및 차별성, 경영자 및 주요 인력의 경력, 판매전략과 현재 시장상황 및 경쟁현황에 대하여 구체적으로 기술하여야 한다. 또한, 투자 규모와 조건을 기재하는 것도 필요하다. 사업계획서를 투자자입장에 서서 작성한다면 상기 사항은 무엇보다 중요한 사항이라 할 수 있다
'렛츠웹 + 게임 > Planning Data' 카테고리의 다른 글
| 스토리보드 & 플로우차트 (0) | 2009.01.05 |
|---|---|
| 사이트 구축제안서 작성요령 (0) | 2009.01.05 |
| 사업기획서 샘플 (0) | 2009.01.05 |
| 사업설명회자료 (0) | 2009.01.05 |
| 네트워크마케팅 (0) | 2009.01.05 |
글
사업기획서 샘플
'렛츠웹 + 게임 > Planning Data' 카테고리의 다른 글
| 사이트 구축제안서 작성요령 (0) | 2009.01.05 |
|---|---|
| 사업계획서주의사항 (0) | 2009.01.05 |
| 사업설명회자료 (0) | 2009.01.05 |
| 네트워크마케팅 (0) | 2009.01.05 |
| 기획서 사례(KIST) (0) | 2009.01.05 |
글
사업설명회자료
덕산전자사업설명회자료-himang1974.rar'렛츠웹 + 게임 > Planning Data' 카테고리의 다른 글
| 사업계획서주의사항 (0) | 2009.01.05 |
|---|---|
| 사업기획서 샘플 (0) | 2009.01.05 |
| 네트워크마케팅 (0) | 2009.01.05 |
| 기획서 사례(KIST) (0) | 2009.01.05 |
| 개인위치정보의법적문제와위치기반의서비스의전망 (0) | 2009.01.05 |
글
네트워크마케팅
'렛츠웹 + 게임 > Planning Data' 카테고리의 다른 글
| 사업계획서주의사항 (0) | 2009.01.05 |
|---|---|
| 사업기획서 샘플 (0) | 2009.01.05 |
| 사업설명회자료 (0) | 2009.01.05 |
| 기획서 사례(KIST) (0) | 2009.01.05 |
| 개인위치정보의법적문제와위치기반의서비스의전망 (0) | 2009.01.05 |
글
기획서 사례(KIST)
'렛츠웹 + 게임 > Planning Data' 카테고리의 다른 글
| 사업계획서주의사항 (0) | 2009.01.05 |
|---|---|
| 사업기획서 샘플 (0) | 2009.01.05 |
| 사업설명회자료 (0) | 2009.01.05 |
| 네트워크마케팅 (0) | 2009.01.05 |
| 개인위치정보의법적문제와위치기반의서비스의전망 (0) | 2009.01.05 |
글
개인위치정보의법적문제와위치기반의서비스의전망
우리나라에서도 위치기반 서비스의 제공이 이루어져 가는 시점에 있어서
위치기반서비스와 위치정보보호의 문제에 대한 명확한 이해를 통해
서버스제공자와 고객들에게 안정성과 신뢰성을 보장하는 법제도적 정책의 마련이 필수적이다
위치기반서비스와 위치정보의 법적문제를 통한 위치정보의 보호와 위치기반서비스 활성화에 대한 이해도를 알수 있는 자료~
'렛츠웹 + 게임 > Planning Data' 카테고리의 다른 글
| 사업계획서주의사항 (0) | 2009.01.05 |
|---|---|
| 사업기획서 샘플 (0) | 2009.01.05 |
| 사업설명회자료 (0) | 2009.01.05 |
| 네트워크마케팅 (0) | 2009.01.05 |
| 기획서 사례(KIST) (0) | 2009.01.05 |
글
표준웹코딩 예제
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<style type="text/css">
body {
margin: 10px auto;
height: 100%;
text-align: center;
}
#container {
width: 832px;
border:1px solid red;
}
#header {
height: 100px;
text-align: center;
border-bottom: 1px solid red;
}
#middle #left, #middle #center, #middle #right {float: left;}
#middle #left .left.content.c, #middle #left .left.content.d, #middle #left .left.content.e, #middle #left .left.content.f {
width: 170px;
margin: 10px;
border: 1px solid red;
}
#middle #left .left.content.c {height: 60px;}
#middle #left .left.content.d {height: 70px;}
#middle #left .left.content.e {height: 80px;}
#middle #left .left.content.f {height: 40px;}
#middle #center, #middle #right {
overflow: hidden;
width: 310px;
}
#middle #right {
margin-left: 10px;
}
#middle .center.content.g, #middle .center.content.h, #middle .right.content.j, #middle .right.content.k, #middle .right.content.l {
width: 308px;
margin-top: 10px;
border: 1px solid red;
}
#middle .center.content.g {height: 130px;}
#middle .center.content.h {height: 90px;}
#middle .right.content.j {height: 70px;}
#middle .right.content.k {height: 80px;}
#middle .right.content.l {height: 58px;}
#middle #bottom {
position: relative;
right: 6px;
margin-top: 10px;
height: 42px;
width: 628px;
border: 1px solid red;
}
#footer {
clear: both;
height: 80px;
text-align: center;
border-top: 1px solid red;
}
</style>
</head>
<body>
<div id="container">
<div id="header"> a </div>
<div id="middle">
<div id="left">
<div class="left content c"> c </div>
<div class="left content d"> d </div>
<div class="left content e"> e </div>
<div class="left content f"> f </div>
</div>
<div id="center">
<div class="center content g"> g </div>
<div class="center content h"> h </div>
</div>
<div id="right">
<div class="right content j"> j </div>
<div class="right content k"> k </div>
<div class="right content l"> l </div>
</div>
<div id="bottom"> i </div>
</div>
<div id="footer"> m </div>
</div>
</body>
</html>
---------------------------------------------------------
<!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>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<style type="text/css">
* html, body {height: 100%}
body {
margin: 10px auto;
text-align: center;
}
#container {
width: 832px;
border:1px solid red;
}
#header {
height: 100px;
text-align: center;
border-bottom: 1px solid red;
}
#middle #left, #middle #center, #middle #right {float: left;}
#middle #left .left.content.c, #middle #left .left.content.d, #middle #left .left.content.e, #middle #left .left.content.f {
width: 170px;
margin: 10px;
border: 1px solid red;
}
#middle #left .left.content.c {height: 60px;}
#middle #left .left.content.d {height: 70px;}
#middle #left .left.content.e {height: 80px;}
#middle #left .left.content.f {height: 40px;}
* html #middle #center, * html #middle #right {
overflow: hidden;
width: 310px;
}
* html #middle #right {
margin-left: 10px;
}
#middle .center.content.g, #middle .center.content.h, #middle .right.content.j, #middle .right.content.k, #middle .right.content.l {
width: 308px;
margin-top: 10px;
border: 1px solid red;
}
#middle .center.content.g {height: 130px;}
#middle .center.content.h {height: 90px;}
#middle .right.content.j {height: 70px;}
#middle .right.content.k {height: 80px;}
#middle .right.content.l {height: 58px;}
#middle #bottom {
position: relative;
right: 6px;
margin-top: 10px;
height: 42px;
width: 628px;
border: 1px solid red;
}
#footer {
clear: both;
height: 80px;
text-align: center;
border-top: 1px solid red;
}
</style>
</head>
<body>
<div id="container">
<div id="header"> a </div>
<div id="middle">
<div id="left">
<div class="left content c"> c </div>
<div class="left content d"> d </div>
<div class="left content e"> e </div>
<div class="left content f"> f </div>
</div>
<div id="center">
<div class="center content g"> g </div>
<div class="center content h"> h </div>
</div>
<div id="right">
<div class="right content j"> j </div>
<div class="right content k"> k </div>
<div class="right content l"> l </div>
</div>
<div id="bottom"> i </div>
</div>
<div id="footer"> m </div>
</div>
</body>
</html>
'렛츠웹 + 게임 > My Tip' 카테고리의 다른 글
| 정규표현식(php) (0) | 2009.01.05 |
|---|---|
| 암,복호화 함수 (0) | 2009.01.05 |
| iframe자동 크기 조절 (0) | 2009.01.05 |
| 엑셀저장처리 (0) | 2009.01.05 |
| 표준웹코딩의 장점 Table for layout과 CSS layout의 비교실험 (0) | 2007.06.09 |
글
표준웹코딩의 장점 Table for layout과 CSS layout의 비교실험
약 1년 전 네이버 블로그를 사용하면서 동일한 실험을 했던 적이 있습니다. 그 당시에는 Table Layout과 DIV Layout을 비교한다고 말했었지만 사실 Table Layout 이라는 말과 DIV Layout 이라는 말은 모두 잘못된 표현입니다. Table Layout 이라는 용어는 Table이 격자형의 2차원 데이터를 마크업 하는 용도를 지니고 있다는 점에서 Layout 이라는 표현과 함께 사용한 것이 잘못된 표현이며, DIV Layout 이라는 용어는 DIV가 의미를 그룹짓는 용도를 지니고 있다는 점에서 역시 Layout과 결합한 것은 잘못된 표현 입니다. 결국 Layout 이라는 것은 화면배치를 위한 표현에 해당하기 때문에 어떤 (X)HTML 요소와도 조합하여 사용하는 것은 잘못된 표현이라고 할 수 있습니다. Table Layout 이라는 말은 사실 ‘Table for Layout’ 즉, ‘레이아웃을 위하여 사용된 테이블’ 정도로 밖에 표현할 수 없습니다. 두 가지 표현이 별반 차이가 없는 것처럼 느껴지는 분들도 계실테지만 사실 엄청난 차이가 존재합니다. 전자는 Table이 Layout을 위하여 사용되고 있고 또 그럴 수도 있다는 것을 전제 하지만 후자는 Table이 Layout 용도로 사용되는 것을 확실하게 경계하였기 때문에 사용되는 표현입니다. 어쨌거나 이미 네이버에서만 162분이나 스크랩을 하셨고 저는 1년이 지난 최근에서야 해당 포스트를 수정하였는데 1년동안 여러 분들께 잘못된 정보를 제공했다는 사실 때문에 약간의 죄책감을 가지게 되었습니다. 그것을 만회할 요량으로 다시 해당 코드를 손질하고 이곳에 올려놓습니다. 이제는 자수하여 광명찾고 싶습니다.
| Table for Layout 예제보기 | CSS Layout 예제보기 |
|---|---|
 |
 |
웹 표준 방식의 CSS Layout은 콘텐트가 논리적으로 선형화 됩니다.
상기 두 개의 이미지는 동일한 Layout을 제공하고 있지만 코드는 각각 다릅니다. 이미 짐작하고 계셨겠지만 이번에는 CSS를 제거한 상태로 한번 보여드리겠습니다. CSS를 제거하게 되면 콘텐트가 선형화 되는 모습을 시각적으로 확인할 수 있고 선형화 하였을 때 콘텐트의 나열 순서에 무리가 없다면 그것은 어떤 장치에서 보더라도 논리적으로 바르게 이해할 수 있습니다. 왼쪽은 화면배치를 위하여 Table이 사용된 페이지이며 오른쪽이 CSS를 이용하여 Layout된 페이지 입니다. Opera Mini와 같은 휴대용 웹 브라우징 장치는 웹 페이지를 렌더링 할 때 Table을 모두 걷어내고 CSS조차 제거된 상태로 표시합니다. 따라서 아래 두 가지 경우의 페이지 가운데 어떤 페이지가 논리적으로 선형화 될 것인지는 굳이 보지 않더라도 쉽게 추측이 가능합니다. 사실 이것은 CSS Layout의 영향이라기 보다는 Markup을 잘 했기 때문에 볼 수 있는 결과 입니다. 하지만 거꾸로 생각하면 표현요소가 Markup으로부터 완전히 분리되어 있기 때문에 이렇게 논리적으로 Markup 하는것이 가능해 집니다. Layout에 Table을 사용하는 경우는 마크업이 표현요소를 포함하고 있기 때문에 콘텐트를 논리적으로 배치하려고 시도하면 표현문제와 충돌하게 되고 결국 논리보다는 표현을 위한 용도로 마크업을 사용하게 되어 논리적인 배치와는 거리가 멀어지게 됩니다.
| CSS가 제거된 Table for Layout 예제보기 | CSS가 제거된 Web Standard Layout 예제보기 |
|---|---|
 |
 |
보통 Table을 선형화 하더라도 콘텐트의 순서가 완전히 뒤죽박죽으로 인식되지는 않습니다. 왜냐하면 Table을 걷어내는 경우 좌측 상단으로부터 우측 하단으로 콘텐트가 선형화 되는데 그러한 순서에 맞게 페이지의 콘텐트를 배치하는 경우도 있기 때문입니다. 그러나 그것은 운이 아주 좋은 경우이며 대부분의 경우는 논리적인 순서에 문제가 생기게 됩니다.
CSS Layout은 Table for Layout에 비하여 파일의 용량을 50% 이상 절감해 줍니다.
무엇인가 원하는 위치에 표시하기 위하여 Table을 Layout에 사용하는 경우는 <table><tr><td>내용</td></tr></table> 형식으로 코딩 되지만 CSS Layout은 <div>내용</div> 형식으로 코딩 됩니다. 예제코드 전체를 보여드리겠습니다. 화면(또는 지면) 관계상 코드를 모두 담아내면 화면이 너무 커지므로 코드의 서체크기를 일부러 줄여 놓았습니다. 코드를 자세히 확인하시려면 그냥 복사해서 메모장에서 볼 것을 권합니다.
| Table for Layout | CSS Layout |
|---|---|
| 89 line | 39 line |
| 2,661 byte | 1,027 byte |
| <!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> <meta http-equiv="Content-Type" content="text/html; charset=euc-kr" /> <title>Table for Layout</title> <link href="TableForLayout.css" rel="stylesheet" type="text/css" /> </head> <body style="margin:0"> <p id="moveTo"><a href="CSSLayout.html">Go to CSS Layout</a></p> <table width="100%" border="0" cellspacing="0" cellpadding="20"> <tr> <td colspan="3" valign="top" id="header">Table for Layout</td> </tr> <tr> <td width="20%" height="300" valign="top" style="background:#666"><table width="100%" border="0" cellspacing="0" cellpadding="5" id="menu"> <tr> <th style="height:30px; background:#999">2Depth Title </th> </tr> <tr> <td>Menu1</td> </tr> <tr> <td class="line"></td> </tr> <tr> <td>Menu2</td> </tr> <tr> <td class="line"></td> </tr> <tr> <td>Menu3</td> </tr> <tr> <td class="line"></td> </tr> <tr> <td>Menu4</td> </tr> <tr> <td class="line"></td> </tr> <tr> <td>Menu5</td> </tr> <tr> <td class="line"></td> </tr> </table></td> <td width="60%" height="300" valign="top" style="background:#999"><table width="100%" border="0" cellspacing="0" cellpadding="5" id="pageTitle"> <tr> <th style="height:30px">3Depth Title </th> </tr> </table> <table width="100%" cellspacing="0"> <tr> <td id="text">Content </td> </tr> </table></td> <td width="20%" height="300" valign="top" style="background:#CCC"><table width="100%" border="0" cellspacing="0" cellpadding="5" id="links"> <tr> <th style="height:30px; background:#666">Links </th> </tr> <tr> <td>Link List 1</td> </tr> <tr> <td class="line"></td> </tr> <tr> <td>Link List 2 </td> </tr> <tr> <td class="line"></td> </tr> <tr> <td>Link List 1</td> </tr> <tr> <td class="line"></td> </tr> </table></td> </tr> <tr> <td colspan="3" valign="top" id="footer" style="background:#333"><a href="http://naradesign.net/">naradesign.net</a></td> </tr> </table> </body> </html> |
<!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> <meta http-equiv="Content-Type" content="text/html; charset=euc-kr" /> <title>CSS Layout</title> <link href="CSSLayout.css" rel="stylesheet" type="text/css" /> </head> <body> <p id="moveTo"><a href="TableForLayout.html">Go to Table for Layout</a></p> <h1>CSS Layout</h1> <div id="center"> <div id="menu"> <h2>2Depth Title </h2> <ul> <li>Menu1</li> <li>Menu2</li> <li>Menu3</li> <li>Menu4</li> <li>Menu5</li> </ul> </div> <div id="content"> <h3>3Depth Title </h3> <div id="text"> Content </div> </div> <div id="links"> <h3>Links</h3> <ul> <li>Link List 1</li> <li>Link List 2</li> <li>Link List 3 </li> </ul> </div> </div> <address id="footer"> <a href="http://naradesign.net/">naradesign.net</a> </address> </body> </html> |
| Table for Layout | CSS Layout |
|---|---|
| 17 line | 23 line |
| 1,030 byte | 1,771 byte |
| * { font-size:small; font-family:Arial} a { font:inherit; color:#FFF; text-decoration:none} a:hover { text-decoration:underline} #moveTo { position: #header { font-size:5em; color:#FFF; font-weight:bold; background:#000} #menu th { border-bottom:3px solid #FFF; font-size:x-large; font-weight:bold; color: #FF0; text-align:left} #menu td { font-size:small; font-weight:bold; color:#FFF} #menu td.line { height:1px; padding:0; background:#FFF} #pageTitle { margin-bottom:1em; background:#999} #pageTitle th, #link th {border-bottom:3px solid #FFF; font-size:x-large; font-weight:bold; color: #FF0; text-align:left; background:#666} #text { color:#FFF;} #links { margin-bottom:1em} #links th {border-bottom:3px solid #FFF; font-size:x-large; font-weight:bold; color: #FF0; text-align:left; background:#666} #links td { color:#FFF} #links td.line { height:1px; padding:0; background:#FFF} #footer { font-family: Verdana; font-size:x-large; font-weight:bold; font-style:italic; color:#FFF} |
* { margin:0; padding:0; font-size:small; font-family:Arial} h1 { font-size:5em; color:#FFF; font-weight:bold; background:#000; padding:20px} h2 { padding:5px; font-size:x-large; font-weight:bold; color:#FF0; background:#999; border-bottom:3px solid #FFF; margin:20px; margin-bottom:0} h3 { padding:5px; font-size:x-large; font-weight:bold; color:#FF0; background:#666; border-bottom:3px solid #FFF; margin:20px; margin-bottom:0} a { font:inherit; color:#FFF; text-decoration:none} a:hover { text-decoration:underline} #moveTo { position: #center { position:relative; overflow:hidden} #menu { position:relative; width:20%; background:#666; float:left; height:300px} #menu ul { margin:20px; margin-top:0; padding:0} #menu li { padding:5px; border-bottom:1px solid #FFF; font-weight:bold; color:#FFF; list-style:none} #content { position:relative; background: #999; font-size:small; font-family:Verdana; color:#FFF; width:60%; float:left; height:300px} #content h3 { margin-bottom:1em} #text { margin:20px; margin-top:0; line-height:150%; font-family:Verdana} #text table { border-left:1px solid #CCC; border-top:1px solid #CCC} #text table caption { font-weight:bold; text-align:left} #text table th { background:#666} #text table th, #text table td { padding:.5em; border-right:1px solid #CCC; border-bottom:1px solid #CCC; text-align:center} #links { position:relative; float:left; background:#CCCCCC; width:20%; clear:right; height:300px} #links ul { margin:20px; margin-top:0; padding:0} #links li { padding:5px; border-bottom:1px solid #FFF; color:#FFF; list-style:none} #footer { position:relative; clear:both; background: #333; font |
CSS Layout의 경우 HTML 파일의 용량은 50% 이상 절감됩니다. CSS파일의 용량은 약 70% 정도 증가하였지만 CSS파일은 웹 사이트 접속시 딱 한번 로드되고 로컬 PC의 캐시메모리에서 재활용 되므로 전송량에 미치는 부하는 무시해도 좋은 수준입니다. 이 실험에서는 비록 하나의 웹 페이지를 단순 비교하였지만 웹 페이지의 수가 증가하면 증가할 수록 웹 표준 방식의 CSS Layout Code는 경제적인 효과가 배가됩니다.
사람이나 로봇(컴퓨터)이 이해하기 쉬운 구조가 됩니다.
코드가 줄어들기 때문에 개발자들이 코드보기가 수월해 진다는 것은 쉽게 추측할 수 있습니다. 즉, 삽질을 줄여주죠. 하지만 그런 점은 겨우 부가적인 이점에 불과합니다. 웹 표준 방식의 HTML 코드는 모바일 장치를 포함한 어떤 종류의 웹 브라우저 장치에서 출력 되더라도 그것을 이해할 수 있는 수준으로 렌더링 됩니다. 또한 검색엔진으로부터 높은 점수를 받습니다. 특히 Title 태그와 h1~h6 등의 제목태그 및 alt 텍스트를 사용할 때 그렇습니다. 검색엔진의 접근성이 높아져서 피검색 될 확률이 높아집니다.
유지보수가 쉬워지고 유지보수 비용을 절감시켜 줍니다.
웹 사이트의 디자인만 개편한다고 가정할 때 Table 기반으로 Layout된 페이지들은 Layout을 변경하기 위하여 수천 페이지의 HTML 문서를 모두 열어서 수정해야 하는 고통이 따릅니다. 하지만 CSS 기반으로 Layout된 웹사이트는 HTML 파일은 열어볼 필요조차 없어집니다. 불과 몇개의 CSS파일을 수정하는 것으로 매우 간단하게 수천개의 웹 페이지 디자인을 개편할 수 있습니다. 표현요소를 CSS로 완벽하게 분리했다면 HTML파일을 수정해야 하는 상황은 오직 데이터가 업데이트 될 때 뿐입니다.
웹 접근성 문제는 웹 표준만 지키면 90% 이상 해결 됩니다.
웹은 태어날 때부터 보편성을 전제하였습니다. 즉, 웹 표준만 지키면 누구나 접근할 수 있도록 이미 그렇게 설계 되어 있다는 의미 입니다. 가장 짧은 시간에 접근성을 크게 증진시킬 수 있는 방법으로서 image 요소에 대한 alt 텍스트를 강조하고 있는데 이것은 WCAG 지침이기 이전에 XHTML 표준 문법입니다. 실제로 WCAG 지침은 XHTML의 표준 문법 가운데 접근성 이슈만 추려내 놓고 그것을 지키라고 말하는 문장이 많습니다.
'렛츠웹 + 게임 > My Tip' 카테고리의 다른 글
| 정규표현식(php) (0) | 2009.01.05 |
|---|---|
| 암,복호화 함수 (0) | 2009.01.05 |
| iframe자동 크기 조절 (0) | 2009.01.05 |
| 엑셀저장처리 (0) | 2009.01.05 |
| 표준웹코딩 예제 (0) | 2007.10.09 |
