Page Layout with Template | Page Layout Series Part VI


Home > Document > CSS > Page Layout Series > PLS Part VI

PLS 를 보는 분들이 가질 수 있음직 한 의문들...

처음 이 series 를 시작해서 어느 덧 이제 중반 정도에 다달은 것 같습니다. PLS 를 시작해서 지금까지 진행하면서 몇 분으로 부터 메일 등으로 받은 질문이 있습니다. 내용이야 다 다르지만 그 중에 공통되는 점 중에 하나가 '이 사이트도 지금 웹 표준 이라는 것에 맞지 않는데 당신 사이트 부터 웹 표준에 맞게 고치는게 순서가 아니겠느냐.' 하는 것 이었습니다. 이 질문에 대한 제 결론적 답변부터 말하자면 '지극히 옳으신 말씀입니다.' 가 되겠습니다. 예 맞습니다. 지금 이 사이트의 경우 소위 '웹 표준' 이라는 것에 맞지 않는 부분들이 있는게 부인할 수 없는 사실입니다. 그건 사실 누구보다 제가 잘 알고 있는 내용이구요. 설마 제가 '내 사이트는 완벽하니까 이제 이 사이트를 본보기 삼아 다른 사람들에게도 웹 표준으로 고치라고 한 수 가르쳐 줘야지!' 라고 생각하고 이런 series를 시작했겠습니까? 물론 그렇지 않구요, 또 이 문제에 대한 제 생각은 약간 다릅니다.

처음에는, 기간이 얼마나 걸릴지 모르지만 우선 나부터 고치고 이 문제를 다룰까 하는 생각도 사실 하지 않은게 아닙니다. 하지만 제 나름대로 생각한 것은, 저야 고치려고 마음 먹으면 별로 어려운 문제가 아니지만 어느 정도 이상의 웹 표준에 대한 지식이 없는 분들은 알면서도 못 고치거나, 아예 몰라서 이 문제를 고려조차 하지 않을 수 있기 때문에 조금이라도 빨리 이런 문제를 다루므로써 IE의 !DOCTYPE switch 라는 것 때문에 생길 수 있는 시행착오를 줄일 수 있지 않을까 하는 것 이었습니다. 따라서 이와 같은 의문이나 비슷한 의문을 품는 분들이 있다면 저의 이런 설명으로 그 문제를 이해하시기 바랍니다. 만약에 자기가 재대로 하는 것 만 말할 수 있다면 과연 몇 마디나 할 수 있을까요? 물론 그런 질문을 하시는 분들은 절대 그렇지 않겠지만, 저의 경우에는 재대로 하는 것만 말 하라면 그냥 입을 꾹 다물고 살 수 밖에요... ^^ 아니 그리고 이 사이트가 XHTML 로 만든 사이트가 아니면 XHTML의 'X' 자도 입에 뻥끗해서는 안되는 거고, 그게 그렇게 못 마땅한 일일까요?...^^ 각자 알아서 판단 하시겠죠.

