XE Skin Manual Ko (v1.0)

Copyright 2010 NHN Corp. All Rights Reserved.
NHN NHN
, , .
. NHN
, .
, NHN
.
URL
,
.
NHN .

XE LGPL(GNU Lesser General Public License) v2 . LGPL
v2 v3 . LGPL GPL
. LGPL GPL
. GPL GPL
, LGPL
. LGPL
. .
LGPL : http://www.gnu.org/copyleft/lesser.html
GPL : http://www.gnu.org/licenses/gpl.html

XE . XE core 1.4.4.2
.
XE . XE
HTML CSS, , jQuery
.
XE "XE " .
.
: developers@xpressengine.com

1.0
2010.12.31
1.0
, ,
.
() / / / /
() , , , , .
() : (, )
: ' '
: >
: home page .

.
COPYDATASTRUCT st;
st.dwData = PURPLE_OUTBOUND_ENDING;
st.cbData = sizeof(pp);
st.lpData = &pp;
::SendMes(GetTargetHwnd(), WM_COPYDATA, (WPARAM)this->m_hWnd, (LPARAM)&st);
1. XE __________________________________ 11
1.1
XE _______________________________________________________________________________ 12
1.2
XE _____________________________________________________________ 13
2. XE _________________________________ 15
2.1
2.2
2.3
2.4
HTML _____________________________________________________________________________ 16
2.1.1
, ____________________________________________________________________ 16
2.1.2
HTML ________________________________________________________________ 16
2.1.3
____________________________________________________________ 17
2.1.4
__________________________________________________________ 17
CSS ________________________________________________________________________________ 19
2.2.1
, _________________________________________________________________ 19
2.2.2
CSS ________________________________________________________________ 19
jQuery _____________________________________________________________ 24
2.3.1
jQuery ___________________________________________________________ 24
2.3.2
XE __________________________________________ 24
2.3.3
________________________________________________ 25
2.3.4
HTML jQuery ____________________________________________________ 26
2.3.5
jQuery _________________________________________________________ 26
XE ___________________________________________________________________________ 28
2.4.1
________________________________________________________________________________ 28
2.4.2
XE core _______________________________________________________________________ 29
2.4.3
_____________________________________________________________________________ 30
2.4.4
_____________________________________________________________________________ 31
2.4.5
PHP ________________________________________________________________ 32
2.4.6
include __________________________________________________________________________ 32
2.4.7
CSS _____________________________________________________________________ 33
2.4.8
JS _______________________________________________________________________ 35
2.4.9
XML JS _________________________________________________________________ 36
2.4.10 _____________________________________________________________________ 37
2.4.11 XE core 1.4.4 _____________________________________________________ 37
3. ________________________________ 39
3.1
________________________________________________________________________40
3.2
_____________________________________________________________41
3.3
__________________________________________________ 42
3.3.1
________________________________________________________42
3.3.2
_____________________________________________________ 42
3.4
_________________________________________________________________ 44
3.5
_____________________________________________________________________________46
3.6
_______________________________________________________________________49
3.7
__________________________________________________________________________________ 54
3.8
_____________________________________________________________________57
3.9
_____________________________________________________________59
3.10 CSS __________________________________________________________________________________66

3.11 ________________________________________________________________________68
4. __________________________________ 69
4.1
___________________________________________________________________________70
4.2
__________________________________________________________________________ 71
4.3
_______________________________________________________________72
4.4
_________________________________________________________ 73
4.4.1
__________________________________________________________ 73
4.4.2
____________________________________________________________ 73
4.5
____________________________________________________________________ 74
4.6
________________________________________________________________76
4.7
/ ____________________________________________________________________ 79
4.7.1
__________________________________________________________________________ 79
4.7.2
__________________________________________________________________________ 79
4.8
__________________________________________________________________________ 81
4.9
__________________________________________________________________________ 94
4.10 __________________________________________________________________________ 100

4.11 / ____________________________________________________________108
4.11.1 __________________________________________________________________108
4.11.2 ____________________________________________________________________109
4.11.3 _____________________________________111
4.12 __________________________________________________________________________ 114
4.12.1 __________________________________________________________ 114
4.12.2 ____________________________________________________________ 115
4.12.3 __________________________________________________________ 117
4.13 ____________________________________________________________________ 120
4.14 _______________________________________________________________ 122
4.15 CSS __________________________________________________________________________________124
4.16 ________________________________________________________________________127

2-1 _______________________________________________________________21
2-2 _________________________________________________________________22
2-3 _______________________________________________________________________23
2-4 XE core _______________________________________________________________________ 29
2-5 _________________________________________________________________30
2-6 _________________________________________________________________31
2-7 include _______________________________________________________________ 32
2-8 media _____________________________________________________________________ 33
2-9 XE core 1.4.4 ____________________________________________37
4-1 ____________________________________________________________73

1-1 _________________________________________________________12
3-1 __________________________________ 40
3-2 __________________________________________________ 42
3-3 ________________________________________________ 60
3-4 CSS _________________________________________________67
4-1 __________________________________________________ 71
4-2 _________________________________________________ 81
4-5 ________________________________________________________________84
4-6 - _________________________________ 92
4-7 - _________________________________ 93
4-8 _________________________________________________________94
4-10 _________________________________________98
4-11 _________________________________________________ 99
4-12 ________________________________________________________101
4-13 __________________________________________ 111
4-14 ________________________________________________114
4-15 __________________________________________________ 116

4-16 _______________________________________________ 118
4-17 __________________________________________________ 120
4-18 _____________________________________________ 122
1. XE
XE .
1. XE
1.1
XE
XE . , , ,
. XE XE
(http://www.xpressengine.com) ,
.
() .
1-1
'skins'
.
.
12 x
1. XE
1.2
XE
XE HTML CSS, , XE .
HTML(Hyper Text Markup Language)
. , , HTML
. HTML
.
CSS(Cascading Style Sheet)
HTML CSS .
HTML , CSS
. HTML CSS , , ,
, , .
jQuery
HTML, CSS XE .

. ,
. XE
jQuery .
, HTML
.
.
XE
XE PHP DB
. XE
.
13
2. XE
XE HTML CSS, /jQuery, XE .
2. XE
2.1
HTML
HTML '' '' . HTML
CSS . '' ''
HTML . ''
CSS HTML .
2.1.1
,
HTML , .
(Element)
<h1 title="Xpress Engine">XE</h1>
<h1> </h1> ''. '<h1> ' , <h1>

</h1> ' ' ' ' . 'XE'
'(contents)' .
'h' 'heading' .
'1' .
, .
'' CSS
.
(Attribute)
'title' . '' .
'title' ' ' . HTML
.
(Value)
'' . 'Xpress Engine' 'title' . ''

'' , .
.
, . 'Xpress Engine' .
2.1.2
HTML
HTML .
16 x
2. XE
<h1>. .
</h1>. .
HTML
.
.
<img />
2.1.3

HTML .
, 'XE' .
<h1 title="Xpress Engine">
<a href="index.html">XE</a>
</h1>
<h1> <a> .
. <h1> ' ' , <a>
' ' .
<a> . href <a>
. , "XE index.html
" .
, .
.
<h1 title="Xpress Engine">
<a href="index.html">XE</h1>
</a>
2.1.4

' ' . <div>, <h>, <p>
. ' ' . <span>,
<img>, <a> .
.
HTML .
. <h1>
<a> .
<h1><a>XE</a></h1>

.
<a><h1>XE</h1></a>

17
2. XE
W3C HTML 4.01 : http://trio.co.kr/webrefer/html/cover.html

W3C HTML 4.01 : http://trio.co.kr/webrefer/html/index/elements.html
W3C HTML 4.01 : http://trio.co.kr/webrefer/html/index/attributes.html
W3C XHTML 1.0 : http://trio.co.kr/webrefer/xhtml/overview.html
W3C : http://validator.w3.org/
W3 Schools : http://www.w3schools.com/
18 x
2. XE
2.2
CSS
HTML '' '' CSS ' '
. XE CSS
HTML HTML CSS HTML CSS
. CSS
HTML .
2.2.1
,
CSS '' '' '' . '' HTML ''
'' '' HTML .
(selector)
h1 { font-size:24px; }
'h1' ''. <h1> .

(property)
'font-size' ''. <h1> .

(value)
'24px' ''. <h1> font-size ( ) .
2.2.2
CSS
CSS HTML .
CSS . CSS .
(type selector)
h1 { }
HTML . HTML
. HTML .
(id selector)
#selector { }
(#) . HTML
. .
.
19
2. XE
(_) (-) .
HTML 2 .
HTML .
(class selector)
.selector { }
(.) . HTML
. .
.
(_) (-) .
HTML 2 .
(child selector)
h1>a { }
(>) . HTML
. 2 ( ) .
.
IE6 .
(descendant selector)
h1 a { }
. HTML
. , <h1> <a>
.
<h1><a>XE</a></h1>
<h1> <a> .
(universal selector)
* { }
20 x
2. XE
(*) . HTML .
HTML CSS .

.
(pseudo selector)
a:focus { }
(:) . '
' HTML ' ' .
HTML HTML
HTML .
.
2-1

:link
a:link
'a' .
:visited
a:visited
a .
:hover
a:hover
:active
a:active
.
:focus
a:focus
:first-child
li:first-child
:lang(language)
p:lang(en)
IE6 ':first-child, :lang()' . IE6

:hover, :active, :focus 'a' .
'a' :link() :visited(

) :hover() :active() :focus() .
. , :hover
a:visited :hover .
21
2. XE
:visited :hover
.
.
2-2

:first-line
p:first-line
.
.
:first-letter
p:first-letter
.
:before
div:before{ content:"" }
(div
''
.)
:after
div:after{ content:"" }
(div
''
.)
IE6 ' ' .
(Selector Grouping)
.apple,
.tomato { color:red }
(,) .
.
.
.apple { color:red }
.tomato { color:red }
(Adjacent Sibling Selector)

h1+h2 { color:red }
(+) .
.
, HTML <h1> <h2>
<h2> .
22 x
2. XE
<h1>XE</h1>
<h2>Textyle</h2>
IE6 ' ' .
(Attribute Selector)
input[checked] { ... } /* input checked */
input[type=text] { ... } /* input type text */
img[alt~=dog] { ... }
/* img alt 'dog' */
p[lang|=en] { ... } /* p lang en-us en- */
HTML . .
2-3

[attribute]
HTML attribute input[checked]

.
[attribute=value]
HTML attribute input[type=text]

value
.
[attribute~=value]
HTML attribute img[alt~=dog]

value
.
[attribute|= value]
HTML attribute value
p[lang|=en]
IE6 ' ' .
CSS : http://trio.co.kr/webrefer/css2/cover.html
CSS Reference: http://www.w3schools.com/css/css_reference.asp
23
2. XE
2.3
jQuery
XE jQuery
. jQuery
.
XE HTML .
2.3.1
jQuery
XE core jQuery
jQuery . XE
HTML <head> jQuery .
<script type="text/javascript" src="./common/js/jquery.js"></script>
HTML <head> <body>

XE jQuery HTML <head>
.
. HTML
jQuery jQuery
XE jQuery HTML <head> .
XE jquery.js .
2.3.2
XE
jQuery .
HTML <head> <body>
HTML . HTML
.
HTML *.js HTML
.
.
<head> JS

HTML <head>
24 x
2. XE
. <body> HTML
.
<head> HTML HTML
.
<body> JS
HTML
HTML <body> . HTML

HTML .
XE "JS " .
2.3.3

HTML XE HTML
<head> <body> .
<body> <body>
HTML .
<body>
...
<script type="text/javascript" src="xxx.js"></script>
...
</body>
HTML
.
<body>
...
<script type="text/javascript">
// <![CDATA[
.
// ]]>
</script>
...
</body>
<![CDATA[...]]>
HTML . <![CDATA[...]]> (<, >)
HTML HTML
. <![CDATA[...]]>
.
25
2. XE
2.3.4
HTML jQuery
XE jQuery <script> jQuery
. HTML HTML
.
jQuery .
jQuery HTML jQuery
.
// <![CDATA[
jQuery(function($){
jQuery .
});
// ]]>
</script>
jQuery 'jQuery' ' ($)' . XE '$'

jQuery '$'
. XE jQuery jQuery(function($){ ... })
.
2.3.5
jQuery
jQuery ' ' .
'HTML ' .
.
<head>
<style type="text/css">
#help { display:none; }
</style>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<a href="#help" class="helpBtn"></a>
<p id="help"> CSS .<p>
// <![CDATA[
jQuery(function($){
$('a.helpBtn').click(function(){ // HTML
$('p#help').css('display','block'); //
});
});
// ]]>
</script>
</body>
'p#help' display:none 'a.helpBtn'

display:block . jQuery HTML
'' CSS ''.
26 x
2. XE
HTML jQuery
show(), hide() .
.
<head>
</style>
</head>
<body>
// <![CDATA[
jQuery(function($){
$('p#help').show(); // show()
});
});
// ]]>
</script>
</body>
'a.helpBtn'
.
<head>
</style>
</head>
<body>
// <![CDATA[
jQuery(function($){
$('p#help').toggle(); // toggle()
});
});
// ]]>
</script>
</body>
jQuery . jQuery jQuery

