웹 개발 과정에 있어서 웹 페이지 속 UI 동작을 구현하는데 필요한 기본적인 기능들을 모아놓은 JavaScript Library들이 제공되면서 개발자들의 손을 한 시름 덜어주게 되었고, 결국 남은 여력을 프로젝트에 더 집중하게 되면서 작업의 효율성을 증가시켜 주었듯이, 마찬가지로 웹 페이지의 기본 layout을 잡을 때 반복적으로 수행되던 CSS 작업에서도 빠른 작업 수행 속도를 붙여줄 수 있는 framework 형태의 여러 조력자들이 등장하고 있다.
개인적으로 JavaScript Library로는 jQuery를 그리고 CSS framework로는 blueprintcss를 주로 사용하게 되면서, 예전에 공개했던 HTML 문서 생성을 위한 TextMate용 snippet에도 작은 변화가 있었다.
여기에 그 바뀐 내용을 공개하면, 우선 아래는 HTML 4.01 Strict DocType을 위해 “page4” tab trigger로 지정된 HTML snippet이다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="ko" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>${1:Title}</title>
${2:<link rel="stylesheet" href="${3:css/blueprint/}screen.css" type="text/css" media="screen, projection" />
<link rel="stylesheet" href="$3print.css" type="text/css" media="print" />
}<style type="text/css" media="screen">
</style>
${4:<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
}<script type="text/javascript">
$0
</script>
</head>
<body id="${5:page}">
<div class="container">
<div class="column span-${6:24}">
<h1>${7:Header}</h1>
</div>
<div class="column span-${8:20}">
${9:Main content}
</div>
<div class="column span-${10:4} last">
${11:Right sidebar}
</div>
${12:<div class="column span-24">
${13:Footer}
</div>}
</div>
</body>
</html>
기본적으로 지정되어 있는 HTML 문서의 구조는, 오른쪽에 작은 sidebar가 위치한 보편적인 2 column 구조로 위 아래에 Header와 Footer가 위치하고 있다.
다음은 같은 구조를 가진 XHTML 1.0 Strict DocType 문서를 위한 HTML snippet. tab trigger로 “page”가 지정되어 있다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" ${1:${2:xml:lang="ko"}${3: lang="ko"}} dir="ltr">
<head>
<meta http-equiv="Content-Type" content="${4:application/xhtml+xml}; charset=utf-8" />
<title>${5:Title}</title>
${6:<link rel="stylesheet" href="${7:css/blueprint/}screen.css" type="text/css" media="screen, projection" />
<link rel="stylesheet" href="$7print.css" type="text/css" media="print" />
}<style type="text/css" media="screen">
</style>
${8:<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
}<script type="text/javascript">
$0
</script>
</head>
<body id="${9:page}">
<div class="container">
<div class="column span-${10:24}">
<h1>${11:Header}</h1>
</div>
<div class="column span-${12:20}">
${13:Main content}
</div>
<div class="column span-${14:4} last">
${15:Right sidebar}
</div>
${16:<div class="column span-24">
${17:Footer}
</div>}
</div>
</body>
</html>
간단한 것이지만, 손놀림을 덜 수 있는 또 하나의 꼼수다.
이곳의 블로그에서도 오른쪽 옆구리 아래에 붙어있는 표딱지 그림들의 경우, 개별 이미지를 사용해서 웹 페이지에 표시하려면 모두 10번의 서버 요청이 필요한데, CSS Sprites 기법을 써서 왼쪽에 보이는 바와 같은 하나의 그림으로 모든 단추의 배경 그림들을 표시할 수 있었다.