또 다른 질문은 '왜 이 사이트는 FireFox에 맞추지 않아서 FF 에서는 달라 보이고, 안되는 기능들이 있느냐?' 하는 것인데, 이 질문에 한 마디로 답변하면, '이 사이트를 시작할 때 FireFox라는 브라우저는 세상에 없었습니다. 따라서 제가 점쟁이도 아니고 무슨 수로 있지도 않은 FF를 고려해서 사이트를 만들겠습니까.' 가 그 답변입니다. 저는 오히려 그 분들에게 '왜 FF에 맞춰야 되는거죠?' 라고 묻고 싶습니다. 실제로 많은 분들이 FF를 사용하는 것이 곧 웹 표준인 것으로 착각하는 것 같습니다. 하지만 FF 사용이 곧 웹 표준인 것은 결코 아니죠. 웹 표준이라는 것은 제가 아는 한, W3C 에 spec 입니다. 따라서 이 사이트가 FF에 맞추지 않았다고 해서 웹 표준에 어긋 나는게 아니라, W3C 의 spec에 맞지 않아서 어긋 난다고 하면 그건 분명히 고쳐야 될 부분이고, 지금 현재도 그럴려고 노력하는 중입니다. 또 그 중에는 제가 몰라서 못 고치고 넘어가는 것과 알면서도 수정할 때 같이 생각 해야 될 부분들 때문에 아직 실천하지 못하는 부분들이 있는데, 만약 여러분들이 그 부분을 지적해 주신다면 고마운 마음으로 고치도록 하겠습니다. 그리고 제가 경험한 바로는 FF가 IE와 비교했을 때 W3C spec 에 월등히 근접했기 때문에 웹 표준이라는 것에 가장 가까운 브라우저인 것은 부인할 수 없는 사실이라고 생각합니다. 더군다나 제가 이 PLS를 연재하면서 FF에서도 같은 code를 test 하다 보니 그 사실을 더욱 절실하게 느낀 것 또한 사실이구요. 따라서 FF는 5 메가 정도의 용량으로도 대 부분 이렇게 깔끔하게 처리가 되는데 IE는 그 10 배의 용량 속에 도대체 뭐가 들었을까 하는 생각도 들었구요. 그리고 이러한 의문들에 대한 설명은 만약 여러분들이 이 series를 끝까지 보신다면 자연스레 설명되리라 생각하므로 이 쯤 해서 이 이야기는 접도록 하겠습니다. 또한 위와 같은 설명이 있었음에도 불구하고 같은 내용을 또 물으신다면 마치 CSS에서 유효하지 못한 keyword나 value를 사용하면 아무 처리도 안하고 넘어가는 것 처럼, 저도 그런 질문에 대해서는 같은 방식으로 처리 하도록 하겠습니다... ^^ 또한 '시간이 엄청 많으신 것 같아서 참 좋으시겠습니다.' 라고 생각하면 부러워 하겠습니다. 그럼 이 페이지의 본론으로 들어가서

Template 의 필요성과 HTML page 사용자

위에서 말했듯이 저의 경우 이 사이트의 문서를 수정하려면 그리 힘든 일이 아닙니다. 다만 기왕에 손 보는 김에 같이 손 봐야될 것이 뭔지 심사숙고 하느라 좀 늦어지는 것 뿐 이라고 했는데, 제가 이렇게 말하면 '이 사람이 도대체 뭘 믿고 이럲게 쉽게 말하지?'라는 의문이 생길지도 모르겠습니다. 현재 PHP나 ASP를 사용하는 분들 에게는 벌써 찌릿~ 하고 눈치가 왔을 겁니다. 바로 include라는 server side script 를 사용하는 것인데 이게 뭔지 모르거나 그런 환경을 갖추지 못해서 include라는 걸 사용하지 못하는 HTML page 사용자 들을 위해 간략히 설명을 하겠습니다. 우선 아래와 같은 code가 있다면 이 code 중에는 사이트의 모든 page에 항상 반복해서 적용되는, 변치않는 부분들이 있습니다.

sample.asp의 code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head>
<title>제목</title>
<meta http-equiv="content-type" content="text/html; charset=euc-kr" /> <link rel="stylesheet" type="text/css" href="my_style.css"> <script type="text/javascript" src="my_script.js"></script> </head> <body> <div> ... ...
본문
... ... </div> </body> </html>

바로 위 code 중 에서는 매 page 마다 달라지는 '<title>제목</title>' 와 '본문' 을 제외한 3개의 section 들 인데, ASP의 경우 이 부분들을 아래와 같이 head.asp, body.asp, tail.asp 로 각각의 .asp file 을 작성합니다.

head.asp의 code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
body.asp의 code
<meta http-equiv="content-type" content="text/html; charset=euc-kr" />
<link rel="stylesheet" type="text/css" href="my_style.css">
<script type="text/javascript" src="my_script.js"></script>
</head>
<body>
<div>
...
...
tail.asp의 code
...
...
</div>
</body>
</html>

이렇게 작성된 3개(head, body, tail)의 asp file을 아래와 같이 모든 페이지 마다 include 시킵니다. 그러면 server에서는 include된 file들을 지정한 위치에 집어 넣어서 조합한 후, 위의 sample.asp와 같은 code를 client 에게 보여주기 때문에 반복되는 부분을 일일히 coding하는 불편함을 없앨 수 있습니다.

3개(head, body, tail)의 section 이 include된 sample.asp의 code
<!--#include file="head.asp" -->
<title>제목</title>
<!--#include file="body.asp" -->
본문
<!--#include file="tail.asp" -->

따라서 위와 같이 PHP, ASP등을 사용하여 반복되는 code를 include 하면 변경 사항이 생겼을 때 모든 file을 수정하는게 아니라 include 되는 file 들만 수정하면 된다는 말이죠.

