Drew McLellan
서투른 장인이 연장을 나무란다는 속담이 있습니다.
그 말이 맞습니다.
아무리 도구가 좋아도 그 도구를 사용하는 사람의 기술에 따라 작업 결과는 달라집니다.
이 글에서는 Dreamweaver MX를 사용하여 보다 전문성 있는 결과를 얻기 위한
다섯 단계에 대해 요약 설명합니다.
1단계: JavaScript와 CSS를 외부 파일로 내보내기
기본 페이지에 모든 코드를 포함시키는 것이 편집할 때 편리하다고 생각할 수도 있지만 이렇게 하면 대역폭이 크게 낭비됩니다.
JavaScript와 CSS(Cascading Style Sheet) 코드를 각 페이지의 <head> 부분에서 중앙 파일로 이동하면 다음과 같은 두 가지 이점이 있습니다.
- 코드를 중앙 집중화합니다.
코드를 변경해야 하는 경우 코드를 사용하는
- 페이지마다 변경 할 필요 없이 한 번만 변경하면 됩니다.
- 대역폭을 절약합니다.
클라이언트 브라우저는 JavaScript와 CSS 파일을
- 페이지마다 다운로드하지 않고 한 번만 다운로드합니다.
이 작업을 수행하려면 먼저 문서의 <head>에서 JavaScript 함수를 찾습니다.
다음은 일반적인 예입니다.
<script language="JavaScript"
type="text/JavaScript">
<!--
function MM_openBrWindow(theURL,winName,features)
{ //v2.0
window.open(theURL,winName,features);
}
//-->
</script>
함수를 새로운 텍스트 파일로 복사한 다음 텍스트 파일을 common.js와 같이 적당한 이름으로 저장합니다.
다음과 같이 사이트의 각 페이지에 있는 <head> 부분에서 해당 파일에 링크하거나
해당 파일을 템플릿에 둡니다.
<script language="JavaScript" type="text/JavaScript"
src="/common.js">
</script>
페이지의 <head> 부분에서 CSS 코드를 찾아 이 코드를 새로운 텍스트 파일로 복사한 다음 텍스트 파일을 mystyles.css와 같이 적당한 이름으로 저장합니다.
<head> 부분에 다음과 같이 나타납니다.
<style type="text/css">
<!--
h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #000000;
}
-->
</style>
페이지의 <head> 부분에 CSS 파일로의 링크를 삽입하여 CSS 파일을 웹 페이지에 링크합니다.
<link href="/mystyles.css" rel="stylesheet"
type="text/css" />
----------------------------------------------------------------------------------------
2단계: 템플릿 마크업 없이 사이트 내보내기
Dreamweaver MX는 HTML 주석을 사용하여 문서 내에 메타데이터를 저장합니다.
이러한 주석을 통해 템플릿과 라이브러리 항목과 같은 여러 기능이 작동할 수 있습니다.
사이트 제작 시 이러한 기능은 매우 유용하기는 하지만 주석을 사용하면 대역폭을 낭비하게 되고 파일이 제작 웹 사이트에 있으므로 페이지가 그다지 전문적으로 보이지 않게 됩니다.
Dreamweaver는 이러한 주석을 제거하여 말끔하게 정리된 새로운 사이트로 만들어 줍니다. (작업 중인 사이트에서는 주석을 잃어버리면 안 됩니다. 그럴 경우 템플릿이 손상됩니다.)
주석을 제거하려면 사이트에서 수정(Modify) > 템플릿(Templates) > 마크업 없이 보내기(Export Without Markup)를 선택합니다. 정리된 새로운 사이트의 위치를 검색한 다음 확인(OK)을 클릭합니다.
----------------------------------------------------------------------------------------
3단계: XHTML로 사이트의 미래 입증
HTML을 대체하는 XHTML(Extensible HTML)은 이전 브라우저와 새 브라우저에서 모두 작동하는 XML의 구현입니다.
XHTML은 엄격한 의미에서 XML이면서도 태그 및 속성면에서는 HTML과 매우 유사하여 이전 브라우저와의 차이가 없습니다.
XML은 현대적이고 앞으로 계속 사용될 입증된 표준이므로 XML을 사용하는 것이 좋습니다. 직접 코드를 작성하는 경우 파일을 변환하기 전에 XHTML에 대해 알아 두어야 할 사항이 몇 가지 있습니다.
예를 들어 XHTML 표준에서는 비어 있지 않은 속성과 정확히 쌍으로 된 중첩 태그를 선호합니다.
HTML과 XHTML의 차이점에 대한 자세한 내용은 Dan Short의 "Coding Standards Using XHTML"을 읽어보십시오.
대부분의 사용자처럼 시각적인 환경에서 작업하는 경우 페이지를 XHTML로 쉽게 변환할 수 있습니다.
- 새로운 페이지로 시작하는 경우 새 문서(New Document) 윈도우의 오른쪽 아래 모서리에 있는 XHTML 호환 문서 만들기(Make Document XHTML Compliant) 옵션을 선택합니다.
- HTML로 작성된 기존 페이지가 있는 경우 파일(File) > 변환(Convert) > XHTML을 선택하여 기존 페이지를 XHTML로 변환합니다.
정말 쉽지 않습니까?
----------------------------------------------------------------------------------------
4단계: 소스 포맷 적용(Apply Source Formatting) 명령으로 코드 정리
길고 복잡한 페이지에서는 코드(Code) 보기로 페이지를 검색하기가 어렵습니다.
전문적인 프로그래머라면 깔끔하고 들여쓰기에 맞게 정리된 코드의 중요성에 대해
강조합니다.
잘 정리된 코드를 유지하면 다음과 같은 이점이 있습니다.
- 코드 작업 완료 후 누가 코드를 다시 변경할지 알 수 없습니다.
본인 휴가 중에 클라이언트가 변경을 요구하는 경우를 생각해 보십시오.
이런 경우 동료 직원이 해당 페이지를 보고 이해 할 수 있어야 합니다.
- 현재 명백한 내용이 4개월 이후에는 그렇지 않을 수 있습니다. 몇 개월 후에
자신이 페이지를 직접 편집하는 경우에도 친숙했던 코드가 다소 생소하게
느껴져서 코드를 이해하기 어려울 수도 있습니다.
코드를 깔끔하게 정리하면 진행 상황을 파악하는 데 도움이 됩니다.
- 클라이언트가 호기심으로 사이트의 소스 코드를 보는 경우를 생각해 보십시오.
클라이언트가 어지럽게 작성된 코드를 보기를 원하십니까? 아니면 꼼꼼하게
정리된 깔끔한 코드를 보기를 원하십니까? (물론 후자겠지요.)
그렇다고 페이지를 서버에 업로드하기 전에 페이지 정리에 오랜 시간을 소비할 필요는 없습니다.
Dreamweaver MX를 사용하면 이러한 작업을 쉽게 할 수 있습니다.
페이지를 편집한 후 명령(Commands) > 소스 포맷 적용(Apply Source Formatting)을 선택하면 됩니다.
----------------------------------------------------------------------------------------
5단계: 기본적인 오류를 찾기 위해 페이지 유효성 검사
수 많은 전문 웹 개발자가 코드 수정을 도와주는 도구가 있다는 사실을 모르고 있다는 것은 놀라울 일입니다.
코드가 올바른지 확인하거나 유효성 검사기를 통해 검사를 실행함으로써 페이지에서 대부분의 브라우저 호환성 문제를 없앨 수 있습니다.
사소한 문제 해결 과정에서 가장 어려운 점은 우선 문제를 발견하는 것입니다.
이러한 경우 유효성 검사기를 사용하면 도움이 됩니다.
두 가지입니다.
첫 번째 방법은 Dreamweaver에서 검사하는 것입니다.
작업 중인 페이지를 저장했는지 확인합니다. 그런 다음 파일(File) > 페이지 확인(Check Page)을 선택합니다.
페이지가 HTML이면 마크업 유효성 확인(Validate Markup)을 선택하고 페이지가 XHTML이면 XML로 유효성 검사(Validate as XML)를 선택합니다.
결과(Results) 패널에 발생한 문제의 목록이 표시됩니다.
두 번째 방법은 W3C(World Wide Web Consortium)의 온라인 유효성 검사 도구를 사용하는 것입니다.
HTML 및 XHTML은 물론 CSS 파일을 모두 검사할 수 있습니다.
W3C 웹 사이트 홈 페이지에서 유효성 검사기를 구할수 있습니다.
HTML 및 XHTML 유효성 확인 서비스(http://validator.w3.org/) [영어]
CSS 유효성 확인 서비스(http://jigsaw.w3.org/css-validator/) [영어]
사소한 오류를 해결한 후 페이지에 나타나는 변화를 보면 매우 짜증스러울 수 있습니다.
예를 들어 잘못 중첩된 태그로 인해 어떤 브라우저에서는 페이지가 나타나지 않고
다른 브라우저에서는 제대로 나타날 수 있습니다.
이러한 문제만으로도 코드 유효성 검사기를 사용하는 충분한 이유가 될 것입니다.
출처:Dreamweaver MX 응용 프로그램 개발 센터
'컴퓨터 > 웹언어/팁' 카테고리의 다른 글
| PHP5의 새로운 기능 (0) | 2010.01.19 |
|---|---|
| Dreamweaver MX에서 표 없는 레이아웃 만들기 (0) | 2010.01.19 |
| XHTML, 차세대 장치를 위한 대규모 언어 (0) | 2010.01.19 |
| XHTML 기초 (0) | 2010.01.19 |
| 아파치 튜닝 (0) | 2010.01.19 |