웹디자이너를 위한 쎄지오4

Size: px

Start display at page:

Download "웹디자이너를 위한 쎄지오4"

인기 지
5 years ago
Views:

1 웹디자이너를위한쎄지오 4.x CMS 템플릿제작가이드라인 본문서는쎄지오 4.0 기반의 CMS 템플릿제작방법에대한안내서이다. 쎄지오 CMS 로운영될홈페이지의레이아웃코딩기법부터표준화에맞춘 css 클래스네임설명, 플래시쇼의주요기능과규격화사이즈등템플릿시안하나를만들기위한전체실무적인요소들을알기쉽게설명하여웹디자이너라면누구나템플릿제작을쉽게따라할수있도록구성되어있다. 안내서는웹표준및웹접근성을준수할수있도록하였다. 홈페이지시안의레이아웃에는웹디자이너의수만큼이나다양한종류가있다. 일반적으로홈페이지는확정된시안을분석한뒤컨텐츠, 플래시등의요소를일일이재단, 제작하여 HTML 로코딩하는방법으로제작된다. 이같은방식은수정이쉽지않고제작에도많은노력과시간이소요되는등의어려움이있었다. 그러나쎄지오 CMS 를이용하면홈페이지를빠른시간안에쉽고편리한방법으로완성할수있다. 쎄지오 CMS 는홈페이지의제작단계를두단계로나눈다. 첫번째는홈페이지시안을분석하여 CMS 템플릿을만드는단계이며, 두번째단계는 CMS 템플릿을선택한후개별홈페이지의컨텐츠를가공하여홈페이지를완성하는단계이다. 본문서는첫번째단계의 CMS 템플릿을제작하는과정에대하여집중적으로설명한다. 1. 템플릿제작을위한사전준비 (1) 쎄지오 CMS 의구성쎄지오 CMS의구성은크게프론트페이지와서브페이지로구분된다. 프론트페이지는홈페이지가처음열릴때나타나는페이지로써홈페이지를구성하는여러컨텐츠가운데중요한부분을요약하여위치시키거나홈페이지의대표성있는플래시, 그림등을이용하여구성한다. 서브페이지는홈페이지를구성하고있는다양한컨텐츠를사용자들이쉽게이용할수있도록일정한메뉴체계하에서운용된다. 쎄지오의웹서비스는인트라셀을기반으로제공되며인트라셀의 folder/html/ 경로에모든웹서비스자료들이위치하게된다. CMS의모든자원도웹서비스를위한것이기때문에 folder/html/ 하위경로에위치하게된다. 다음그림 ( 그림1-1) 은쎄지오의웹관리도구에보여진디렉토리구성형식이다. ( 그림 1-1) 1

CMS 템플릿의제작과정에서는이와같은하위폴더와파일을제작하여야한다. 위그림 ( 그림 1-1) 에서보여지는 main.html 은프론트페이지구성을결정하는 html 문서이며, layout.

2 위그림 ( 그림 1-1) 에서 My folder 는개인웹디스크공간을갖는사용자의서버측공간이며 Folder/ 는인트라셀의폴더영역이다. Folder/html/cms/biz011/ 의디렉토리내부의파일목록이오른편에표시되어있다. 마지막표시된 biz011 이바로템플릿이있는공간으로 biz011 은해당템플릿의아이디이다. Biz011 디렉토리내부에보면 home, image, show 등의폴더와하위의파일들이존재한다. CMS 템플릿의제작과정에서는이와같은하위폴더와파일을제작하여야한다. 위그림 ( 그림 1-1) 에서보여지는 main.html 은프론트페이지구성을결정하는 html 문서이며, layout.shell 은서브페이지구성을결정하는 html 문서이다. (2) 프론트페이지이해를돕기위해프론트페이지의구성을결정하는 main.html 의구성을살펴보도록하자. 그림 1-1 의오른편에위치한초록색연필모양아이콘을클릭하면 html 구성을볼수있다. 다음 ( 그림 1-2) 은 biz011 템플릿의실제구성화면의그림이다. ( 그림 1-2) 2

위그림 ( 그림 1-2) 에표시된프론트페이지는 html 소스와 css 문서에의해구성되고있는데 전반적인 css 레이아웃은다음 ( 그림 1-3) 과같이단순화시켜서볼수있다. ( 그림 1-3) 프론트페이지레이아웃구성에사용된 div 영역의이름에대한의미는다음과같다..fl_all : 페이지전체를지정하며 fl 은 front layout 의약어.