HTML에서의 JavaScript Template 사용 하기

하지만 HTML 에는 이런 기능이 없기 때문에 실제 HTML 웹 페이지에서는 아무 소용 없는 일입니다. 이런 이유 때문에 HTML 사용자들이 문서의 layout을 한 번 바꾸는 일에 쉽게 엄두를 내지 못하는 것 이기도 하구요. 뭐 한 열 대여섯 페이지 정도라면 그냥 눈 딱 감고 몇 시간 내지 며칠을 투자할 수도 있지만 그 분량이 쩜 많은 경우는 '뭐 지금도 괜찮은데 바꿀 필요 있겠어?' 라고 자위하는 동시에 layout 흔들기를 포기하게 되는 것 같습니다.

그렇다면 다른 방법은 없는 것 일까요? 물론 'PHP나 ASP를 사용할 수 있는 환경이 생길 그 날 까지 꾹 참고 아무 것도 안 하면서 기다리는 방법'은 과히 좋아 보이질 않으니 고려할 대상이 아니겠고, HTML에서 include의 기능을 대체 할 수 있는 방법이 없을까 하고 궁리한 끝에 제가 생각해낸 것이 바로 JavaScript Template을 사용하는 것 입니다. 아래의 code는 HTML page 에서 JavaScript Template을 사용할 때 반복되는 세 부분 입니다. 위의 asp code 예제와 비교하면서 아래의 code를 보시죠.

sample.html 의 code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title>제목</title>
<meta http-equiv="content-type" content="text/html; charset=euc-kr" /> <link rel="stylesheet" type="text/css" href="my_style.css"> <script type="text/javascript" src="my_script.js"></script>
</head> <body>
<div> ... ...
본문
... ... </div>
</body> </html>
JavaScript Template을 사용한 sample.html 의 code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title>제목</title>

<script type="text/javascript" src="head.js"></script>
</head> <body>
<script type="text/javascript" src="body.js"></script>
본문
<script type="text/javascript" src="tail.js"></script>
</body> </html>

이렇게 JavaScript template을 끼워 넣어 사용하는게 제가 제시하는 include를 대체할 수 있는 방법입니다. 위의 code를 보면 sample.asp file 과는 구성된 template section이 달라져 있습니다. sample.asp 와 template section 이 달라진 이유는 <!DOCTYPE>, <html>, <head>, <title>, <body> 라는 XHTML이 갖추어야 될 최소한의 요건을 유지해야 되기 때문입니다. 왜냐하면 XHTML file을 validation 할 때 PHP, ASP 등은 server에서 include 된 file 들을 HTML code로 변환 처리를 한 후에 validation을 하기 때문에 XHTML 형식이 갖추어야 될 요건인 <!DOCTYPE>, <html>, <head>, <title>, <body> 등이 포함되어 처리가 되지만 아래와 같이 <!DOCTYPE>, <html>, <head>, <title>, <body> 를 sample.asp와 같이 문서에 직접 사용하지 않고 JavaScript template 에 포함 시켜 사용하게 되면 아래의 예제와 같이 사용된 code 자체가 validation 되기 때문에 XHTML 기본 형식의 미비로 validation 에 실패하게 된다는 거죠. 즉, 아래와 같이 사용했을 때 실행에는 지장이 없지만 XHTML 등의 규격 문서로서의 가치는 없다는 뜻 입니다.

<!DOCTYPE>, <html>, <head>, <body>이 없어서 validation에 실패한 sample.html
<script type="text/javascript" src="head.js"></script>
<title>제목</title>
<script type="text/javascript" src="body.js"></script>
본문
<script type="text/javascript" src="tail.js"></script>

하지만 이와 같이 JavaScript Template을 사용하므로써 PHP나 ASP 못지 않은 효과를 기대 할 수 있는 것도 분명지만 XHTML 과 같은 규격 문서로의 요건을 갖추는데도 이상이 없습니다. 물론 테스트해 본 결과 입니다. 그렇다면 head.js, body.js, tail.js 에 각각 들어갈 내용은 뭘까요. 아래와 같습니다.

head.js
document.writeln('<meta http-equiv="content-type" content="text/html; charset=euc-kr" />')
document.writeln('<link rel="stylesheet" type="text/css" href="my_style.css">')
document.writeln('<script type="text/javascript" src="my_script.js"></script>')
body.js
document.writeln('<div>')
document.writeln('...')
document.writeln('...')
tail.js
document.write('...')
document.write('...')
document.write('</div>')