HTML .
jQuery HTML jQuery

(http://jquery.com/) .
27
2. XE
2.4
XE
XE PHP DB
. XE
.
XE XE .
HTML  . ) ...
<block> . ) <block>...</block>
HTML . ) <p cond="">...</p>
. ) {$content} .
<block> HTML XE core 1.4.4 . HTML

. cond
XE core 1.4.4 .
2.4.1

.
.
.

{$string}
({ }) ($) .
'(string)' .

{$string->string}
{$string->string->string}
' (->)'
.

{$string->string()}
{$string->string(string | integer)}
28 x
2. XE
' (->)' . (( ))
. (string) (integer) .
.
2.4.2
XE core
'XE core ' XE core . XE core
. '' .
XE core .
2-4 XE core
$is_logged
Welcome!
<p cond="$is_logged">Welcome!</p>
$current_url
URL
$request_uri
XE core URL
$logged_info
$logged_info->member_srl
$logged_info->user_id
$logged_info->email_address
$logged_info->email_id
$logged_info->email_host
$logged_info->user_name
$logged_info->nick_name
$logged_info->homepage
$logged_info->blog
$logged_info->birthday
(YYYYMMDD)
$logged_info->profile_image
$logged_info->image_name
$logged_info->image_mark
$logged_info->signature
$logged_info->group_list
29
2. XE
2.4.3
$logged_info->is_admin
$logged_info->is_site_admin
$module_info
$module_info->module
$module_info->use_mobile
$module_info->mid
$module_info->skin
$module_info->mskin
$module_info->browser_title
$module_info->string

. 'if, elseif, else, end' '' . if
end . PHP
PHP (&&, ||, ==, ! ) .
Welcome XE!" .
2-5

<p>Welcome XE!</p>

<block cond="">
XE core 1.4.4
<p>
XE core 1.4.4
<p>Welcome XE!</p>
</block>
<p cond="">
Welcome XE!
</p>
<p attr="value"|cond="">
Welcome XE!
</p>
30 x
<p> XE core 1.4.4

attr="value"
2. XE
<block> HTML XE core 1.4.4 . HTML

. 'cond'
HTML XE core 1.4.4 . 'cond'
.
if, elseif, else

.

<p>A .</p>

<p>A B .</p>

<p>A, B .</p>

XE core 1.4.4 'cond'

.
<p cond="A">A .</p>
<p cond="B">B .</p>
<p cond="!A && !B">A, B .</p>
2.4.4
. 'foreach,
end' '' . foreach end
.
2-6

<tr>...</tr>
$key <tr>...</tr>

<block loop="=>$val">
<tr>...</tr>
</block>
$key <tr>...</tr>
XE core 1.4.4
<tr loop="=>$val">...</tr>
$key <tr>...</tr>
XE core 1.4.4


<tr>...</tr>

$key <tr>...</tr>
<block loop="=>$key, $val">

<tr>...</tr>
</block>
$key <tr>...</tr>
XE core 1.4.4
<tr loop="=>$key,$val">...</tr>
$key <tr>...</tr>
XE core 1.4.4
31
2. XE

<tr>...</tr>

0 <tr>...</tr>
<block loop="$i=0;$i<100;$i++">
<tr>...</tr>
</block>
0 <tr>...</tr> XE core 1.4.4
<tr loop="$i=0;$i<100;$i++">...</tr>
0 <tr>...</tr> XE core 1.4.4
100
100
100
'loop' HTML XE core 1.4.4 . 'loop'

foreach .
2.4.5
PHP
XE PHP , (@)
PHP .
{@$is_logged=Context::get('is_logged')}
PHP .
PHP XE .
.
{@$test=364; $test=$test*$test}
.
{@
$test=364;
$test=$test*$test
}
2.4.6
include

. .
include .
2-7 include
32 x
include

header.html (include)
<include target="header.html" />
XE core 1.4.4
2. XE
<include /> HTML XE core 1.4.4 . HTML

include <include />
. 'target' XE core 1.4.4 . 'target'
(include) .
2.4.7
CSS
CSS HTML . XE core 1.4.4 CSS
optimizer CSS
.
CSS

<load target="xe.css" />
HTML <head> xe.css . <load /> XE core 1.4.4

. .
<head>
<link rel="stylesheet" type="text/css" href="xe.css" />
</head>
CSS HTML <head> . <body> CSS

HTML .
media
<load target=xe.css" media="print" />
CSS . <load /> media XE

core 1.4.4 . .
<head>
<link rel="stylesheet" type="text/css" href="xe.css" media="print" />
</head>
media . all.
.
2-8 media

all
media .
aural
( , )
braille
embossed
33
2. XE
handheld
print
projection
screen
()
tty
(Tele Type Writer)
tv
CSS media CSS .

media .
IE
<load target=xe.css" targetie="IE 6" />
targetie CSS IE
. <load /> targetie XE core 1.4.4 .
.

IE 6
.
CSS
<load target=xe.css" index="-1" />
index CSS . <load /> index XE

core 1.4.4 .
index .
, . index="-1"
CSS .
CSS
.
34 x
2. XE
2.4.8
JS
JS HTML . XE core 1.4.4 JS
optimizer JS
.
JS HTML <head> <body> . <head>
<body> JS HTML JS
.
<head> JS
xe.js HTML <head> .

<load target="xe.js" />
<load /> XE core 1.4.4 . .

<head>
<script type="text/javascript" src="xe.js"></script>
</head>
<body> JS
xe.js HTML <body> .
<load target="xe.js" type="body" />
<load /> HTML . .
media="all | aural | braille | embossed | handheld | print | projection | screen | tty | tv" CSS
. (,)
. all media="all".
targetie="IE 6 | IE 7 | IE8 | ..." IE IE CSS/JS

. " ".
index="integer" CSS/JS .
.
. CSS
.
type="head | body" JS <head> <body>

. head JS <head>
.
<load /> XE core 1.4.4 . <body> JS

<body> JS . .
<body>
...
</body>
35
2. XE
IE
<load target=xe.js" targetie="IE 6" />
targetie JS IE
. <load /> targetie XE core 1.4.4 .
.

IE 6
.
JS
<load target=xe.js" index="-1" />
index JS . <load /> index XE

core 1.4.4 .
index .
, . index="-1"
CSS .
2.4.9
XML JS
XML JS XML
. XML ,
. XML JS
.
XML JS CSS, JS .

XML JS XML JS . XE core

1.4.4 JS <head> .
.
<head>
</head>
XE core 1.4.4 JS <body> .


<load target=xe.xml" />
.
<body>
36 x
2. XE
...
</body>
<head> <body> XE core

1.4.4 .
2.4.10
XE core
.
XE core .
.
.
<img /> widget . <img /> HTML
widget XE
HTML .
.
<img widget="login_info" skin="xe_official" />
XE >
. "XE " .
2.4.11 XE core 1.4.4

XE core 1.4.4 . XE core
1.4.4 .
2-9 XE core 1.4.4