3 위그림 ( 그림 1-2) 에표시된프론트페이지는 html 소스와 css 문서에의해구성되고있는데 전반적인 css 레이아웃은다음 ( 그림 1-3) 과같이단순화시켜서볼수있다. ( 그림 1-3) 프론트페이지레이아웃구성에사용된 div 영역의이름에대한의미는다음과같다..fl_all : 페이지전체를지정하며 fl 은 front layout 의약어..header: 로고를포함한상단영역을지정. ( 서브페이지와공통적용에주의.).main_flash : 메인플래시영역을지정..fl_body : header 와 footer 를제외한본문전체를지정..footer : 주소를포함한하단의보조네비게이션영역을지정 ( 서브페이지와공통적용에주의.). [##MAIN_BG##] : 메인플래시쇼호출영역. [##CONTENTS##] : 프론트시작페이지관리에추가된컨텐츠호출영역..qmenu : 바로가기메뉴부분으로필요시추가및삭제가가능. 다음은 main.html 의원본이다. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" xml:lang="$#i.lang#;"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="/icons/adds/segio.js"></script> <link rel="stylesheet" type="text/css" href="[##url_base##]layout.css" /> 3

4 <title>$#i.name#;</title> </head> <body> [##MOVE_SCRIPT##]  <div class="fl_bg"> <div class="fl_all"> <div class="accessibility"><a href="#div_context"> 본문바로가기 </a> <div class="header"> $#load,/icons/app/cms/menu.php?mode=top_flash#; $#load,/icons/app/cms/menu.php?mode=text_menu#; [##TOPMENU##] ( 변경 )  <div class="main_flashshow"> [##MAIN_BG##]  <div id="div_context" class="fl_body" style="width:[##content_width##]px; height: [##CONTENT_HEIGHT##]px;"> [##CONTENTS##]  <div class="footer"> [##BOTTOM##] <! 바로가기메뉴 -->  </body> </html> 4

( 그림 1-4) 다음 ( 그림 1-5) 은 biz011 템플릿의 layout.shell 실제구성화면의그림이다.

5 (3) 서브페이지이번에는서브페이지의구조를결정하는 layout.shell 의구성을살펴보도록한다. 다음그림 ( 그림 1-4) 의우측초록색연필아이콘을클릭하면 html 구성을볼수있다. ( 그림 1-4) 다음 ( 그림 1-5) 은 biz011 템플릿의 layout.shell 실제구성화면의그림이다. ( 그림 1-5) 위그림 ( 그림 1-5) 에표시된서브페이지는 html 소스와 css 문서에의해구성되고있는데 전반적인 css 레이아웃은다음 ( 그림 1-6) 과같이단순화시켜서볼수있다. 5

( 그림 1-6) 서브페이지레이아웃구성에사용된 div 영역의이름에대한의미는다음과같다..sl_all : 서브페이지전체영역을지정하며, sl 은 sub layout 의약어..header : 로고를포함한상단영역을지정. ( 메인페이지와공통으로적용에주의 ).sub_flashshow : 서브페이지플래시쇼호출영역.sl_body : 서브페이지본문전체를지정.

6 ( 그림 1-6) 서브페이지레이아웃구성에사용된 div 영역의이름에대한의미는다음과같다..sl_all : 서브페이지전체영역을지정하며, sl 은 sub layout 의약어..header : 로고를포함한상단영역을지정. ( 메인페이지와공통으로적용에주의 ).sub_flashshow : 서브페이지플래시쇼호출영역.sl_body : 서브페이지본문전체를지정. ( 플래시쇼와 header, bottom 부분은제외 ).sl_menu : 서브페이지좌측하위메뉴영역을지정..sl_context : 서브페이지본문내용영역을지정..footer : 주소를포함한하단의보조네비게이션영역지정.( 메인페이지와공통적용에주의 ) 이때, 서브페이지는여러개인데반해 layout.shell 문서는하나뿐이라서어떻게구현이되는건지궁금증이생길수있다. 쎄지오의모든메뉴들은 cms 에서자동화되어구현되기때문에해당문서하나로모든서브페이지전체적용이가능하다는것에유의한다. 다음은 layout.shell 의원본이다. <link href="[##url_base##]layout.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="/icons/adds/segio.js"></script> <div class="sl_bg"> <div class="sl_all"> <div class="header"> $#load,/icons/app/cms/menu.php?mode=top_flash#; $#load,/icons/app/cms/menu.php?mode=text_menu#; #!load,/icons/app/cms/front.php?mode=top; 6

7 <div class="sub_flashshow"> $#load,/icons/app/cms/front.php?mode=sub_image#; <div class="sl_body"> <div class="sl_menu"> $#load,/icons/app/cms/menu.php?mode=left_menu#; <div class="sl_context"> <div style="width:700px;">#![]; <div class="footer"> $#load,/icons/app/cms/front.php?mode=bottom#;  (4) 주요 CMS 기능의간단한작동원리숙지앞서잠깐언급한것과같이쎄지오는유형과레이아웃에크게구애받지않고홈페이지를쉽고편리한방법으로코딩할수있다. 이를설명하기위해서는쎄지오 cms 구현방식과작동원리에대한간단한이해가필요하다. 우선, 다음의그림 ( 그림 1-7) 을살펴보자. 7

( 그림 1-7) 이것은프론트페이지관리화면을캡쳐한것이다. 관리등급을가진사람이로그인할경우, 메인페이지왼쪽가장아래에보라색연필모양을클릭하면해당화면으로이동할수있다. 위와같이메인페이지의컨텐츠문서들은각각이리소스화되어어떤것에도구애받지않고위치조정, 추가 / 삭제등을자유롭게할수있다. 해당관리툴또한자유롭게이동이가능하며, 컨텐츠를플래시쇼상위에위치시킬수도있다.

8 ( 그림 1-7) 이것은프론트페이지관리화면을캡쳐한것이다. 관리등급을가진사람이로그인할경우, 메인페이지왼쪽가장아래에보라색연필모양을클릭하면해당화면으로이동할수있다. 위와같이메인페이지의컨텐츠문서들은각각이리소스화되어어떤것에도구애받지않고위치조정, 추가 / 삭제등을자유롭게할수있다. 해당관리툴또한자유롭게이동이가능하며, 컨텐츠를플래시쇼상위에위치시킬수도있다. 이러한특성때문에작업자들은홈페이지컨텐츠를테이블이나 div 로한번에재단할필요없이, 각각의문서를만들어배치만하면되기때문에제작이매우용이하며빠르다. 프론트리소스를제작하는방법또한매우간단하여프론트페이지관리화면에서몇번의조작으로쉽게만들수있다. 최근게시물브리프, 배너이미지링크등이모두리소스화되어있어초보자라도쉽게제작이가능하다. 2. 템플릿제작 (1) css 클래스네임구조상세설명및사이즈정리 1 layout.css 앞서설명한바와같이 main.html 과 layout.shell 문서는프론트페이지와서브페이지의레이아웃구조에해당되는문서이다. 이들문서안에서 layout.css 를호출하게되며, 이문서안에는홈페이지의레이아웃뼈대를잡아주는모든 css 클래스네이밍에대한값들이 8

선언되어있다. 경로는관리도구 -> 인트라셀관리 -> 웹문서관리 -> /html/cms/ 템플릿아이디 안의폴더에서찾을수있으며우측초록색연필아이콘을클릭하면원본파일을볼수있다. ( 그림 2-1) 다음은 layout.css 의원본이다. @charset utf-8 ; @import url( /home/context.

9 선언되어있다. 경로는관리도구 -> 인트라셀관리 -> 웹문서관리 -> /html/cms/ 템플릿아이디 안의폴더에서찾을수있으며우측초록색연필아이콘을클릭하면원본파일을볼수있다. ( 그림 2-1) 다음은 layout.css utf-8 url( /home/context.css ); /* front contents, 본문 contents */ /* 표준선택자 */ body, td, input, textarea, div, th {font-family:verdana,dotum; margin:0; padding:0; fontsize:9pt; color:#4e4e4e;} a {color:#666666;text-decoration:none;font-size:9pt;} a:hover {color:#1694e3;text-decoration:none;font-size:9pt;} form {margin:0; padding:0;} p {margin:0; padding:0;} fieldset {border:0 none; padding:0; margin:0;} legend {display:none;} caption {display:none;} img {border:0;} address {font-style:normal;} ul {list-style-type:none; margin:0; padding:0;} li {margin:0; padding:0;} h1 {margin:0; padding:0;} h2 {margin:0; padding:0;} h3 {margin:0; padding:0;} 9

10 /* 프론트레이아웃 */.fl_bg {width:100%; background:url('image/all_bg.gif') repeat-x;} 전체적인배경이미지나, 흰색바탕이외의배경색이들어가지않을경우 fl_bg 전체생략이가능하다..fl_all { padding:0px; width:1000px; background:url('image/all_bg.gif') repeat-x; margin:auto; position:relative;} 브라우저의가운데정렬일경우의코딩. width 값을반드시 % 가아닌 px 로선언해준다. 왼쪽정렬을원할경우 margin:auto; position:relative 부분을삭제하고 width 값을 100% 로준후 fl_bg 로따로분기할필요없이곧바로백그라운드이미지나백그라운드컬러값을줄수있다..accessibility {position:absolute; left:-1000%; top:0; width:1px; heght:1px; font-size:0; lineheight:0; overflow:hidden;}.main_flashshow {width:1000px; height:390px;} 메인플래시쇼영역의크기설정.fl_body {clear:both; width:1000px; height:137px; overflow:hidden; background:url('image/cont_bg.gif') no-repeat;} 프론트페이지바디영역의크기와백그라운드이미지설정. /* 상단영역 */ 메인과서브에공통적용..header {clear:both; position:relative; width:1000px; height:100px; background:url('image/top_bg.gif') no-repeat;}.header.logo{float:left; width:200px; text-align:center; padding:30px 0 0 0;}.header.topmenu {float:left; width:720px; padding-top:2px;}.flash_menu { float:left; width:714px; height:60px;} 탑플래시메뉴.gnb {width:750px; height:28px;} 상단 top.html 부분을구현..gnb ul.menu {float:left; display:inline; padding-left:160px;}.gnb ul li {display:inline; padding:5px;}.gnb a {color:#ffffff; text-decoration:none; font-size:9pt;}.gnb a:hover {color:#f0ff00; text-decoration:none; font-size:9pt;} /* 하단영역 */ 메인과서브에공통적용..footer {width:1000px; clear:both; height:89px; background:url('image/footer_bg.gif') norepeat;}.footer.logo {float:left; width:200px; padding-top:30px; padding-left:120px;}.footer_menu {float:left; padding-top:22px; height:60px; width:650px;}.footer ul.menu {display:inline;width:450px; text-align:left; padding-right:15px; border:1px solid red;}.footer ul li {background:url('image/dot2.gif') 0-5px no-repeat; display:inline; margin: px; padding: px;} 10

11 .copyright {width:650px; color:#777777; text-align:left; padding:12px 0 0 0;} /* 서브페이지레이아웃 */.sl_bg {width:100%; background:url('image/sub_all_bg.gif') repeat-x;} 전체적인배경이미지나, 흰색바탕이외의배경색이들어가지않을경우에는생략가능하다..sl_all {width:1000px; margin:auto; background:url('image/sub_all_bg.gif') repeat-x;} 브라우저의가운데정렬일경우의코딩. width 값을반드시 % 가아닌 px 로선언해준다. 왼쪽정렬을원할경우 margin:auto; 부분을삭제하고 width 값을 100% 로준후 sl_bg 로따로분기할필요없이곧바로백그라운드이미지나백그라운드컬러값을줄수있다..sl_body {clear:both; width:1000px; margin-left:20px;} 서브페이지상 / 하단과플래시쇼부분을제외한전체바디영역을지정..sub_flashshow {width:1000px; height:190px;} 서브플래시쇼크기지정..sl_menu {float:left; width:194px; position:relative;} 서브페이지좌측메뉴..sl_menu a {color:#848484; text-decoration:none; font-size:9pt;}.sl_menu a:hover {color:#000000; text-decoration:none; font-size:9pt;}.sl_context {float:left; width:680px; text-align:left; padding-left:40px; padding-top:10px;} /* 서브페이지좌측메뉴 */ 자세한사항은뒷부분인템플릿제작에서자세히설명..sl_menu.cap {width:194px; height:48px; background:url('image/sm_top.gif') no-repeat; margin-left:18px;} 서브페이지좌측메뉴의메뉴타이틀 ( 서브대메뉴타이틀 ) 배경지정..sl_menu.title {color:#ffffff; font-weight:bold; text-align:left; padding-left:30px; paddingtop:16px; font-size:1.4em;} 서브페이지좌측메뉴의메뉴타이틀 ( 서브대메뉴타이틀 ).sl_menu.mlist {padding:0; margin:0;}.sl_menu.m_out {width:194px; height:31px; margin-left:18px; padding:3px px; background:url('image/sl_mbg0.gif') 0 50% no-repeat;}.sl_menu.m_out:hover {background:url('image/sl_mbg.gif') no-repeat 0 50%; width:194px; height:31px; color:#f0ff00; padding:3px px; margin-left:18px;}.sl_menu.m_out.m_in { padding:9px px; margin:0; color:#333;}.sl_menu.m_out.m_in a {color:#666666; font-weight:bold; display:block;}.sl_menu.m_out.m_in a:hover { color:#f0ff00; font-weight:bold; display:block;}.sl_menu.m_out2 {width:130px; height:20px; background:url('image/sm_icon2.gif') 0 3px norepeat; margin:10px px; padding-left:6px;}.sl_menu.mbase {width:194px; padding-bottom:40px;} /* 텍스트멀티메뉴 */ 서브페이지좌측메뉴를멀티메뉴로선택했을때의값 11

12 .sm_multi {clear:both; margin-left:18px; margin-top:5px; padding: px; width:130px; height:auto;}.m_out3 {float:left; background:url('image/sm_icon3.gif') 0 3px no-repeat; text-align:left; width:40%; padding-left:10px; height:15px; padding-top:3px;} /* 바로가기부가메뉴 */.qmenu {position:absolute; left:902px; top:100px; width:102px;}.q_div.cap {height:34px; background:url('image/q_top.gif');}.q_div.mlist {background:url('image/q_bg.gif');}.q_div.mbase {height:25px; background:url('image/q_bott.gif');}.q_div.m_out {padding:1px; height:20px; margin-left:3px; margin-right:3px; borderbottom:1px solid #e3eadc;}.q_div.m_in {padding-top:5px; margin-left:1px;}.q_div a {color:#4e6f2d; text-decoration:none; font-size:0.9em; letter-spacing:-0.1em;}.q_div a:hover {color:#a68d55; text-decoration:none; font-size:0.9em; letter-spacing:-0.1em;} /* 사이트맵내용 */ 사이트맵문서의서브메뉴들과하위메뉴디자인에해당하는 css.sitemap.cap {background:url('image/sitemap_bg.gif') no-repeat;width:182px; height:48px;}.sitemap.title {font-weight:bold;padding:15px 0 0 0;}.sitemap.menu {text-align:left;padding:0px 5px 0px 15px;border-bottom:1px dotted #d1d1d1;width:150px;} /* 컨텐츠제목영역 */ 홈페이지컨텐츠문서의머릿부분에해당하는 css.cl_top {height:30px; background:url('/home/image/cl_top.gif') no-repeat; width:680px;}.cl_top.title {float:left; width:40%; text-align:left; padding:0px; font-weight:bold; fontsize:1em; color:#333333; padding:3px px;}.cl_top.nav1 {float:left; width:55%; text-align:right; color:#7c7c7c; font-size:1em; letterspacing:-0.1em;}.cl_top.nav2 {color:#a1a1a1; font-weight:bold;} /* 게시판타이틀 */ 홈페이지에서게시판의머릿부분에해당하는 css.brd_top {height:20px; width:680px; padding:5px;}.brd_top.title {float:left; width:600px; font-weight:bold; font-size:1.1em; color:#333333; padding:3px px; background:url('/home/image/cl_top.gif') 10px 0 no-repeat;}.brd_top.title a {text-align:left; padding:19px px; font-weight:bold; font-size:1.1em; color:#325e95;} 12

$.brd_top.title a:hover {text-align:left; padding:10px 0 0 10px; font-weight:bold; fontsize:1.1em; color:#592511;} 2 context.css ( 그림 2-2) Context.$

13 .brd_top.title a:hover {text-align:left; padding:10px px; font-weight:bold; fontsize:1.1em; color:#592511;} 2 context.css ( 그림 2-2) Context.css 문서안에는홈페이지내에삽입되는컨텐츠내용물과, 메인프론트페이지에사용된컨텐츠문서의 css 값들이선언되어있다. 컨텐츠의내용이많은홈페이지의경우 css 값을찾는데오랜시간이걸리는등한문서안에홈페이지의모든 css 값을몰아놓으면제작 / 수정시에어려움이많기때문에편의상용도에따라 layout.css 와 context.css 로분리하였다. Context.css 문서는 layout.css 문서상단에서 import 로호출한다. 경로는관리도구-> 인트라셀관리-> 웹문서관리-> /html/cms/ 템플릿아이디안의폴더에서찾을수있으며우측초록색연필아이콘을클릭하면원본파일을볼수있다. 다음은 context.css 의원본이다. 로그인페이지와각종문서들에대한값이선언되어있다. /* 로그인페이지 */.login {background:url(/home/image/login_bg.gif) no-repeat; width:629px; height:244px; margin: px;}.login.member {text-align:center; padding:30px 0 0 0;}.login.signup {clear:both; width:230px; height:70px; }.login.force {text-align:left;}.login.signup_input {float:left;} 13

14 .login.signup_bt {float:left; padding-left:10px;}.login.id {padding:0 0 5px 17px;}.login.pw {padding: px;}.login.signup_btn {width:210px; height:18px; text-align:center; float:left;}.login.signup_btn {clear:both; padding-top:10px;}.login.input {width:90px; height:18px; border:1px solid #d7d7d7; margin:0px; padding:0px;}.login.submit {padding-right:5px;width:59px; }.login.signin {background:url(#!l.base;image/login_bg.gif) no-repeat; width:498px; height:234px; text-align:center;}.login.signin_btn {background:url(#!l.base;image/f_bg2.gif) no-repeat; width:240px; height:32px; padding: px; text-align:left;} /* 업계소식 */.brief {width:211px; height:92px;}.brief.news {width:211px; height:14px;}.brief.news ul {width:211px; height:14px;}.brief.news ul li {float:left; margin:0; padding:0; font-weight:bold; list-style:none;}.brief.news.tit_1 {color:#262626; height:14px; padding:3px 0 0 0; font-size:1em; textalign:center;}.brief.news.more {float:right; width:34px; height:7px; padding:8px 0 0 0;}.brief.news.tit_1 a{color:#262626; text-decoration:none;}.brief.news.tit_1 a:hover{color:#262626; text-decoration:none;}.brief.view {width:208px; height:65px; padding:15px 0 0 3px;}.brief.title {height:14px;}.brief.name {float:left; padding-bottom:5px;}`.brief.list {clear:both; padding-top:4px;}.brief.brieflist {font-size:8pt; margin:0;font-family:verdana, 굴림,Dotum;margin:0px;fontsize:8pt;letter-spacing:-1px;}.brief.brieflast {font-size:8pt; margin:0;font-family:verdana, 굴림,Dotum;margin:0px;fontsize:8pt;letter-spacing:-1px;}.brief.brieflast a {color:#6a6a6a; text-decoration:none;}.brief.brieflast a:hover {color:#000; text-decoration:none;}.brief.brieflist a {color:#6a6a6a; text-decoration:none;}.brief.brieflist a:hove r{color:#000; text-decoration:none;} 14

15 /* 제품검색 */.product {width:200px; height:102px; background:url(/home/image/product_bg.gif) norepeat;}.product.tit {font-size:0.75em; font-weight:bold; color:#4aba18; padding:5px px;}.product.tit_1 {font-weight:bold; color:#262626; padding: px;}.product.tit_1 a {font-weight:bold; color:#262626; text-decoration:none;}.product.tit_1 a:hover {font-weight:bold; color:#262626; text-decoration:none;}.product.con {color:#8c8c8c; padding:5px px;} /* 홍보센터 */.pr_movie {width:194px; height:102px; background:url(/home/image/movie_bg.gif) norepeat;}.pr_movie.tit {font-size:0.75em; font-weight:bold; color:#4aba18; padding:5px px;}.pr_movie.tit_1 {font-weight:bold; color:#262626; padding: px;}.pr_movie.tit_1 a {font-weight:bold; color:#262626; text-decoration:none;}.pr_movie.tit_1 a:hover {font-weight:bold; color:#262626; text-decoration:none;}.pr_movie.con {color:#8c8c8c; padding:5px px;} /* 퀵배너 */.quick_banner {width:208px; height:109px;}.quick_banner.faq {background:url(/home/image/quick_bg1.gif) no-repeat; height:52px;}.faq.tit {font-weight:bold; color:#262626; padding:3px 0 0 0;}.faq.tit_1{color:#4aba18;}.faq.tit a {color:#262626; text-decoration:none;}.faq.tit_1 a {color:#4aba18; text-decoration:none;}.faq.con {color:#8c8c8c; padding:3px 0 0 0; width:105px; font-size:0.9em; letter-spacing:- 1.5px;}.quick_banner.online {background:url(/home/image/quick_bg2.gif) no-repeat; height:57px;}.online.tit {font-weight:bold; color:#262626; padding:7px 0 0 0;}.online.tit_1 {color:#4aba18;}.online.tit a {color:#262626; text-decoration:none;}.online.tit_1 a {color:#4aba18; text-decoration:none;}.online.con {color:#8c8c8c; padding:3px 0 0 0; width:115px; font-size:0.9em; letter-spacing:- 1.5px;} /* 프론트배너프로그램 */ 15

16 .banner {width:900px;}.banner.title {text-align:left;font-weight:bold;padding:6px;}.banner.view {border:1px solid #dfdfdf;height:51px;}.banner.list {padding:5px;} (2) 레이아웃틀잡기 - 이번단락에서는홈페이지의레이아웃구조에따라 css 문서의어느부분들을수정해야 하는지간단한 tip 과함께플래시쇼의규격화사이즈등을알아보기로한다. 1 홈페이지의전체정렬을가운데정렬로하고싶을경우.fl_all { padding:0px; width:1000px; background:url('image/all_bg.gif') repeat-x; margin:auto; position:relative;} - layout.css 의.fl_all 에 margin:auto; position:relative; 부분을기입해준다. 이때 width 를 100% 로주어서는안되며반드시 px 단위로정확한값을넣어주어야한다..sl_all {width:1000px; margin:auto; background:url('image/sub_all_bg.gif') repeat-x;} - 마찬가지로서브레이아웃 css 에서도 margin:auto; 부분을기입하여준다. - 홈페이지를왼쪽정렬로사용하고싶을경우에는해당부분을삭제한다. 2 가운데정렬된홈페이지전체에백그라운드이미지나컬러가들어가있을경우..fl_bg {width:100%; background:url('image/all_bg.gif') repeat-x;} - main.html 에서 fl_all 을감싸는 fl_bg 라는이름의 div 를하나더생성한다. 이때가로값은 100% 로기입해주며, 이미지가가로로반복될경우 repeat-x, 세로로반복될경우 repeat-y, 반복하지않을경우 no-repeat, 가로세로양쪽으로반복될경우 repeat 를적어준다. 단순한패턴의이미지가가로나세로로반복되는경우에는이미지크기를줄이기위하여 1px 재단을권장한다. -만약백그라운드에특정이미지가아닌 color 색상이들어간경우에는 background: # 색상코드 ; 를입력한다..sl_bg {width:100%; background:url('image/sub_all_bg.gif') repeat-x;} - 서브페이지도프론트페이지와마찬가지로 layout.shell 에서 sl_bg 영역을따로생성하고, 위의값을기입하여준다. -1번과 2번의 tip 을응용하여, 왼쪽정렬의홈페이지에전체백그라운드가들어간시안을코딩할경우를생각해볼수있다. 이때는레이아웃을.fl_bg 나.sl_bg 등의 div 로따로 16

감싸줄필요없이.fl_all,.sl_all 의 width 값을 100% 로설정하고직접백그라운드이미지나 색상코드값을기입하여준다. 3 서브페이지의바디영역전체를감싼선등이있는디자인시안을코딩할경우. 상단의시안과같이서브페이지전체를감싸는선이미지등이삽입된시안의경우를살펴보자.

17 감싸줄필요없이.fl_all,.sl_all 의 width 값을 100% 로설정하고직접백그라운드이미지나 색상코드값을기입하여준다. 3 서브페이지의바디영역전체를감싼선등이있는디자인시안을코딩할경우. 상단의시안과같이서브페이지전체를감싸는선이미지등이삽입된시안의경우를살펴보자. 서브페이지의컨텐츠영역은사용자가기입한내용만큼, 또는게시판길이만큼해당이미지가유기적으로늘어나야하므로이에따른레이아웃의수정이필요하다. layout.shell 에서 sl_body 부분을다음과같이수정하여준다. <div class="sl_body"> <div class="b_top"> <div class="b_bg"> <div class="sl_menu"> $#load,/icons/app/cms/menu.php?mode=left_menu#; <div class="sl_context"> <div style="width:700px;">#![]; <div class="b_bott"> 이에따른 css 문서에선언된값을하단에정리하였다. 이때.sl_body.b_bg 에서 overflow:hidden; 부분을반드시기입해주어야한다. 이것을적어주지않으면 Firefox 나 IE8 버전이나간혹해당이미지가늘어나지않는오류가발생함에유의한다..sl_body.b_top {background:url('image/sl_body_top.gif') no-repeat; height:22px; width:969px;} 17

18 .sl_body.b_bg {background:url('image/sl_body_bg.gif') repeat-y; width:969px; overflow:hidden;}.sl_body.b_bott {background:url('image/sl_body_bott.gif') no-repeat; height:22px; width:969px;} 4 서브왼쪽메뉴에마우스롤오버했을시다른이미지가나오는효과를구현. /* 서브페이지좌측메뉴 */.sl_menu.cap {width:170px; height:48px; background:url('image/sm_top.gif') no-repeat;}.sl_menu.title {color:#ffffff; font-weight:bold; text-align:left; padding-left:30px; paddingtop:15px; font-size:1.4em;}.sl_menu.mlist {padding:0; margin:0; background:url('image/sm_list_bg.gif') repeat-x;}.sl_menu.m_out {width:170px; height:31px; padding:3px px; background:url('image/sl_mbg0.gif') 0 50% no-repeat;}.sl_menu.m_out:hover {background:url('image/sl_mbg.gif') no-repeat 0 50%; width:170px; height:31px; color:#4d6403; padding:3px px;}.sl_menu.m_out.m_in { padding:9px px; margin:0; color:#333;}.sl_menu.m_out.m_in a {color:#999999; font-weight:bold; display:block;}.sl_menu.m_out.m_in a:hover { color:#078fce; font-weight:bold; display:block;}.sl_menu.m_out2 {width:130px; height:20px; background:url('image/sm_icon2.gif') 0 3px norepeat; margin:10px px; padding-left:6px;}.sl_menu.mbase {padding-bottom:40px;} /* 텍스트멀티메뉴 */.sm_multi {clear:both; margin-left:18px; margin-top:5px; padding: px; width:130px; height:auto;}.m_out3 {float:left; background:url('image/sm_icon3.gif') 0 3px no-repeat; text-align:left; width:40%; padding-left:10px; height:15px; padding-top:3px;} - 평상시보이는이미지 -.sl_menu.m_out {width:170px; height:31px; padding:3px px; background:url('image/sl_mbg0.gif') 0 50% no-repeat;} - 마우스롤오버했을때나타나는이미지.sl_menu.m_out:hover {background:url('image/sl_mbg.gif') no-repeat 0 50%; width:170px; height:31px; padding:3px px;} 18

$cap {width:246px; height:116px; background:url('image/sm_top.gif') no-repeat;}.sl_menu.mlist {padding:0; margin:0; background:url('image/sm_list_bg.gif') repeat-y;}.sl_menu.mbase {width:246px; height:100px; background:url('image/sm_bott.$

19 5 서브좌측메뉴전체를감싸고있는디자인이들어가있을경우. - 하단의시안과같이서브좌측메뉴전체를감싸는선이미지등이삽입된시안의경우를 살펴보자. 서브페이지의좌측메뉴는사용자가설정한메뉴만큼세로영역이유기적으로 늘어나야하므로이에따른이미지들을세가지로분기시켜줄필요가있다..sl_menu.cap {width:246px; height:116px; background:url('image/sm_top.gif') no-repeat;}.sl_menu.mlist {padding:0; margin:0; background:url('image/sm_list_bg.gif') repeat-y;}.sl_menu.mbase {width:246px; height:100px; background:url('image/sm_bott.gif') no-repeat; padding-bottom:40px;} 상단의소스는해당경우를코딩해놓은홈페이지의 layout.css 부분을발췌한것이다. sm_list_bg.gif 는 1px 정도로재단하여 y 좌표로유기적으로늘어날수있도록기입하여준다. 6 header 부분메인 / 서브공통적용에따른디자인적용 tip - 앞서설명한바와같이 header 영역은전체의 top 부분을관할하는것으로메인과서브에서공통으로적용되는특징이있다. 때문에메인과서브각각의플래시쇼에탑부분부터이어진각기다른이미지등이삽입될경우, 구현이다소어려울수있다. 때문에처음이미지시안을디자인할때해당부분을고려한수정 / 편집이필요하다. 그러나디자인시안의특성상도저히공통적용으로는구현이어려울때에는 s_header 등의임의의 div 를 layout.shell 에추가하여 css 에따로값을선언해줄수있다. 7 유형에따른플래시쇼이미지의규격 - 템플릿에서는레이아웃틀에해당하는 css(layout.css) 와컨텐츠문서들의값을넣어놓은 css(context.css) 를따로분리해놓고있다. 이것은앞서설명한바와같이, 컨텐츠의내용이 19

20 많은경우 css 값을찾는데오랜시간이걸리는등한문서안에홈페이지의모든 css 값을작성시수정및유지보수의어려움과, 추후템플릿교체등의기능을수행할때값이틀어지지않도록어느정도규격화를해놓고자하는목적에부흥한것이다. 디자인시안이완전히똑같지않는한 1px 까지똑같이규격화할수는없지만, 플래시쇼등전체적인홈페이지틀을잡아주는값은디자인의유형에따라규격화값을다음과같이정해놓고있다. - 서브플래시쇼의사이즈는 width:1000px; height:140px 로 100% 맞추어져있다. - 메인플래시쇼의경우디자인유형이매우다양하기때문에가로사이즈는 1000px 로맞추어져있지만세로사이즈는그규격이다소유기적이다. 세로사이즈는 270px, 330px, 390px, 430px, 450px, 490px 중하나로맞추길권장하며, 홈페이지플래시상위에컨텐츠등을쌓는시안같은경우에는 570px, 600px, 650px 중하나로고정한다. - 플래시쇼의사이즈는플래시쇼관리도구안에서설정을해야하지만, layout.css 안에도별도기입되어있는부분이있으므로, 이에특히주의한다...main_flashshow {width:1000px; height:390px;}.sub_flashshow {width:1000px; height:140px;} 8 fl_body, 프론트페이지바디영역에대한 tip.fl_body {clear:both; width:1000px; height:137px; overflow:hidden; background:url('image/cont_bg.gif') no-repeat;} -fl_body 는프론트페이지의상 / 하단과플래시부분을제외한몸통부분을의미한다. 상단의소스와같이 layout.css 에해당부분의값이기입되어있지만, cms 관리도구-> 시스템관리-> cms 환경설정의메인화면크기입력란에도값을반드시적어야한다는점에꼭유의한다. Css 와관리도구의 height 값이만약다르다면관리도구에기입된값이홈페이지에우선적용된다. 단, 관리도구에서의 width 값기입은생략해도무방하다. (3) 홈페이지컨텐츠제작 프론트페이지컨텐츠와홈페이지에삽입된각종컨텐츠문서는관리도구 -> 인트라셀관리 - > 웹문서관리 -> /html/cms/ 템플릿아이디 /home/ 안에저장되어있다. 20

컨텐츠문서안에 style 등을적용하여직접마크업하는방법은웹표준에도어긋나므로지양해야한다.

21 ( 그림 2-3) 컨텐츠문서 css 의값들이선언된 Context.css 파일은 layout.css 문서내부에포함되어, home 안의문서에서다시링크를걸어줄필요는없다. 또한, 쎄지오홈페이지웹문서에서는모든소스를 div 로코딩하고 css 는외부링크로호출하는것을원칙으로하고있다. 컨텐츠문서안에 style 등을적용하여직접마크업하는방법은웹표준에도어긋나므로지양해야한다. 프론트페이지의컨텐츠등록은앞서기술했던 < 주요 CMS 기능의간단한작동원리숙지 > 에서간단하게설명하였으므로이단락에선생략한다. - 기존메뉴에서의컨텐츠링크는다음의메뉴관리화면을참조한다. ( 그림 2-4) 메뉴관리도구는메뉴플래시옆의보라색연필을클릭하면볼수있다. 메인메뉴구분을 반드시컨텐츠로하고메뉴경로를직접작성또는검색을눌러찾아도된다. 21

(4) 플래시쇼제작 - 플래시쇼는관리도구-> 템플릿관리-> CMS 환경설정에서지정할수있다. 단순한이미지파일로도등록이가능하며, 이미지나플래시쇼둘중선택가능하다.

22 검색시해당문서가반드시생성이되어있어야만목록에나타남에유의한다. 또한새문서생성시메뉴경로에생성하고자하는파일명을작성후웹페이지내에서 내용을작성하면새로운컨텐츠문서가생성됩니다. (4) 플래시쇼제작 - 플래시쇼는관리도구-> 템플릿관리-> CMS 환경설정에서지정할수있다. 단순한이미지파일로도등록이가능하며, 이미지나플래시쇼둘중선택가능하다. ( 그림 2-5) - 서브메뉴마다플래시쇼이미지를각각다르게설정할수있다. 아래의그림에서확인할수있듯이, 메뉴관리의각대메뉴마다서브이미지를설정하는항목이있어이미지로도등록가능하며, 메뉴마다각기다른플래시쇼를선택하여적용시킬수있다. 기본이미지에체크하면위의관리도구-cms 환경설정에서서브배경에등록된이미지가표시된다. ( 그림 2-6) 22

또한, 이같은모든설정은실제플래시쇼가먼저제작이되어있어야만선택툴목록에나타난다는점에특히유의한다. 다음으로는플래시쇼제작화면을간단히알아보기로한다. 관리도구에서플래시쇼로배경을설정하였다면, 메인과서브화면에보라색연필모양이나타나는것을확인할수있다. 이것을클릭하여보면플래시쇼관리도구가나타난다.

23 또한, 이같은모든설정은실제플래시쇼가먼저제작이되어있어야만선택툴목록에나타난다는점에특히유의한다. 다음으로는플래시쇼제작화면을간단히알아보기로한다. 관리도구에서플래시쇼로배경을설정하였다면, 메인과서브화면에보라색연필모양이나타나는것을확인할수있다. 이것을클릭하여보면플래시쇼관리도구가나타난다. ( 그림 2-7) 만들어진플래시쇼가없을때는등록된플래시쇼가없다는문구가나오지만, 상단의그림 ( 그림 2-7) 은플래시쇼가등록되어있는화면을캡쳐한것이다. 쇼목록보기버튼을통해각각의플래시쇼를등록할수있으며, 추가버튼으로플래시파일이나이미지를마치포토샵레이어처럼분리해서등록할수있다. 이때, 설정버튼을눌러다시한번각플래시쇼의정확한크기값을입력해주어야만정상적인작동이가능하다는점에반드시유의한다. 플래시쇼의정확한크기는 layout.css 안에도기입이되어있으므로, 해당사이즈의크기를모두같게맞추어준다. 또한, 플래시파일 (swf) 을등록할시에는 x 좌표와 Y 좌표값을 0 으로표기하고너비와높이값란은비워놓아야원본크기의플래시파일등록이가능하다. 좌측체크박스에체크하고활성화또는비활성화버튼을통해해당리소스를사용및사용치않을수있고, 비활성화된리소스는홈페이지에표시되지않는다. (5) 게시판링크홈페이지에서게시판을링크거는것은앞서설명한컨텐츠부분과크게다르지않다. 메뉴관리도구에서메뉴구분을게시판으로선택한후, 메뉴경로에해당게시판의아이디를적어주면된다. 직접작성또는검색을통해목록에서게시판이름을선택해도된다. 검색기능으로입력할경우에는해당게시판이반드시생성이되어있어야만목록에나타나게됨에유의한다. 또한직접게시판이름을적어줄경우새게시판이자동생성되며, 게시판아이디앞의 / 를반드시입력하고, 게시판아이디뒤의문자역시꼭 brd 로끝맺음해주어야한다. 23

24 ( 그림 2-8) 게시판을생성하기위해서는관리도구 -> 인트라셀관리 -> 게시판관리로이동한다. 게시판관리화면에서좌측상단의새게시판을클릭하면게시판을생성할수있는새창이나타나는데, 임의의게시판 ID 와게시판이름을적고읽기쓰기등급등을체크하여손쉽게게시판을생성할수있다. 생성된게시판의아이디명을바꿀때는해당게시판체크박스에표기한다음, 좌측하단의입력폼에새로운아이디명을입력한뒤, 변경버튼을누른다. ( 그림 2-8) 24

25 (6) 사이트맵, 로그인페이지등기타페이지제작사이트맵페이지의경로는 /icons/app/cms/sitemap.php 이며, 주로 top.html 문서에링크되어있다. 메뉴관리에서입력한메뉴구성은 sitemap.php 화면에자동으로표시되며, layout.css 에사이트맵타이틀이미지등의 css 값이설정되어있다. 로그인페이지는컨텐츠문서들이모여있는홈디렉토리안에제작하여두고, top.html 문서와메뉴관리부분에서별도로링크해준다. 25

이장에서다룰내용 테두리를제어하는스타일시트 외부여백 (Margin) 과내부여백 (Padding) 관련속성 위치관련속성 2

이장에서다룰내용 테두리를제어하는스타일시트 외부여백 (Margin) 과내부여백 (Padding) 관련속성 위치관련속성 2 03 장. 테두리여백지정하는속성 이번장에서는테이블, 레이어, 폼양식등의더예쁘게꾸미기위해서 CSS 를이용하여 HTML 요소의테두리속성을바꾸어보자. 이장에서다룰내용 1 2 3 테두리를제어하는스타일시트 외부여백 (Margin) 과내부여백 (Padding) 관련속성 위치관련속성 2 01. 테두리를제어하는스타일시트 속성값설명 border-width border-left-width