이와 같이 write나 writeln method를 사용한 JavaScript template을 쓰면 code의 양을 획기적으로 줄일 수 있다는 것도 장점이지만 추가, 삭제, 변경 등의 수정 사항이 생겼을 때 문서를 하나 하나 직접 고치는게 아니라 해당되는 .js file을 고치므로서 수정 사항에 유연하게 대처할 수 있다는 사실 입니다. 위의 설명 정도로 아직 감이 오지 않은 분들이 있을 지 모르겠습니다. 그래~서, 이 JavsScript template에 대해 앞 의 PLS Part IV의 float을 이용한 page layout을 기본 틀로 해서 보다 구체적인 예를 하나 들어보도록 하겠습니다. 일단 embed 방식의 css block을 사용한 html file의 full code를 보시죠. 이름은 index.html로 정했습니다.

index.html의 full code
<!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">
    <head>
        <title>Welcome to xHTML world!</title>
        
<meta http-equiv="content-type" content="text/html; charset=euc-kr" /> <style type="text/css"> <!-- body{ margin:0; font:12px tahoma; color:#333; background-color:#efefef; } #header{ height:100px; padding:5px; background-color:#aaa; background-image:url(h_dot2x.gif); background-position:left bottom; /* h_dot2x.gif 의 시작 위치를 지정*/ background-repeat:repeat-x; /*가로 반복*/ } #wrap{ width:750px; background-image:url(v_dot2x.gif); background-position:149px 2px; /* v_dot2x.gif 의 시작 위치를 지정*/ background-repeat:repeat-y; /*세로 반복*/ background-color:#ccc; } #left_column{ width:130px; /*좌 우측 padding 10px + 10px = 20px 를 감안하여 150px - 20px = 130px로 지정*/ padding:5px 10px; } #right_column{ width:580px; /*좌 우측 padding 10px + 10px = 20px 를 감안하여 600px - 20px = 580px로 지정*/ padding:5px 10px; background-color:#efefef; min-height:500px; /* min-height는 FF 에서만 됩니다. 하지만 사용해도 상관없습니다. IE에서는 처리하지 않기 때문 입니다.*/ } #footer{ height:75px; background-color:#999; background-image:url(h_dot2x.gif); background-position: top; /* h_dot2x.gif 의 시작 위치를 지정*/ background-repeat:repeat-x; /*가로 반복*/ clear:left; /*float:left 해제*/ padding:5px; } .column{float:left;} /*float 시킬 div에만 적용시킬 class 지정 */ --> </style> </head>
<body>
<div id="header"> <a href="index.html">Home</a> </div> <div id="wrap"> <div id="left_column" class="column"> <div><a href="menu01.html">Menu 01</a></div> <div><a href="menu02.html">Menu 03</a></div> <div><a href="menu03.html">Menu 03</a></div> <div><a href="menu04.html">Menu 04</a></div> <div><a href="menu05.html">Menu 05</a></div> </div> <div id="right_column" class="column">
<h1>Welcome to xHTML world!</h1> <p>이 문서는 xhtml 로 만든 페이지 입니다. xhtml 별거 아닙니다. 이 문장들은 p tag 속에서 사용했습니다. xhtml 문서를 만들고 싶으면 자신 없는 script나 css 활용은 극도로 자제하셔야 됩니다. 물론 이 페이지는 W3C의 xhtml validation을 pass 한 문서입니다. </p> <p>왼쪽 menu에서 menu 50은 menu 05를 잘 못 입력한 것 입니다. 이 부분을 수정하려면 body.js를 열고 menu 50 에서 50을 05로 고치세요. 그러면 모든 파일에 일괄적으로 적용됩니다. </p> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div> </div> <div id="footer">Page Footer</div>
</body> </html>
코드 실행 하기

위의 file 에서 Style block 속의 내용을 따로 빼 내서 my_style.css 로 아래와 같이 저장합니다.

my_style.css
body{
margin:0;
font:12px tahoma;
color:#333;
background-color:#efefef;
}

#header{
height:100px;
padding:5px;
background-color:#aaa;
background-image:url(h_dot2x.gif);
background-position:left bottom; 
background-repeat:repeat-x;
}