<block cond="">
<p>Welcome XE!</p>
</block>
<p cond="">
Welcome XE!
<p>
</p>
<p attr="value"|cond="">
Welcome XE!
<p>
attr="value"
</p>
<block loop="=>$val">
<tr>...</tr>
</block>
$key <tr>...</tr>
<tr loop="=>$val">...</tr>
$key <tr>...</tr>
37
2. XE
38 x
<block loop="=>$key, $val">

<tr>...</tr>
</block>
$key <tr>...</tr>
<tr loop="=>$key,$val">...</tr>
$key <tr>...</tr>
<block loop="$i=0;$i<100;$i++">
<tr>...</tr>
</block>
0 <tr>...</tr> 100
<tr loop="$i=0;$i<100;$i++">...</tr>
0 <tr>...</tr> 100
<include target="header.html" />
<load target="xxx.xxx" />
CSS/JS/SML JS <head>
<load target="xxx.xxx" type="body" />
JS/XML JS <body>
<unload target="xxx.xxx" />
CSS/JS/XML JS
3.
3.
3.1

XE . XE
. , , , ,
.
,
. ,
, , ,
.
.
3-1
XE core .
XE core /layouts/ . XE core
.
40 x
3.
3.2

.
.
,
.
.
http://doc.xpressengine.com/manual/user_layout.zip
41
3.
3.3
3.3.1

/xe/ XE core
.
/xe/layouts/
(user_layout) '/xe/layouts/' .
/xe/layouts/user_layout/
PC
.
3.3.2

.
.
(user_layout) .
3-2
info.xml
info.xml .
info.xml . 'conf' 'info.xml'
.
/xe/layouts/user_layout/conf/info.xml
layout.html
layout.html HTML CSS, JS . 'layout.html'
.
/xe/layouts/user_layout/layout.html
42 x
3.
CSS, JS, IMG

CSS, JS, IMG . 'conf'
. /user_layout/
css, js, img .
43
3.
3.4

info.xml . info.xml .
<?xml version="1.0" encoding="UTF-8"?>
<layout version="0.2">
<title xml:lang="ko"> </title>
<description xml:lang="ko"> </description>
<version>1.0</version>
<date>2010-12-24</date>
<author email_address="user@user.com" link="http://user-define.com/">
<name xml:lang="ko">User Name</name>
</author>
<menus>
<menu name="main_menu" maxdepth="2" default="true">
<title xml:lang="ko"></title>
</menu>
</menus>
</layout>
<?xml version="1.0" encoding="UTF8"?>
XML
. version XE core
. XE core 1.4.4.2
0.2 .
<title xml:lang="ko">...</title>
<description
xml:lang="ko">...</description>
<version>...</version>
<date>YYYY-MM-DD</date>
<author email_address="..."
link="...">
<name xml:lang="ko">...</name>
. --(YYYY-MM-DD)
.
. , ,
.
</author>
<menus>
XE
<menu name="main_menu"
maxdepth="2" default="true">
. <menus>...</menus> 2
<title
xml:lang="ko">...</title>
<menu>...</menu> .
</menu>
</menus>
info.xml <extra_vars>
. select, image, text, textarea
.
44 x
3.
...
<extra_vars>
<var name="colorset" type="select">
<description xml:lang="ko"> .</description>
<options value="black">
<title xml:lang="ko">Black ()</title>
</options>
<options value="white">
<title xml:lang="ko">White</title>
</options>
</var>
<var name="logo_image" type="image">
</var>
<var name="logo_url" type="text">
<description xml:lang="ko"> URL
.</description>
</var>
<var name="title_description" type="textarea">
<description xml:lang="ko"> .(HTML
)</description>
</var>
</extra_vars>
...
</layout>
<extra_vars>...</extra_vars>
<var name="colorset"
type="select">...</var>
select . {$layout_info->colorset}

<var name="logo_image"
type="image">...</var>
image . {$layout_info->image}

<var name="logo_url"
type="text">...</var>
text . {$layout_info->logo_url}

<var
name="title_description"
type="textarea">...</var>
textarea . {$layout_info>title_description}
info.xml XE > >

. .
45
3.
3.5

info.xml .
1. XE > .
2. .
info.xml <menu> 1 . <menu>

<menu> .

'' .
'user_layout' .
.
1. .
2. . 'user_layout'
.
46 x
3.
3. "?" .
' _1' .
' _1'
.
47
3.
layout.html "Err :
"./layouts/user_layout/layout.html" template file does not exist." .
48 x
3.
3.6

layout.html .
XE 'DOCTYPE, html, head, body' XE core .
.
HTML .
.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang=".." xml:lang=".." xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

</head>
<body>

</body>
</html>
'layout.html' HTML <body> HTML

. <body> HTML
'layout.html' . <head> XE
<body> .

header, gnb(global navigation bar), body, lnb(local navigation bar), content,
footer . layout.html .
<div class="user_layout">
<div class="header">
<h1>Site Logo</h1>
<hr />
<div class="gnb">.gnb</div>
</div>
<hr />
<div class="body">
<div class="lnb">.lnb</div>
<hr />
<div class="content">.content</div>
</div>
<hr />
<div class="footer">.footer</div>
</div>
HTML <div> CSS HTML

.
49
3.
{$content}
layout.html .
.
. '' .
(, , )
.
(, , ) ' '
.
{$content} '
' .
<h1>Site Logo</h1>
<hr />
<div class="gnb">.gnb</div>
</div>
<hr />
<div class="body">
<div class="lnb">.lnb</div>
<hr />
<div class="content">
.content{$content}
</div>
</div>
<hr />
</div>
{$content} ,
.
, .
XE ' ' ''
'' ' ' . XE URL
, URL ''
.

<div class="gnb">.gnb</div> . XE
,
.
.
2 .
<div class="gnb">
.gnb
<ul>
50 x
3.
<li loop="$main_menu->list=>$key1,$val1" class="active"|cond="$val1['selected']"><a

href="{$val1['href']}"
target="_blank"|cond="$val1['open_window']=='Y'">{$val1['link']}</a>
<ul cond="$val1['list']">
<li loop="$val1['list']=>$key2,$val2"
class="active"|cond="$val2['selected']"><a href="{$val2['href']}"
target="_blank"|cond="$val2['open_window']=='Y'">{$val2['link']}</a></li>
</ul>
</li>
</ul>
</div>
.
/
loop="$main_menu->list=>$key1,$val1"
cond="$val1['list']"
loop="$val1['list']=>$key2,$val2"
class="active"|cond="$val1['selected']
class="active"|cond="$val2['selected']"
<li>
class="active"
target="_blank"|cond="$val1['open_window']=='Y'"
target="_blank"
{$val1['href']}
{$val2['href']}
URL
{$val1['link']}
{$val2['link']}

<div class="lnb">.lnb</div> .
.
1 .
<div class="gnb">.gnb</div> 1~2
2~3 .

URL .
.
<div class="lnb">
.lnb
<h2 loop="$main_menu->list=>$key1,$val1" cond="$val1['selected']"><a
target="_blank"|cond="$val1['open_window']=='Y'">{$val1['link']}</a></h2>
<ul loop="$main_menu->list=>$key1,$val1" cond="$val1['selected'] && $val1['list']">
51
3.
<li loop="$val1['list']=>$key2,$val2" class="active"|cond="$val2['selected']"><a

<ul cond="$val2['list']">
<li loop="$val2['list']=>$key3,$val3"
class="active"|cond="$val3['selected']"><a href="{$val3['href']}"
</li>
</ul>
</li>
</ul>
</div>
.
/
loop="$main_menu->list=>$key1,$val1"
cond="$val1['selected']"
cond="$val1['selected'] && $val1['list']"
cond="$val2['list']"
<li>
class="active"
target="_blank"|cond="$val3['open_window']=='Y'" target="_blank"
{$val1['href']}
{$val2['href']}
{$val3['href']}
URL
{$val1['link']}
{$val2['link']}
{$val3['link']}

. .
. XE
> .
<div class="header">...</div>
<form class="search">...</form> .
52 x
3.
<h1>Site Logo</h1>
<form action="{getUrl()}" method="get" class="search">
<input type="hidden" name="vid" value="{$vid}" />
<input type="hidden" name="mid" value="{$mid}" />
<input type="hidden" name="act" value="IS" />
<input type="text" name="is_keyword" value="{$is_keyword}" title="{$lang>cmd_search}" class="iText" />
<input type="submit" value="{$lang->cmd_search}" class="btn" />
</form>
<hr />
<div class="gnb">
.gnb
...
</div>
</div>
<hr />
<div class="body">
<div class="lnb">
.lnb
...
</div>
<hr />
<div class="content">{$content}</div>
</div>
<hr />
</div>
{getUrl()}
URL
{$vid}
{$mid}
{$is_keyword}
{$lang->cmd_search}
.
.
. '' .

. XE
core .
.
<div class="lnb">...</div>
.
...
<div class="lnb">
.lnb
<div class="account">
<img widget="login_info" skin="xe_official" />
</div>
<h2>...</h2>
<ul>...</ul>
</div>
...
53
3.
3.7

XE
.
.
1. XE > .
2. .

