Warming up


Home > Document > Web design > CSS > Layout > Warming up

준비 운동...

하나의 사이트를 만드는데 가장 중요한 것이 뭐냐고 묻는다면 가장 먼저 CSS 를 꼽는데 주저하지 않습니다. 이 사이트의 CSS, DHTML, JavaScript 등의 메뉴를 통해서 이미 알고 있겠지만 외부 Link에 의해 문서의 양식을 통일 시킨다는 중요한 역할은 물론이고, CSS는 Object (HTML Tag)와 Script 사이의 연결 고리와도 같아서 CSS를 이용하여 보다 다양한 효과를 낼 수 있기 때문입니다. 따라서 초보자의 경우 무턱대고 사이트를 Design 할 일이 아니라 CSS 파일부터 준비해야 될 필요가 있습니다. 물론 CSS 파일이외에도 준비해야 될 것이 몇 가지 있는데 다음과 같이 정리를 해 보시져...

Web design을 위한 몇 가지 준비
DTD mode 선택 앞으로 작성할 문서의 DTD(Document Type Definition)을 결정하여 선택합니다. DTD 에 대해서는 HTML DTDxhtml DTD를 참고하여 자기에게 적합한 DTD를 선택하고 문서의 첫 부분에 선언해 줍니다.
.css file 작성 myStyle.css, mySite.css 등 임의의 filename과 css를 확장자로 하는 file을 작성하여 저장합니다. 들어갈 내용이 뭔지 모르겠다구요? 아무 것도 없어도 좋으니까 일단 작성합니다. 다음 페이지의 Page layout과 Article layout 에서 다루게 됩니다.
.js file 작성 역시 임의의 filename과 js를 확장자로 하는 파일을 만들고 저장합니다. 물론 내용이 없어도 말입니다...
Style block 삽입 그 문서에서만 사용되는 1회용 style Property를 대비해 하나 넣어 둡니다.
Script block 삽입 그 문서에서만 사용되는 1회용 Scripting을 대비해 하나 넣어 둡니다.
Proto type file 작성 위의 내용들을 문서를 새로 만들 때 마다 반복한다는 것은 시간과 정력의 낭비이므로 Prototype file(원형 파일)을 만들어 두고 새로 시작할 때는 이 파일의 내용을 복사하여 사용합니다. 내용은 다음과 같습니다.

아래의 Prototype file의 예제는 DTD 는 xhtml Transitional mode, css file 이름은 mySite.css, JavaScript file은 myScript.js 라고 가정하고 작성한 예 입니다.

입력
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <title>Page Title</title>
    <link rel="stylesheet" type="text/css" href="경로/mySite.css" />
    <script type="text/javascript" src="경로/myScript.js"></script>
    <script type="text/javascript">
    <!--

    // -->
    </script>
    <style type="text/css">
    <!-- 
     
    -->
    </style>
    </head>
    <body>
    
    </body>
</html>
참고사항
위에서 예로 든 내용 중에 mySite.css, myScript.js 파일의 경우 폴더를 따로 만들어 보관하는 것이 바람직 합니다. 사이트의 root 폴더에 공통적으로 Link 해서 사용할 파일을 같이 두고 사이트 작업을 시작하는 것은 헤깔리 준비를 완벽하게 마친 것과 다름이 없습니다. 파일이 몇 개 되지 않아서 상관 없다구요? 그렇지만 사람 일이하는 건 모르는 거라서 앞으로 많이 늘어 날 가능성은 얼마든지 있습니다. 그렇기 때문에 예를 들어 root 폴더에 include 등의 하위 폴더를 만들어 따로 보관하도록 하세요. 절대경로와 상대경로에 대해서는 절대경로와 상대경로의 DHTML를 참고하면 되겠습니다.




이 문서의 저작권은 www.cadvance.org 에 있습니다.

Top
Back
New
검색