#wrap{
width:750px;
background-image:url(v_dot2x.gif);
background-position:149px 2px;
background-repeat:repeat-y;
background-color:#ccc;
}

#left_column{
width:130px; 
padding:5px 10px;
}

#right_column{
width:580px; 
padding:5px 10px;
background-color:#efefef;
min-height:500px;
}

#footer{
height:75px;
background-color:#999;
background-image:url(h_dot2x.gif);
background-position: top;
background-repeat:repeat-x; 
clear:left;
padding:5px;
}

.column{
float:left;
}

이제 my_style.css 를 Link tag을 사용해서 문서에 link 시킵니다.

my_style.css가 link된 index.html의 full code
<!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">
    <head>
        <title>Welcome to xHTML world!</title>
        
<link rel="stylesheet" type="text/css" href="my_style.css" /> </head>
<body> ... ... 중략 ... </body> </html>

위의 각 색깔 별로 구분된 부분을 각각 head.js, body.js, tail.js 로 나누어 아래와 같이 각각 저장합니다.

head.js
document.writeln('        <meta http-equiv="content-type" content="text/html; charset=euc-kr" />')
document.writeln('        <link rel="stylesheet" type="text/css" href="my_style.css" />')
document.writeln('    </head>')
body.js
document.writeln('        <div id="header">')
document.writeln('            <a href="index.html">Home</a>')
document.writeln('        </div>')
document.writeln('        <div id="wrap">')
document.writeln('            <div id="left_column" class="column">')
document.writeln('                <div><a href="menu01.html">Menu 01</a></div>')
document.writeln('                <div><a href="menu02.html">Menu 02</a></div>')
document.writeln('                <div><a href="menu03.html">Menu 03</a></div>')
document.writeln('                <div><a href="menu04.html">Menu 04</a></div>')
document.writeln('                <div><a href="menu05.html">Menu 50</a></div>')
document.writeln('            </div>')
document.writeln('            <div id="right_column" class="column">')
tail.js
document.writeln('            </div>')
document.writeln('        </div>')
document.writeln('        <div id="footer">Page Footer</div>')