.
3. user_menu .
54 x
3.
4. user_menu (
) , (
. "XE "
.
55
3.
'user_menu' .
.
' URL' mid() . mid

. mid
.
56 x
3.
3.8

'user_menu' .
'user_menu' .
1. XE > .
2. _1 (
) .
3. user_menu .

. user_menu .
57
3.
58 x
3.
3.9

.

1. XE > .
2. .
3. , , ,
.
, , .
'user_layout' . 'user_layout' "
" .
59
3.

.
'main' .
'example.com' .
mode_rewrite : http://example.com/main/
mode_rewrite : http://example.com/?mid=main
main .
3-3
,
. 'Site Logo, gnb, lnb, content, footer'
'layout.html' . , ,
, . content
60 x
3.
.
{$content} .
' URL' mid()

.

3-3
. .
1. .
2. .
61
3.
3. , .
.
.
4. .
62 x
3.
5. ?" .
. content
, ,
.
63
3.
64 x
3.
. CSS
.
65
3.
3.10 CSS
CSS . CSS
. CSS
.
1. user_layout.css .lnb .content
.
@charset "utf-8";
/* Layout */
hr{ display:none;}
form, fieldset{ border:0; margin:0; padding:0;}
.user_layout{ width:960px; margin:0 auto;}
.header{ zoom:1; background:#ddd;}
.header:after{ content:""; display:block; clear:both;}
.header .search{ float:right;}
.gnb{ float:left;}
.body{ margin:20px 0; zoom:1; background:#eee;}
.body:after{ content:""; display:block; clear:both;}
.lnb{ float:left; width:200px; background:#ddd;}
.account{}
.content{ float:right; width:740px; background:#ddd;}
.footer{ background:#ddd;}
2. layout.html user_layout.css .
<load target="user_layout.css" />
"CSS " .
3. CSS .
'example.com' .
mod_rewrite : http://example.com/main/
mod_rewrite : http://example.com/?mid=main
user_layout.css .
66 x
3.
3-4 CSS
CSS <load /> ,
CSS (target) .
67
3.
3.11
. jQuery
.
.
1. user_layout.js jQuery .
// <![CDATA[
jQuery(function($){
// jQuery .
});
// ]]>
2. layout.html user_layout.js .
<load target="user_layout.js" type="body" />
"JS " .
3. .
'example.com' .
mod_rewrite : http://example.com/main/
mod_rewrite : http://example.com/?mid=main
user_layout.js <load />

, user_layout.js (target) .
XE jQuery " jQuery " .

jQuery http://jquery.com/ .
68 x
4.
4.
4.1

.
, , , , , , , ,
.
70 x
4.
4.2

XE . XE
.

XE > > >
.
FTP
(/modules/board/) PC .
. 'skins'
. 'skins' .
4-1

XE PC FTP
'/modules/' . /xe/ XE
core '/xe/modules/' .
'/modules/board/'
'/xe/modules/board/'.
71
4.
4.3

.
.
.
.
72 x
http://doc.xpressengine.com/manual/user_board.zip
4.
4.4
4.4.1

.
/modules/board/skins/
(user_board) '/modules/board/skins/'
.
/modules/board/skins/user_board
PC .
4.4.2

.
4-1
skin.xml
list.html
write_form.html
delete_form.html
comment_form.html
delete_comment_form.html
delete_trackback_form.html
input_password_form.html
message.html
_header.html
(include)
_footer.html
(include)
_read.html
(include)
_comment.html
(include)
_trackback.html
(include)
user_board.css
73
4.
4.5

skin.xml .
skin.xml .
skin.xml .
<skin version="0.2">
<title xml:lang="ko">user_board</title>
<description xml:lang="ko"> user_board.</description>
<version>1.0</version>
<date>2010-12-24</date>
<author email_address="user@user.com" link="http://user-define.com/">
<name xml:lang="ko">User Name</name>
</author>
<license>LGPL v2</license>
<extra_vars>
<var name="title" type="text">
</var>
<var name="comment" type="textarea">
</var>
</extra_vars>
</skin>
XML
. version XE core
<skin version="0.2">
. XE core 1.4.4.2
0.2 .
<title xml:lang="ko">...</title>
<description
xml:lang="ko">...</description>
<version>...</version>
<date>YYYY-MM-DD</date>
<author email_address="..." link="...">

<name xml:lang="ko">...</name>
</author>
<license>LGPL v2</license>
<extra_vars>...</extra_vars>
74 x
. --(YYYY-MM-DD)
.
. , ,
.
. XE core LGPL v2
.

.
4.
<var name="title" type="text">

<description xml:lang="ko">
</description>
</var>
<var name="title" type="textarea">
<title xml:lang="ko">
</title>
<description xml:lang="ko">
</description>
</var>
'user_board' skin.xml
'user_board' .
skin.xml <extra_vars>
. select, image
.
...
<extra_vars>
<var name="colorset" type="select">
<options value="black">
<title xml:lang="ko">Black ()</title>
</options>
<options value="white">
<title xml:lang="ko">White</title>
</options>
</var>
<var name="board_image" type="image">
</var>
</extra_vars>
...
</layout>
<var name="colorset"
type="select">...</var>
select . {$module_info->colorset}
<var name="board_image"
type="image">...</var>
image . {$modul_info->image}
skin.xml XE > > >

. .
75
4.
4.6

.
1. XE > .
2. .
3. .
.
76 x
: test_board
: user_board
4.
4. test_board ,
.
: XE
: XE .
77
4.
78 x
4.
4.7
4.7.1

.
XE ,
CSS _header.html .
_header.html (include) .
<div class="user_board">
<div class="board_header" cond="$module_info->title || $module_info->comment">
<h2 cond="$module_info->title">
<a href="{getUrl('','mid',$mid)}">{$module_info->title}</a>
</h2>
<p cond="$module_info->comment">{$module_info->comment}</p>
</div>
<div class="user_board"> .
_footer.html . <div class="user_board">
CSS .
.
/
cond="$module_info->title ||
$module_info->comment"
cond="$module_info->title"
{$module_info->title}
cond="$module_info->comment"
{$module_info->comment}
{getUrl('','mid',$mid)}
URL
XE core 1.4.4 .
"XE " .
4.7.2

.
_header.html <div
class="user_board"> .
</div>
79
4.
_footer.html _header.html (include).
80 x
4.
4.8

.
list.html .
. 'XE
' "XE ."
.
4-2
.

.
list.html .
_header.html, _footer.html (include)
list.html _header.html _footer.html (include)
.
<include target="_header.html" />
.
81
4.
<include target="_footer.html" />
.
XE
_header.html (include)
_footer.html (include)
XE core 1.4.4 .
"XE " .

. list.html
" "
.
<p cond="!$document_list && !$notice_list" class="no_document">{$lang->no_documents}</p>
.
XE /
cond="!$document_list && !$notice_list"
{$lang->no_documents}
" "
XE core 1.4.4 .
"XE " .

. HTML
. (LIST HEADER), (NOTICE),
(LIST) , .
<p cond="!$document_list && !$notice_list">{$lang->no_documents}</p>
<table width="100%" border="1" cellspacing="0" summary="List of Articles" id="board_list"
class="board_list" cond="$document_list || $notice_list">
<thead>

<tr>
<th scope="col"></th>
82 x
4.
<th scope="col"> </th>

</tr>

</thead>
<tbody>

<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>


<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>

</tbody>
</table>
.
XE /
cond="$document_list || $notice_list"
XE core 1.4.4 .
"XE " .

, , , , .

.
, XE > (
.
.
83
4.
4-3
XE 12 .

. 10
. 10
.
list.html <thead> 10
.
...
<thead>
<tr>
<block loop="$list_config=>$key,$val">
<th scope="col" cond="$val->type=='no'">{$lang->no}</th>
<th scope="col" class="title" cond="$val->type=='title'">{$lang->title}</th>
<th scope="col" cond="$val->type=='nick_name'">{$lang->writer}</th>
<th scope="col" cond="$val->type=='user_id'">{$lang->user_id}</th>
<th scope="col" cond="$val->type=='user_name'">{$lang->user_name}</th>
<th scope="col" cond="$val->type=='regdate'"><a
href="{getUrl('sort_index','regdate','order_type',$order_type)}">{$lang->date}</a></th>
<th scope="col" cond="$val->type=='last_update'"><a
href="{getUrl('sort_index','last_update','order_type',$order_type)}">{$lang>last_update}</a></th>
<th scope="col" cond="$val->type=='last_post'"><a
href="{getUrl('sort_index','last_update','order_type',$order_type)}">{$lang>last_post}</a></th>
84 x
4.
<th scope="col" cond="$val->type=='readed_count'"><a

href="{getUrl('sort_index','readed_count','order_type',$order_type)}">{$lang>readed_count}</a></th>
<th scope="col" cond="$val->type=='voted_count'"><a
href="{getUrl('sort_index','voted_count','order_type',$order_type)}">{$lang>voted_count}</a></th>
</block>
</tr>
</thead>
...
.
XE /
<block loop="$list_config=>$key,$val">...</block>
<th scope="col" cond="$val->type=='no'">{$lang->no}</th>
<th scope="col" class="title" cond="$val->type=='title'">
{$lang->title}
</th>
<th scope="col" cond="$val->type=='nick_name'">
{$lang->writer}
</th>
<th scope="col" cond="$val->type=='user_id'">
{$lang->user_id}
</th>
<th scope="col" cond="$val->type=='user_name'">
{$lang->user_name}
</th>
<th scope="col" cond="$val->type=='regdate'">
<a href="{getUrl('sort_index','regdate','order_type',$order_type)}">
{$lang->date}
</a>
</th>
<th scope="col" cond="$val->type=='last_update'">
<a
href="{getUrl('sort_index','last_update','order_type',$order_type)}"> )
{$lang->last_update}
</a>
</th>
<th scope="col" cond="$val->type=='last_post'">
<a
href="{getUrl('sort_index','last_update','order_type',$order_type)}"> )
{$lang->last_post}
</a>
</th>
<th scope="col" cond="$val->type=='readed_count'">
<a
href="{getUrl('sort_index','readed_count','order_type',$order_type)}"> )
{$lang->readed_count}
</a>
</th>
<th scope="col" cond="$val->type=='voted_count'">
<a
85
4.
XE /
href="{getUrl('sort_index','voted_count','order_type',$order_type)}">
{$lang->voted_count}
</a>
</th>
XE core 1.4.4 .
"XE " .

.
.
list.html <tbody>
.
...
<tbody>

<tr class="notice" loop="$notice_list=>$no,$document">
<td class="notice" cond="$val->type=='no'">
<block cond="$document_srl==$document->document_srl">»</block>
<block cond="$document_srl!=$document->document_srl">{$lang->notice}</block>
</td>
<td class="title" cond="$val->type=='title'">
<a href="{getUrl('document_srl',$document->document_srl, 'listStyle',
$listStyle, 'cpage','')}">
{$document->getTitle()}
</a>
<a cond="$document->getCommentCount()" href="{getUrl('document_srl', $document>document_srl)}#comment" class="replyNum" title="Replies">
[{$document->getCommentCount()}]
</a>
<a cond="$document->getTrackbackCount()" href="{getUrl('document_srl',
$document->document_srl)}#trackback" class="trackbackNum" title="Trackbacks">
[{$document->getTrackbackCount()}]
</a>
</td>
<td class="author" cond="$val->type=='nick_name'">{$document->getNickName()}</td>
<td class="author" cond="$val->type=='user_id'">{$document->getUserID()}</td>
<td class="author" cond="$val->type=='user_name'">{$document->getUserName()}</td>
<td class="time" cond="$val->type=='regdate'">{$document->getRegdate('Y.m.d')}</td>
<td class="time" cond="$val->type=='last_update'">{zdate($document>get('last_update'),'Y.m.d')}</td>
<td class="lastReply" cond="$val->type=='last_post'">
<block cond="(int)($document->get('comment_count'))>0">
<a href="{$document->getPermanentUrl()}#comment" title="Last Reply">
{zdate($document->get('last_update'),'Y.m.d')}
</a>
<span cond="$document->get('last_updater')">
<sub>by</sub>
{htmlspecialchars($document->get('last_updater'))}
</span>
</block>
<block cond="(int)($document->get('comment_count'))==0"> </block>
</td>
<td class="readNum" cond="$val->type=='readed_count'">{$document>get('readed_count')>0?$document->get('readed_count'):'0'}</td>
<td class="voteNum" cond="$val->type=='voted_count'">{$document>get('voted_count')!=0?$document->get('voted_count'):'0'}</td>
</block>
</tr>
86 x
4.



<tr loop="$document_list=>$no,$document">
<td class="no" cond="$val->type=='no'">
<block cond="$document_srl==$document->document_srl">»</block>
<block cond="$document_srl!=$document->document_srl">{$no}</block>
</td>
<a href="{getUrl('document_srl',$document->document_srl, 'listStyle',
$listStyle, 'cpage','')}">
</a>
<a cond="$document->getCommentCount()" href="{getUrl('document_srl', $document>document_srl)}#comment" class="replyNum" title="Replies">
[{$document->getCommentCount()}]
</a>
<a cond="$document->getTrackbackCount()" href="{getUrl('document_srl',
$document->document_srl)}#trackback" class="trackbackNum" title="Trackbacks">
[{$document->getTrackbackCount()}]
</a>
</td>
<td class="author" cond="$val->type=='nick_name'">{$document->getNickName()}</td>
<td class="author" cond="$val->type=='user_id'">{$document->getUserID()}</td>
<td class="author" cond="$val->type=='user_name'">{$document->getUserName()}</td>
<td class="time" cond="$val->type=='regdate'">{$document->getRegdate('Y.m.d')}</td>
<td class="time" cond="$val->type=='last_update'">{zdate($document>get('last_update'),'Y.m.d')}</td>
<td class="lastReply" cond="$val->type=='last_post'">
<block cond="(int)($document->get('comment_count'))>0">
<a href="{$document->getPermanentUrl()}#comment" title="Last Reply">
</a>
<sub>by</sub>
{htmlspecialchars($document->get('last_updater'))}
</span>
</block>
<block cond="(int)($document->get('comment_count'))==0"> </block>
</td>
<td class="readNum" cond="$val->type=='readed_count'">{$document>get('readed_count')>0?$document->get('readed_count'):'0'}</td>
<td class="voteNum" cond="$val->type=='voted_count'">{$document>get('voted_count')!=0?$document->get('voted_count'):'0'}</td>
</block>
</tr>

</tbody>
...
.
XE /
<tr class="notice"
loop="$notice_list=>$no,$document">
<tr loop="$document_list=>$no,$document">
<block cond="$document_srl==$document>document_srl">»</block>

(>>)
<block cond="$document_srl!=$document>document_srl">{$lang->notice}</block>

''
87
4.
XE /
<block cond="$document_srl!=$document>document_srl">{$no}</block>
' '
<a href="{getUrl('document_srl',$document>document_srl, 'listStyle', $listStyle,

'cpage','')}">...</a>
<a cond="$document->getCommentCount()"
href="{getUrl('document_srl', $document>document_srl)}#comment" class="replyNum"
title="Replies">
[...]
</a>
{$document->getCommentCount()}
<a cond="$document->getTrackbackCount()"
href="{getUrl('document_srl', $document>document_srl)}#trackback" class="trackbackNum"
title="Trackbacks">
[...]
</a>
{$document->getTrackbackCount()}
<td class="author" cond="$val>type=='nick_name'">{$document>getNickName()}</td>
<td class="author" cond="$val>type=='user_id'">{$document->getUserID()}</td>
<td class="author" cond="$val>type=='user_name'">{$document>getUserName()}</td>
<td class="time" cond="$val>type=='regdate'">{$document>getRegdate('Y.m.d')}</td>
<td class="time" cond="$val>type=='last_update'">{zdate($document>get('last_update'),'Y.m.d')}</td>
<td class="lastReply" cond="$val>type=='last_post'">...</td>
<block cond="(int)($document>get('comment_count'))>0">...</block>
<block cond="(int)($document>get('comment_count'))==0">...</block>
<a href="{$document->getPermanentUrl()}#comment"
title="Last Reply">
</a>
<sub>by</sub>
{htmlspecialchars($document>get('last_updater'))}
88 x
4.
XE /
</span>
<td class="readNum" cond="$val>type=='readed_count'">
{$document->get('readed_count')>0?$document>get('readed_count'):'0'}
</td>
<td class="voteNum" cond="$val>type=='voted_count'">
{$document->get('voted_count')!=0?$document>get('voted_count'):'0'}
</td>
XE core 1.4.4 .
"XE " .
XE > (
. 20.

.
list.html
. <div class="list_footer">...</div>
.
<table summary="List of Articles" id="board_list" class="board_list">




</table>
<div class="list_footer">

<div class="pagination" cond="$document_list || $notice_list">
<a
href="{getUrl('page','','document_srl','','division',$division,'last_division',$last_divi
sion)}" class="prevEnd">{$lang->first_page}</a>
<block loop="$page_no=$page_navigation->getNextPage()">
<strong cond="$page==$page_no">{$page_no}</strong>
<a cond="$page!=$page_no"
href="{getUrl('page',$page_no,'document_srl','','division',$division,'last_division',$las
t_division)}">{$page_no}</a>
</block>
<a href="{getUrl('page',$page_navigation>last_page,'document_srl','','division',$division,'last_division',$last_division)}"
class="nextEnd">{$lang->last_page}</a>
</div>

</div>
89
4.
.
XE /
<div class="pagination" cond="$document_list

|| $notice_list">...</div>
<a

href="{getUrl('page','','document_srl','','div
ision',$division,'last_division',$last_divisio
n)}" class="prevEnd">{$lang->first_page}</a>
<a href="{getUrl('page',$page_navigation
>last_page,'document_srl','','division',$divis
ion,'last_division',$last_division)}"
<block loop="$page_no=$page_navigation>getNextPage()">...</block>
<strong
cond="$page==$page_no">{$page_no}</strong>
<a cond="$page!=$page_no"

href="{getUrl('page',$page_no,'document_srl','
','division',$division,'last_division',$last_d
ivision)}">{$page_no}</a>
XE core 1.4.4 .
"XE " .

list.html .
write_form.html .
list.html .

<div class="pagination">
...
</div>
<div class="btnArea">
<a href="{getUrl('act','dispBoardWrite','document_srl','')}" class="btn">{$lang>cmd_write}</a>
</div>
</div>
.
XE /
<a
.
href="{getUrl('act','dispBoardWrite','document
_srl','')}" class="btn">{$lang->cmd_write}</a> .
XE core 1.4.4 .
"XE " .
90 x
4.

. list.html
.

<div class="pagination">
...
</div>
<a ...>{$lang->cmd_write}</a>

<form cond="$grant->view" action="{getUrl()}" method="get" onsubmit="return
procFilter(this, search)" class="board_search">
<input type="hidden" name="vid" value="{$vid}" />
<input type="hidden" name="category" value="{$category}" />
<input type="text" name="search_keyword"
value="{htmlspecialchars($search_keyword)}" accesskey="S" title="{$lang->cmd_search}"
class="iText" />
<select name="search_target">
<option loop="$search_option=>$key,$val" value="{$key}"
selected="selected"|cond="$search_target==$key">{$val}</option>
</select>
<input type="submit" onclick="xGetElementById('fo_search').submit();return false;"
value="{$lang->cmd_search}" class="btn" />
</form>

</div>
.
XE /
<form cond="$grant->view" action="{getUrl()}"

method="get" onsubmit="return procFilter(this,
search)" id="board_search" class="board_search">
<input type="hidden" name="vid" value="{$vid}"
/>
(hidden type)
<input type="hidden" name="mid" value="{$mid}"

/>
(hidden type)
<input type="hidden" name="category"

value="{$category}" />
(hidden type)
<input type="text" name="search_keyword"

value="{htmlspecialchars($search_keyword)}"
accesskey="S" title="{$lang->cmd_search}"
class="iText" />
. 'S'
<select name="search_target">
<option loop="$search_option=>$key,$val"

value="{$key}"
selected="selected"|cond="$search_target==$key">
{$val}</option>
<input type="submit"

onclick="xGetElementById('board_search').submit(
);return false;" value="{$lang->cmd_search}"
class="btn" />
XE core 1.4.4 .
"XE " .
91
4.

. 'example.com'
.
mod_rewrite : http://example.com/test_board/
mod_rewrite : http://example.com/?mid=test_board
." .
4-4 -
.
92 x
4.
4-5 -
write_form.html 'test_board'
. 'test_board' .
'test_board' . XE
> 'test_board'
.
93
4.
4.9