이제 완성된 JavsScript template를 사용할 모든 문서에 link 시키면 되겠습니다. 또한 눈여겨 볼 부분은 document.writeln('...') 속의 단순 따옴표( ' ) 로서 괄호 속에 들어가는 html attribute 의 속성값을 이중 따옴표( " ) 로 했기 때문에 묶어주는 따옴표는 단순 따옴표로 표기 했습니다. 물론 반대가 되어도 상관 없습니다. 이 부분에 대한 설명은 이 사이트 JavaScript > Tutorial > Variables 의 특수 문자의 출력과 따옴표의 처리를 참고 하세요.

JavsScript Template 이 link 된 index.html
<!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">
    <head>
        <title>Untitled</title>
        <script type="text/javascript" src="head.js"></script>
    <body>
        <script type="text/javascript" src="body.js"></script>
            <h1>Welcome to xHTML world!</h1>
            <p>이 문서는 xhtml 로 만든 페이지 입니다. xhtml 별거 아닙니다. 
            이 문장들은 p tag 속에서 사용했습니다. 
            xhtml 문서를 만들고 싶으면 자신 없는 script나 css 활용은 극도로 자제하셔야 됩니다. 
            물론 이 페이지는 W3C의 xhtml validation을 pass  한 문서입니다.
            </p>
            <p>왼쪽 menu에서 menu 50은 menu 05를 잘 못 입력한 것 입니다. 
            이 부분을 수정하려면 body.js를 열고 menu 50 에서 50을 05로 고치세요. 
            그러면 모든 파일에 일괄적으로 적용됩니다. 
            </p>
            <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
            <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
            <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
            <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        <script type="text/javascript" src="tail.js"></script>
    </body>
</html>

이제 JavaScript Template이 완성 되었습니다. 완성된 index.html 을 열고 우클릭 후 source 보기 를 하고 위의 내용을 test 해 보시기 바랍니다. 이 파일과 관련 파일들(.html, .js, .css, .gif)은 압축해서 자료실(Data Room)에 올려 놓겠습니다.



HTML page 사용자와 '게시판'

사실 'HTML page 사용자' 라는 표현이 적절한지는 모르겠습니다. 왜냐하면 PHP 이건 ASP 이건 어차피 HTML code를 사용하는 이상 HTML 형식을 벗어 날 수 없기 때문에 모두가 HTML 사용자 이지만 이 페이지에서 말하는 HTML page 사용자란 확장자가 .htm, .html 등을 사용하는 문서를 작성하고, 사용하는 사람을 뜻하는 말 입니다. 그런데 이런 사람들 중에 특히 자신의 홈페이지를 가지고 싶어하는 초보자들의 경우 대 부분 무료 홈페이지 계정을 이용하게 되는데, 이 때 자신이 작성한 문서와 함께 꼭 필요로 하는 것 이 바로 '게시판' 기능 입니다. 하지만 무료 계정 사용자가 사용할 수 있는 게시판이라는게 역시 그 계정이나 다른 계정에서 제공하는 무료 게시판 정도 이기 때문에 그런 게시판을 자신의 입맛에 딱 맞게 사용하기란 현실적으로 힘든 일 입니다.

더군다나 이 페이지에서 소개하는 NoFrame layout을 사용할 경우 대 부분의 초보자들이 어떻게 게시판과 연결 시켜야 되는지 몰라서 애를 먹는 경우가 태반이어서, 이 경우 고민 끝에 NoFrame layout을 포기하고(사실 noframe page를 안 쓴다고 나쁠 건 없습니다.) frameset이나 iframe 등을 사용하게 되는 것 같습니다. 그게 게시판을 연결 시키는 가장 쉬운 방법이기 때문 이겠죠. NoFrame layout의 mechanism을 모르는 초보자에겐 어쩔 수 없는 일이기도 합니다. 그래서 지금 부터 noframe layout에서 무료 게시판을 연결 시키는 방법에 대해 알아 보도록 하겠습니다. 그런데 이 무료 게시판이라는게 종류도 많고 사용법도 저마다 다르기 때문에 가장 일반적인 예를 들어 설명하죠. 일단 noframe layout에 게시판을 연결하기 위해서 어떤 무료 게시판을 선택해야 되는지에 대한 선택 기준 부터 설명하겠습니다. 제가 알기로는 요즘은 무료 게시판들이 대 부분 아래의 기능을 제공하는 것으로 압니다만...

아래의 두 가지 사항을 만족시키는 무료 게시판이라면 NoFrame layout이 가능하겠습니다.

  • 게시판의 size, 색상, 글꼴 등을 사용자가 setting 할 수 있는가.
    특히 게시판의 가로, 세로 size는 필수이고, margin, 줄간격 등, 세부적인 사항까지 setting이 가능하면 더욱 좋습니다.
  • Header 와 Footer 를 제공하는가.
    이 부분이 가장 중요한 부분입니다. Header는 게시판에 따라 '게시판 상단 html' 이라고 표현하는 계정도 있고, Footer는 '게시판 하단 html' 이라고도 부르더군요. 설명하자면 게시판이 위에서 소개한 sample 중에 index.html 에서의 <div id="right_column" class="column">과 </div> 사이에 들어가는 본문 부분 이라면 Header는 <!DOCTYPE ~ 에서 시작해서 <div id="right_column" class="column"> 까지의 내용이고 Footer는 본문 이후의 </div> ~ 부터 </html> 까지가 해당 되겠습니다.

script tag의 허용 여부

'Script tag의 허용 여부'란 무료 게시판에서 제공하는 Header와 Footer에 script tag을 사용할 수 있는지 없는지의 여부를 말합니다. 어떤 무료 게시판의 경우에는 이 script tag을 허용하지 않는 경우도 있는 것으로 알고 있습니다. 이 경우에는 위에서 설명하는 JavaScript Template을 사용할 수 없습니다. 따라서 아래와 같이

<script type="text/javascript" src="head.js"></script>

의 형태로 그대로 게시판 Header 나 Footer에 code를 집어 넣을 수 없고 <!DOCTYPE ~ 에서 시작해서 <div id="right_column" class="column"> 까지의 내용을 Header에, 본문 이후의 </div> ~ 부터 </html> 까지의 내용을 Footer에 full code로 넣어 줘야 되겠죠. 물론 자기가 직접 운영하는 server나 호스팅 계정을 가진 경우 보다는 다소 고달픈 작업이기는 하지만 그래도 무료 게시판 만이 가지는 매력이 있지 않겠습니까. 공짜 라는 것...

이상으로 JavaScript Template을 사용한 Page layout에 대해 알아 보았습니다. 그러면 PLS Part VII 에서...





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

Top
Back
New
검색