.
write_form.html .
_header.html, _footer.html, , ,
(, , ), . XE core
, .
.
4-6
write_form.html .
_header.html, _footer.html (include)
write_form.html _header.html _footer.html
(include) .
.
94 x
XE /
4.
XE core 1.4.4 .
"XE " .
HTML
HTML .
<form action="" class="board_write">
<div class="write_header"> </div>
<div class="write_editor"> </div>
<div class="write_author"> (, , )</div>
<div class="write_footer"> </div>
</form>
form ', ,
'. form .

onsubmit
. .
write_form.html .
<form action="./" method="post" onsubmit="return procFilter(this, window.insert)"
class="board_write">
<input type="hidden" name="content" value="{$oDocument->getContentText()}" />
<input type="hidden" name="document_srl" value="{$document_srl}" />
<input type="hidden" name="allow_comment" value="Y" />
<input type="hidden" name="allow_trackback" value="Y" />
...
</form>
.
XE /
onsubmit="return procFilter(this,
window.insert)"
form
<input type="hidden" name="mid"

value="{$mid}" />
(hidden type)
<input type="hidden" name="content"

value="{$oDocument->getContentText()}" />
(hidden type)
<input type="hidden" name="document_srl"

value="{$document_srl}" />
(hidden type)
<input type="hidden" name="allow_comment"

value="Y" />
(hidden type).
value="N" .
<input type="hidden"
name="allow_trackback" value="Y" />
(hidden type).
value="N" .
95
4.
XE core 1.4.4 .
"XE " .

' ' ' ' .
.
write_form.html .
...
<div class="write_header">
<input cond="$oDocument->getTitleText()" type="text" name="title" class="iText"
title="{$lang->title}" value="{htmlspecialchars($oDocument->getTitleText())}" />
<input cond="!$oDocument->getTitleText()" type="text" name="title" class="iText"
title="{$lang->title}" />
<input cond="$grant->manager" type="checkbox" name="is_notice" value="Y"
checked="checked"|cond="$oDocument->isNotice()" id="is_notice" />
<label cond="$grant->manager" for="is_notice">{$lang->notice}</label>
</div>
...
.
XE /
cond="$oDocument->getTitleText()"
''
cond="!$oDocument->getTitleText()"
' '
{htmlspecialchars($oDocument>getTitleText())}
{$lang->title}
''
cond="$grant->manager"
checked="checked"|cond="$oDocument>isNotice()"
checked

{$lang->notice}
''
XE core 1.4.4 .
"XE " .
( )
{$oDocument->getEditor()} .
> (
( ) .
write_form.html .
...
<div class="write_editor">
{$oDocument->getEditor()}
</div>
...
96 x
4.
.
XE /
{$oDocument->getEditor()}
( )

. ', ,
' . .
write_form.html .
...
<div class="write_author" cond="!$is_logged">
<label for="userName">{$lang->writer}</label>
<input type="text" name="nick_name" id="userName" class="iText userName"
value="{htmlspecialchars($oDocument->get('nick_name'))}" />
<label for="userPw">{$lang->password}</label>
<input type="password" name="password" id="userPw" class="iText userPw" />
<label for="homePage">{$lang->homepage}</label>
<input type="text" name="homepage" id="homePage" class="iText homePage"
value="{htmlspecialchars($oDocument->get('homepage'))}" />
</div>
...
.
XE /
<div class="write_author"
cond="!$is_logged">
{$lang->writer}
''
{htmlspecialchars($oDocument>get('nick_name'))}
{$lang->password}
''
{$lang->homepage}
''
{htmlspecialchars($oDocument>get('homepage'))}

form .
write_form.html .
...
<input type="submit" value="{$lang->cmd_registration}" class="btn" />
</div>
...
97
4.
XE /
{$lang->cmd_registration}
''
XE core 1.4.4 .
"XE " .

.
'example.com' .
http://example.com/?mid=test_board&act=dispBoardWrite
4-7
.
, .
98 x
4.
4-8
.
, ,
, .
99
4.
4.10
, , , ,
_read.html .
(list.html) (include).
.
.
100 x
4.
4-9
101
4.
_read.html .
list.html _read.html (include)
list.html _read.html (include) .
list.html _read.html (include).
list.html include .
.
<include cond="$oDocument->isExists()" target="_read.html" />
<p ...>{$lang->no_documents}</p>
<table ... summary="List of Articles" id="board_list" class="board_list">
...
</table>
...
</div>
.
XE /
<include cond="$oDocument->isExists()"
target="_read.html" />
_read.html (include)
XE core 1.4.4 .
"XE " .

(, , , , ), , ( , ,
, ), , , .
<div class="board_read">

<div class="read_header">
, , , ,
</div>


<div class="read_body">

</div>


<div class="read_footer">
, , ,
</div>

</div>
(include)
(include)

<form class="write_comment">

</form>
102 x
4.

,
_read.html .
...
<h1><a href="{$oDocument->getPermanentUrl()}">{$oDocument->getTitle()}</a></h1>
<a cond="$oDocument->getHomepageUrl()" href="{$oDocument->getHomepageUrl()}"
class="author">{$oDocument->getNickName()}</a>
<strong cond="!$oDocument->getHomepageUrl()" class="author">{$oDocument>getNickName()}</strong>
</div>
...
.
XE /
<a href="{$oDocument>getPermanentUrl()}">
URL
{$oDocument->getTitle()}
<a cond="$oDocument->getHomepageUrl()"
href="{$oDocument->getHomepageUrl()}"
class="author">...</a>
<strong cond="!$oDocument>getHomepageUrl()"
class="author">...</strong>
{$oDocument->getNickName()}
XE core 1.4.4 .
"XE " .
, ,
_read.html , , .
...
...
<p class="sum">
<span class="read">{$lang->readed_count}
<span class="num">{$oDocument->get('readed_count')}</span>
</span>
<span class="vote">{$lang->voted_count}
<span class="num">{$oDocument->get('voted_count')}</span>
</span>
<span class="time">{$oDocument->getRegdate('Y.m.d H:i')}</span>
</p>
</div>
...
.
XE /
103
4.
XE /
{$lang->readed_count}
' '
{$oDocument->get('readed_count')}
{$lang->voted_count}
' '
{$oDocument->get('voted_count')}
{$oDocument->getRegdate('Y.m.d H:i')}
(
H:i:s)

_read.html .
...

<div class="read_body">
{$oDocument->getContent(false)}
</div>

...
.
XE /
{$oDocument->getContent(false)}

_read.html .
...
<div cond="$oDocument->hasUploadedFiles()" class="fileList">
<button type="button" class="toggleFile"
onclick="jQuery(this).next('ul.files').toggle();">{$lang->uploaded_file} ({$oDocument>get('uploaded_count')})</button>
<ul class="files">
<li loop="$oDocument->getUploadedFiles()=>$key,$file"><a
href="{getUrl('')}{$file->download_url}">{$file->source_filename} <span
class="fileSize">[File Size:{FileHandler::filesize($file>file_size)}/Download:{number_format($file->download_count)}]</span></a></li>
</ul>
</div>
</div>
...
104 x
XE /
<div cond="$oDocument>hasUploadedFiles()" class="fileList">
{$lang->uploaded_file}
''
4.
XE /
{$oDocument->get('uploaded_count')}
<li loop="$oDocument>getUploadedFiles()=>$key,$file">
<a href="{getUrl('')}{$file>download_url}">
{$file->source_filename}
{FileHandler::filesize($file>file_size)}
{number_format($file->download_count)}
XE core 1.4.4 .
"XE " .
, ,
_read.html , , .
...
...
<span class="goList"><a href="#board_list" class="btn">{$lang->cmd_list}</a></span>
<span class="goEdit">
<a cond="$oDocument->isEditable()" class="btn"
href="{getUrl('act','dispBoardWrite','document_srl',$oDocument>document_srl,'comment_srl','')}">{$lang->cmd_modify}</a>
<a cond="$oDocument->isEditable()" class="btn"
href="{getUrl('act','dispBoardDelete','document_srl',$oDocument>document_srl,'comment_srl','')}">{$lang->cmd_delete}</a>
</span>
</div>
</div>
...
.
XE /
<a href="#board_list" class="btn">...</a>
{$lang->cmd_list}
''
<a cond="$oDocument->isEditable()" ...>...</a>
{getUrl('act','dispBoardWrite','document_srl',$oDoc
URL
ument->document_srl,'comment_srl','')}
{$lang->cmd_modify}
''
{getUrl('act','dispBoardDelete','document_srl',$oDo
URL
cument->document_srl,'comment_srl','')}
{$lang->cmd_delete}
''
105
4.
XE core 1.4.4 .
"XE " .
, (include)
_read.html _trackback.html _comment.html
(include) .
...

...

...
</div>
<include cond="$oDocument->allowTrackback()" target="_trackback.html" />
<include cond="$oDocument->allowComment()" target="_comment.html" />
...
.
XE /
<include target="..." />
(include)
cond="$oDocument->allowTrackback()"

(_trackback.html) (include)
cond="$oDocument->allowComment()"
(_comment.html)
(include)
XE core 1.4.4 .
"XE " .

_read.html
. comment_form.html .
...

...

...
</div>
<include cond="$oDocument->allowTrackback()" target="_trackback.html" />
<include cond="$oDocument->allowComment()" target="_comment.html" />
106 x
4.
<form cond="$grant->write_comment && $oDocument->isEnableComment()" action="./"

method="post" onsubmit="return procFilter(this, insert_comment)" class="write_comment">
<input type="hidden" name="document_srl" value="{$oDocument->document_srl}" />
<input type="hidden" name="comment_srl" value="" />
<textarea name="content" rows="5" cols="50"></textarea>
<input type="text" name="nick_name" id="userName" class="iText userName" />
<input type="text" name="homepage" id="homePage" class="iText homePage" />
</div>
<input type="submit" value="{$lang->cmd_comment_registration}" class="btn" />
</div>
</form>
.
XE /
<form cond="$grant->write_comment &&

$oDocument->isEnableComment()"> ...</form>

insert_comment)"
form
<input type="hidden" name="mid"

value="{$mid}" />
(hidden type)

value="{$oDocument->document_srl}" />
(hidden type)
<input type="hidden" name="comment_srl"

value="" />
(hidden type)
<textarea name="content" rows="5"

cols="50"></textarea>
<div class="write_author"
cond="!$is_logged">...</div>
( ,
, )
{$lang->writer}
''
{$lang->password}
''
{$lang->homepage}
''
{$lang->cmd_comment_registration}
' '
XE core 1.4.4 .
"XE " .
107
4.
4.11 /
4.11.1
_trackback.html . _read.html (include)
.
_trackback.html .

<div class="feedback" id="trackback">
<div class="fbHeader">
<h2>{$lang->trackback} <em>'{$oDocument->getTrackbackCount()}'</em></h2>
<p class="trackbackURL"><a href="{$oDocument->getTrackbackUrl()}" onclick="return
false;">{$oDocument->getTrackbackUrl()}</a></p>
</div>
<ul cond="$oDocument->getTrackbackCount()" class="fbList">
<li class="fbItem" loop="$oDocument->getTrackbacks()=>$key,$val"
id="trackback_{$val->trackback_srl}">
<h3 class="author"><a href="{$val->url}" title="{htmlspecialchars($val>blog_name)}">{htmlspecialchars($val->title)}</a></h3>
<p class="time">{zdate($val->regdate, "Y.m.d H:i")}</p>
<p class="xe_content">{$val->excerpt}</p>
<p class="action" cond="$grant->manager"><a
href="{getUrl('act','dispBoardDeleteTrackback','trackback_srl',$val>trackback_srl)}">{$lang->cmd_delete}</a></p>
</li>
</ul>
</div>

.
XE /
{$lang->trackback}
''
{$oDocument->getTrackbackCount()}
{$oDocument->getTrackbackUrl()}
URL
cond="$oDocument->getTrackbackCount()"
()
loop="$oDocument->getTrackbacks()=>$key,$val"
()
{$val->trackback_srl}
{$val->url}
URL
{htmlspecialchars($val->blog_name)}
{htmlspecialchars($val->title)}
{zdate($val->regdate, "Y.m.d H:i")}
{$val->excerpt}
cond="$grant->manager"
{getUrl('act','dispBoardDeleteTrackback','trac
URL
kback_srl',$val->trackback_srl)}
108 x
4.
XE /
{$lang->cmd_delete}
''
XE core 1.4.4 .
"XE " .
4.11.2
_comment.html . _read.html (include)
.
_comment.html .

<div class="feedback" id="comment">
<div class="fbHeader">
<h2>{$lang->comment} <em>'{$oDocument->getCommentcount()}'</em></h2>
</div>
<ul cond="$oDocument->getCommentcount()" class="fbList">
<li loop="$oDocument->getComments()=>$key,$comment" class="fbItem" style="paddingleft:{($comment->get('depth'))*15}px"|cond="$comment->get('depth')"
id="comment_{$comment->comment_srl}">
<h3 class="author">
<a cond="$comment->homepage" href="{$comment->homepage}">{$comment>getNickName()}</a>
<strong cond="!$comment->homepage">{$comment->getNickName()}</strong>
</h3>
<p class="time">{$comment->getRegdate('Y.m.d H:i')}</p>
{$comment->getContent(false)}
<p class="action">
<a href="{getUrl('act','dispBoardReplyComment','comment_srl',$comment>comment_srl)}">{$lang->cmd_reply}</a>
<a cond="$comment->isGranted()||!$comment->get('member_srl')"
href="{getUrl('act','dispBoardModifyComment','comment_srl',$comment>comment_srl)}">{$lang->cmd_modify}</a>
<a cond="$comment->isGranted()||!$comment->get('member_srl')"
href="{getUrl('act','dispBoardDeleteComment','comment_srl',$comment>comment_srl)}">{$lang->cmd_delete}</a>
</p>
</li>
</ul>
<div cond="$oDocument->comment_page_navigation" class="pagination">
<a href="{getUrl('cpage',1)}#comment" class="prevEnd">{$lang->first_page}</a>
<block loop="$page_no=$oDocument->comment_page_navigation->getNextPage()">
<strong cond="$cpage==$page_no">{$page_no}</strong>
<a cond="$cpage!=$page_no"
href="{getUrl('cpage',$page_no)}#comment">{$page_no}</a>
</block>
<a href="{getUrl('cpage',$oDocument->comment_page_navigation->last_page)}#comment"
</div>
</div>

.
XE /
{$lang->comment}
''
{$oDocument->getCommentcount()}
109
4.
XE /
cond="$oDocument->getCommentcount()"
()
loop="$oDocument>getComments()=>$key,$comment"
()
{($comment->get('depth'))*15}
15
|cond="$comment->get('depth')"
{$comment->comment_srl}
cond="$comment->homepage"
{$comment->homepage}
URL
{$comment->getNickName()}
cond="!$comment->homepage"
{$comment->getRegdate('Y.m.d H:i')}
{$comment->getContent(false)}
{getUrl('act','dispBoardReplyComment','comment
URL
_srl',$comment->comment_srl)}
{$lang->cmd_reply}
cond="$comment->isGranted()||!$comment>get('member_srl')"
''

(, )
{getUrl('act','dispBoardModifyComment','commen
URL
t_srl',$comment->comment_srl)}
{$lang->cmd_modify}
''
{getUrl('act','dispBoardDeleteComment','commen
URL
t_srl',$comment->comment_srl)}
{$lang->cmd_delete}
cond="$oDocument->comment_page_navigation"
{getUrl('cpage',1)}
URL
{getUrl('cpage',$oDocument>comment_page_navigation->last_page)}
URL
{$lang->first_page}
' '
{$lang->last_page}
' '
<block loop="$page_no=$oDocument>comment_page_navigation>getNextPage()">...</block>
()
cond="$cpage==$page_no"
cond="$cpage!=$page_no"
110 x
''
4.
XE /
{getUrl('cpage',$page_no)}
URL
{$page_no}
XE core 1.4.4 .
"XE " .
4.11.3
.
(_read.html) .
comment_form.html .
. ,
, , textarea
.
4-10
comment_form.html
.
<div cond="$oSourceComment->isExists()" class="context_data">
<h3 class="author">
<a cond="$oSourceComment->homepage" href="{$oSourceComment>homepage}">{$oSourceComment->getNickName()}</a>
<strong cond="!$oSourceComment->homepage">{$oSourceComment->getNickName()}</strong>
111
4.
</h3>
<p class="time">{$oSourceComment->getRegdate('Y.m.d H:i')}</p>
{$oSourceComment->getContent(false)}
</div>
<form action="./" method="post" onsubmit="return procFilter(this, insert_comment)"
class="write_comment">
<input type="hidden" name="document_srl" value="{$oComment->get('document_srl')}" />
<input type="hidden" name="comment_srl" value="{$oComment->get('comment_srl')}" />
<input type="hidden" name="parent_srl" value="{$oComment->get('parent_srl')}" />
<textarea name="content" rows="5" cols="50">{htmlspecialchars($oComment>get('content'))}</textarea>
<input type="text" name="nick_name" id="userName" class="iText userName"
value="{htmlspecialchars($oComment->get('nick_name'))}" />
<input type="text" name="homepage" id="homePage" class="iText homePage"
value="{htmlspecialchars($oComment->get('homepage'))}" />
</div>
<input type="submit" value="{$lang->cmd_comment_registration}" class="btn" />
</div>
</form>
.
XE /
cond="$oSourceComment->isExists()"
cond="$oSourceComment->homepage"
cond="!$oSourceComment->homepage"
{$oSourceComment->homepage}
{$oSourceComment->getNickName()}
{$oSourceComment->getRegdate('Y.m.d H:i')}
{$oSourceComment->getContent(false)}
insert_comment)"
form

(hidden type)
/>
112 x

value="{$oComment->get('document_srl')}" />
(hidden type)

value="{$oComment->get('comment_srl')}" />
(hidden type)
<input type="hidden" name="parent_srl"

value="{$oComment->get('parent_srl')}" />
(hidden type)
<textarea name="content" rows="5"

cols="50">{htmlspecialchars($oComment-
. textarea
4.
XE /
>get('content'))}</textarea>
cond="!$is_logged"
{$lang->writer}
''
{$lang->password}
''
{$lang->homepage}
''
{htmlspecialchars($oComment>get('nick_name'))}
{htmlspecialchars($oComment->get('homepage'))}
URL
{$lang->cmd_comment_registration}
' '
XE core 1.4.4 .
"XE " .
113
4.
4.12
4.12.1
.
delete_form.html .
.
4-11
delete_form.html .
<div cond="$oDocument->isExists()" class="context_data">
<h3 class="title">{$oDocument->getTitle()}</h3>
<p class="author">
<strong>{$oDocument->getNickName()}</strong>
</p>
</div>
<form action="./" method="get" onsubmit="return procFilter(this, delete_document)"
class="context_message">
<input type="hidden" name="page" value="{$page}" />
<h1>{$lang->confirm_delete}</h1>
<input type="submit" value="{$lang->cmd_delete}" class="btn" />
<button type="button" onclick="history.back()" class="btn">{$lang>cmd_cancel}</button>
</div>
</form>
.
XE /
114 x
4.
XE /
cond="$oDocument->isExists()"
{$oDocument->getTitle()}
{$oDocument->getNickName()}
onsubmit="return procFilter(this, delete_document)"
form
(hidden type)
(hidden type)

(hidden type)
{$lang->confirm_delete}
'?'
{$lang->cmd_delete}
''
{$lang->cmd_cancel}
''
XE core 1.4.4 .
"XE " .
4.12.2
.
delete_comment_form.html .
. , ,
.
115
4.
4-12
delete_comment_form.html .
<div cond="$oComment->isExists()" class="context_data">
<h3 class="author">
<a cond="$oComment->homepage" href="{$oComment->homepage}">{$oComment>getNickName()}</a>
<strong cond="!$oComment->homepage">{$oComment->getNickName()}</strong>
</h3>
<p class="time">{$oComment->getRegdate('Y.m.d H:i')}</p>
{$oComment->getContent(false)}
</div>
<form action="./" method="get" onsubmit="return procFilter(this, delete_comment)"
<input type="hidden" name="document_srl" value="{$oComment->get('document_srl')}" />
<input type="hidden" name="comment_srl" value="{$oComment->get('comment_srl')}" />
</div>
</form>
116 x
XE /
cond="$oComment->isExists()"
cond="$oComment->homepage"
4.
XE /
cond="!$oComment->homepage"
{$oComment->homepage}
URL
{$oComment->getNickName()}
{$oComment->getRegdate('Y.m.d H:i')}
{$oComment->getContent(false)}
delete_comment)"
form

/>
(hidden type)
<input type="hidden" name="page" value="{$page}"

(hidden type)
/>
value="{$oComment->get('document_srl')}" />

(hidden type)

value="{$oComment->get('comment_srl')}" />
(hidden type)
'?'
{$lang->cmd_delete}
''
{$lang->cmd_cancel}
''
XE core 1.4.4 .
"XE " .
4.12.3
.
delete_trackback_form.html .
.
117
4.
4-13
delete_trackback_form.html .
<form action="./" method="get" onsubmit="return procFilter(this, delete_trackback)"
<input type="hidden" name="document_srl" value="{document_srl}" />
<input type="hidden" name="trackback_srl" value="{$trackback_srl}" />
</div>
</form>
.
XE /
onsubmit="return procFilter(this, delete_trackback)"
form
(hidden type)
(hidden type)

value="{document_srl}" />
(hidden
type)
<input type="hidden" name="trackback_srl"

value="{$trackback_srl}" />
118 x
(hidden
4.
XE /
type)
'?'
{$lang->cmd_delete}
''
{$lang->cmd_cancel}
''
XE core 1.4.4 .
"XE " .
119
4.
4.13

. message.html
.
.
4-14
message.html .
<div class="context_message">
<h1>{$message}</h1>
<a cond="!$is_logged" href="{getUrl('act','dispMemberLoginForm')}"
class="btn">{$lang->cmd_login}</a>
<button type="button" onclick="history.back()" class="btn">{$lang>cmd_back}</button>
</div>
</div>
.
XE /
{$message}
' '

120 x
4.
XE /
cond="!$is_logged"
{getUrl('act','dispMemberLoginForm')}
URL
{$lang->cmd_login}
''
{$lang->cmd_back}
''
XE core 1.4.4 .
"XE " .
121
4.
4.14
.
.
input_passowrd_form.html .
.
4-15
input_passowrd_form.html
.
<form action="./" method="get" onsubmit="return procFilter(this, input_password)"
<input type="hidden" name="comment_srl" value="{$comment_srl}" />
<h1>{$lang->msg_input_password}</h1>
<input type="password" name="password" title="{$lang->password}" class="iText" />
<input type="submit" value="{$lang->cmd_input}" class="btn" />
</form>
122 x
XE /
onsubmit="return procFilter(this, input_password)"
form
4.
XE /
{$lang->msg_input_password}
' .'
(hidden type)
(hidden type)

(hidden type)

value="{$comment_srl}" />
(hidden type)
{$lang->password}
''
{$lang->cmd_input}
''
XE core 1.4.4 .
"XE " .
123
4.
4.15 CSS
CSS . CSS
. CSS
.
1. CSS .
user_board.css
. CSS .
@charset "utf-8";
/* User Board */
.user_board{}
/* Board Header */
.board_header{}
.board_header h2{}
.board_header p{}
/* Form Control */
/* list.html | _read.html | write_form.html | comment_form.html */
.user_board .iText{}
.user_board .iCheck{}
.user_board textarea{}
/* Button Area */
/* list.html | write_form.html | comment_form.html | _read.html | delete_form.html |
delete_comment_form.html | delete_trackback_form.html | message.html */
.user_board .btnArea{}
.user_board .btnArea .goList{}
.user_board .btnArea .goEdit{}
.user_board .btn{}
/* Board List */
/* list.html */
.no_document{}
.board_list{}
.board_list th{}
.board_list th.title{}
.board_list tr.notice{}
.board_list td{}
.board_list td.notice{}
.board_list td.no{}
.board_list td.title{}
.board_list td.title a{}
.board_list td.title a.replyNum{}
.board_list td.title a.trackbackNum{}
.board_list td.author{}
.board_list td.time{}
.board_list td.lastReply{}
.board_list td.lastReply a{}
.board_list td.lastReply span{}
.board_list td.lastReply sub{}
.board_list td.readNum{}
.board_list td.voteNum{}
.list_footer{}
.list_footer .pagination{}
.list_footer .btnArea{}
.list_footer .board_search{}
.list_footer .board_search select{}
.list_footer .board_search option{}
/* Board Write */
/* write_form.html */
.board_write{}
124 x
4.
.write_header{}
.write_header .iText{}
.write_header .iCheck{}
.write_header label{}
.write_editor{}
.board_write .write_author{}
.board_write .btnArea{}
/* Board Read */
/* _read.html */
.board_read{}
.read_header{}
.read_header h1{}
.read_header h1 a{}
.read_header a.author{}
.read_header strong.author{}
.read_header .sum{}
.read_header .sum .read{}
.read_header .sum .vote{}
.read_header .sum .time{}
.read_body{}
.read_body .xe_content{}
.read_footer{}
.read_footer .fileList{}
.read_footer .toggleFile{}
.read_footer .files{}
.read_footer .files li{}
.read_footer .btnArea{}
/* Feedback (Trackback+Comment) */
/* _trackback.html | _comment.html */
.feedback{}
.feedback .fbHeader{}
.feedback .fbHeader h2{}
.feedback .fbHeader .trackbackURL{}
.feedback .fbList{}
.feedback .fbItem{}
.feedback .author{}
.feedback .author a{}
.feedback .author strong{}
.feedback .time{}
.feedback .xe_content{}
.feedback .action{}
.feedback .action a{}
.feedback .pagination{}
/* Pagination */
/* list.html | _comment.html */
.user_board .pagination{}
.user_board .pagination a{}
.user_board .pagination a.prevEnd{}
.user_board .pagination a.nextEnd{}
.user_board .pagination strong{}
/* Write Author */
/* _read.html | write_form.html | comment_form.html */
.write_author{}
.write_author label{}
.write_author .iText{}
.write_author .userName{}
.write_author .userPw{}
.write_author .homePage{}
/* Write Comment */
/* _read.html | comment_form.html */
.write_comment{}
.write_comment textarea{}
.write_comment .write_author{}
.write_comment .btnArea{}
/* Context Data | Context Message */
/* comment_form.html | delete_form.html | delete_comment_form.html |
input_password_form.html | message.html */
125
4.
.context_data{}
.context_data h3.author{}
.context_data h3.author a{}
.context_data h3.author strong{}
.context_data h3.title{}
.context_data p.author{}
.context_data p.author strong{}
.context_data .time{}
.context_data .xe_content{}
.context_message{}
.context_message h1{}
.context_message .iText{}
.context_message .btnArea{}
2. _header.html user_board.css .
<load target="user_board.css" />
"CSS " .
3. CSS . 'example.com'
.
mod_rewrite : http://example.com/test_board/
CSS <load /> ,

CSS (target) .
126 x
4.
4.16
. jQuery
.
.
1. user_board.js jQuery .
// <![CDATA[
jQuery(function($){
// jQuery .
});
// ]]>
2. _header.html user_board.js .
<load target="user_board.js" type="body" />
"JS " .
3. .
'example.com' .
mod_rewrite : http://example.com/test_board
user_board.js <load />

, user_board.js (target) .
XE jQuery " jQuery " .

jQuery http://jquery.com/ .
127

XE Skin Manual Ko (v1.0)

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

XE Skin Manual Ko (v1.0)

Uploaded by

Copyright:

Available Formats

Copyright 2010 NHN Corp. All Rights Reserved.

HTML jQuery ____________________________________________________ 26

3.10 CSS __________________________________________________________________________________66

4.10 __________________________________________________________________________ 100

4-15 __________________________________________________ 116

XE HTML CSS, /jQuery, XE .

<h1> </h1> ''. '<h1> ' , <h1>

'' . 'Xpress Engine' 'title' . ''

W3C HTML 4.01 : http://trio.co.kr/webrefer/html/cover.html

'h1' ''. <h1> .

'font-size' ''. <h1> .

'24px' ''. <h1> font-size ( ) .

IE6 ':first-child, :lang()' . IE6

'a' :link() :visited(

IE6 ' ' .

(Adjacent Sibling Selector)

IE6 ' ' .

/* img alt 'dog' */

p[lang|=en] { ... } /* p lang en-us en- */

HTML attribute input[checked]

HTML attribute input[type=text]

HTML attribute img[alt~=dog]

HTML attribute value

IE6 ' ' .

HTML <head> <body>

jQuery 'jQuery' ' ($)' . XE '$'

'p#help' display:none 'a.helpBtn'

jQuery . jQuery jQuery

jQuery HTML jQuery

HTML  . ) ...

HTML . ) <p cond="">...</p>

<block> HTML XE core 1.4.4 . HTML

<p> XE core 1.4.4

<block> HTML XE core 1.4.4 . HTML

if, elseif, else

XE core 1.4.4 'cond'

<block loop="=>$key, $val">

0 <tr>...</tr> XE core 1.4.4

0 <tr>...</tr> XE core 1.4.4

'loop' HTML XE core 1.4.4 . 'loop'

<include target="header.html" />

<include /> HTML XE core 1.4.4 . HTML

<load target="xe.css" />

HTML <head> xe.css . <load /> XE core 1.4.4

CSS HTML <head> . <body> CSS

CSS . <load /> media XE

(Tele Type Writer)

CSS media CSS .

index CSS . <load /> index XE

<load target="xe.js" />

<load /> XE core 1.4.4 . .

<load /> HTML . .

targetie="IE 6 | IE 7 | IE8 | ..." IE IE CSS/JS

type="head | body" JS <head> <body>

<load /> XE core 1.4.4 . <body> JS

index JS . <load /> index XE

XML JS XML JS . XE core

XE core 1.4.4 JS <body> .

<load target=xe.xml" />

<head> <body> XE core

2.4.11 XE core 1.4.4

<block loop="=>$key, $val">