CSS ( )
Overall Process
Overall Process (Contents : Story Board or Design Source) (Structure : extensible HyperText Markup Language) (Style : Cascade Style Sheet) (Script : Document Object Model)
(Contents : Story Board or Design Source)
,
( )
/ -- --, -- -- Home Site Map Contact us -- -- -- --. -- -- -- -- Home -- -- -- -- ( )..,, / /.. 21..?.,. ( ) -- -- TV Dynamic Korea -- -- -- -- 110-787 95-1 604. : 02) 733-8951 : 02)722-0297 Email to : Webmaster ( ) -- --
(Structure : extensible HyperText Markup Language)
(Document Type Definition) (validation) HTML vs. XHTML Version Strict vs. Transitional(Frameset) IE6, IE7 Standards, Compatibility mode
<?php include($_server['document_root']."/share/config.php");?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko"> <head> <meta http-equiv="content-type" content="text/html; charset=euc-kr" /> <title> </title> <?php include($_server['document_root']."/share/layout_head.php");?> <script type= text/javascript > // some code </script> <style type= text/css > /* some style rules */ </style> </head> <body class="intro"> <?php include($_server['document_root']."/share/layout_top.php");?> <div id="location"> <a href="main.asp">home</a> <a href="chp01.asp?ex=1"> </a> <span class="current"> </span> </div> <h1><img src="../img/01intro/intro_tit01.gif" alt=" " /></h1> <div id="content-area"> <!-- --> </div> <?php include($_server['document_root']."/share/layout_btm.php");?> </body> </html>
: <h1>~<h6> : <p> : <ul>, <ol>, <li>, <dl>, <dt>, <dd> : <table>, <thead>, <tbody>, <colgroup>, <col>, <tr>, <th>, <td> : <form>, <fieldset>, <legend>
: <h1>, : <ul>, <li> : <h1> : <h2>~<h6>, <p>, <ul>, <ol>, <dl>, <table>, <form> : <address>
h1 ul ul ul ul p + img address
<div>, <span> id, class
#head #body #sub #foot
#head <div id="head"> <h1 id="logo"><a href="main.asp"><img src="../img/06com/pcsi_logo01.gif" alt=", " /></a></h1> <div id="toplink"> <ul> <li style="display: none;" ><a href="#body"> </a></li> <li><a href="/"><img src="/img/nav/top01.png" alt="home" /></a></a></li> <!-- --> </ul> </div> <div id="topnav"> <ul> <li class="menu-1"><a href="chp01.asp?ex=1"><img src="/img/06com/ menu-1.png" alt=" " /></a> <ul> <li><a href="chp01.asp?ex=1"><img src="/img/06com/menu-1-1.png" alt=" " /></a></li> <!-- --> </ul> </li> <!-- --> <ul> </div> <div id="visual"> <p><img src= /img/nav/visual.jpg alt=. /></p> </div> </div><!-- endof #head -->
#sub <div id="sub"> <h1><img src="../img/01intro/left_tit.gif" alt=" " /></h1> <ul id="subnav"> <li><a href="?ex=1"><img src="../img/01intro/left_menu01_off.gif" name="menu011" alt=" " /></a></li> <li><a href="?ex=2"><img src="../img/01intro/left_menu02_off.gif" name="menu021" alt=" " /></a></li> <li><a href="?ex=3_1"><img src="../img/01intro/left_menu03_off.gif" name="menu031" alt=" " /></a> <ul> <li><a href="?ex=3_1"><img src="../img/01intro/left_menu03_1off.gif" name="menu03_11" alt=" " /></a></li> <li><a href="?ex=3_2"><img src="../img/01intro/left_menu03_2off.gif" name="menu03_21" alt=" " /></a></li> <li><a href="?ex=3_3"><img src="../img/01intro/left_menu03_3off.gif" name="menu03_31" alt=" " /></a></li> </ul> </li> <li><a href="?ex=4"><img src="../img/01intro/left_menu04_off.gif" name="menu041" alt=" " /></a></li> <li><a href="?ex=5"><img src="../img/01intro/left_menu05_off.gif" name="menu051" alt=" " /></a></li> <li><a href="?ex=6"><img src="../img/01intro/left_menu06_off.gif" name="menu061" alt=" " /></a></li> <!-- --> </ul> </div><!-- endof #sub -->
#body <div id="body"> <div id="location"> <a href="main.asp">home</a> <a href="chp01.asp?ex=1"> </a> <span class="current"> </span> </div> <h1><img src="../img/01intro/intro_tit01.gif" alt=" " /></h1> <div id="content-area"> <p style="margin: 0 0-180px 0;"><img src="../img/01intro/sub01_img01.jpg" alt=" " /></p> <p style="margin: 0 0 0 154px;"><img src="../img/01intro/sub01_img02.gif" alt=" " /></p> <p style="margin: 20px 0 0 154px;"><img src="../img/01intro/sub01_img03.gif" alt=".,,." /></p> <p style="margin: 20px 0 0 154px;"><img src="../img/01intro/sub01_img04.gif" alt=". 21." /></p> <!-- --> <p style="margin: 57px 0 0 364px;"><img src="../img/01intro/sub01_img07.gif" alt=" " /></p> </div><!-- endof #content-area --> </div><!-- endof #body -->
#foot <div id="foot"> <ul class="related"> <li><a href="http://www.pcpp.go.kr" target="_blank"> </a></li> <li><a href="http://www.balance.go.kr" target="_blank"> </ a></li> </ul> <address> <img src="/img/06com/bottom_banner1.gif" usemap="#map4" alt="110-787 95-1 604. : 02) 733-8951 : 02)722-0297" / ><br /> <map id="map4" name="map4"> <area shape="rect" coords="299,3,427,27" href="mailto:jennifer71@cwd.go.kr" alt="email to : Webmaster" /> </map> </address> <div class="contact"> <a href="http://www.pcsi.go.kr/publish/chp01.asp?ex=7" target="_self"><img src="/img/06com/0711_2.gif" alt=" " /></a> </div> <div class="link"> <select> <option value="">-- --</option> <option value="http://www.mofe.go.kr"> </option> </select> </div> </div><!-- endof #foot -->
<object> element <object> element type data
<object> <!-- --> <object data="hello.swf" type="application/x-shockwave-flash"> <!-- PNG --> <object data="hello.png" type="images/png"> <!-- GIF --> <object data="hello.gif" type="images/gif"> <!-- text --> <p>hello!</p> </object> </object> </object>
Macromedia <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http:// download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="550" height="400" id="flash_movie" align="middle"> <param name="allowscriptaccess" value="samedomain"> <param name="movie" value="flash_movie.swf"> <param name="quality" value="high"> <param name="bgcolor" value="#ffffff"> <embed src="flash_movie.swf" quality="high" bgcolor="#ffffff" width="550" height="400" name="untitled-1" align="middle" allowscriptaccess="samedomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/ getflashplayer"> </object>
<object> <object type="application/x-shockwave-flash" data="images/banner.swf" width="140" height="40"> </object> <object type="application/x-shockwave-flash" data="images/banner.swf" width="140" height="40"> <param name="movie" value="images/banner.swf" /> </object>
Hixie <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http:// download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="550" height="400" id="flash_movie" align="middle"> <param name="movie" value="flash_movie.swf"> <!-- Hixie method --> <!--[if!ie]> <--> <object type="application/x-shockwave-flash" data="flash_movie.swf" width="550" height="400"> <p><img src="flash_movie.png" alt="" /></p> </object> <!--> <![endif]--> </object>
(Style : Cascade Style Sheet)
CSS CSS CSS cascade inheritance priority descendant selector class
id, descendant selector #head { #head h1#logo { #head #toplink { #head #toplink img { #topnav { #topnav ul { #topnav ul li { #topnav ul li img { #head #visual { #sub { #sub h1 { #sub h1 img { ul#subnav, ul#subnav ul { ul#subnav li { ul#subnav li img { #sub #head #body #foot #body { #body h1 { #location { #location span { #content-area { #site-banner { #site-banner ul { #site-banner li { #foot { #foot ul.related { #foot ul.related li { #foot ul.related a { #foot address { #foot div.contact { #foot div.link { #foot div.link select {
@import CSS CSS <link> @import CSS CSS /
import.css section1.css section2.css section3.css board.css form.css template.css layout.css popup.css base.css
pcsi.css @import url(layout.css); @import url(board.css); @import url(section.css); layout.css board.css section.css
position vs. float position, normal flow block float,
#head { width: 960px; height: 188px; #sub { position: absolute; top: 188px; left: 0; width: 237px; #body { width: 723px; /* min-height: 627px; */ padding-left: 237px; padding-bottom: 30px; background: url(/img/06com/sub_bodytable_img.gif) no-repeat 955px 0 #fff; #foot { background:url(/img/06com/bottom.gif) no-repeat #00395B; width: 960px; height: 129px;
!
<script type="text/javascript"> //<![CDATA[ bodyel = document.getelementbyid("body"); subel = document.getelementbyid("sub"); if (bodyel.offsetheight < subel.offsetheight) { bodyel.style.height = subel.offsetheight + "px"; //]]> </script>
CSS : <h1>~<h6>, <p>, <form>, <ol>, <ul>, <dl>, <dd>, <blockquote>
#sub h1 { margin: 0; #sub h1 img { vertical-align: top; ul#subnav, ul#subnav ul { margin: 0; padding: 0; list-style: none; ul#subnav li img { vertical-align: top;
h1 ul#subnav ul #sub h1 { margin: 0; #sub h1 img { vertical-align: top; ul#subnav, ul#subnav ul { margin: 0; padding: 0; list-style: none; ul#subnav li img { vertical-align: top;
position, float negative margin
p p p p p
p margin-left: 154px; p p p p
p p p p p margin-bottom: -180px;
<div id="content-area"> <p style="margin: 0 0-180px 0;"><img src="../img/01intro/sub01_img01.jpg" alt=" " /></p> <p style="margin: 0 0 0 154px;"><img src="../img/01intro/sub01_img02.gif" alt=" " /></p> <p style="margin: 20px 0 0 154px;"><img src="../img/01intro/sub01_img03.gif" alt=".,,." /></p> <p style="margin: 20px 0 0 154px;"><img src="../img/01intro/sub01_img04.gif" alt=". 21." /></p> <p style="margin: 20px 0 0 154px;"><img src="../img/01intro/sub01_img05.gif" alt=".?.,." /></p> <p style="margin: 57px 0 0 364px;"><img src="../img/01intro/sub01_img07.gif" alt=" " /></p> </div><!-- endof #content-area -->
CSS2 background-image div
<div id="foot-wrapper"> <div id="foot"> <!-- --> </div> </div> #foot-wrapper { background: #00395B; #foot { background:url(/img/06com/bottom.gif) no-repeat #00395B; width: 960px; height: 129px;
CSS Hack CSS Hack CSS ex) IE conditional comment
CSS Hack Conditional Comment html * { html>#head { <!--[if ie]> <link href="/css/ie.css" rel="stylesheet" type="text/css" /> <![endif]--> div.ie { padding: 0 25px; width: 100px; voice-family: \ \ ; voice-family: inherit; width: 150px;
(Script : Document Object Model)
Unobtrusive Javascript, XHTML DOM
<div id="topnav"> <ul> <li class="menu-1"><a href="chp01.asp?ex=1"><img src="/img/06com/menu-1.png" alt=" " /></a> <ul> <li><a href="chp01.asp?ex=1"><img src="/img/06com/menu-1-1.png" alt=" " /></a></li> <!-- --> </ul> </li> <!-- --> <ul> </div> <script type= text/javascript > initnav(document.getelementbyid("topnav").getelementsbytagname("ul").item(0)); </script> function initnav(menu) { // menu.childnodes.item(i).getelementsbytagname("img").item(0).onmouseover = function() { if (menu.current!= this) { this.submenu.style.zindex = 5; settop(this.submenu, 0.4, -20, 33); setopacity(this.submenu, 0.3, 0, 1); menu.current = this; // //
IE6 CSS Javascript Mozilla Firefox, Apple Safari, Opera
(Test : Validation Check)
W3C Markup Validation http://validator.w3.org
W3C CSS Validation http://jigsaw.w3.org/css-validator
Semantic Markup http://www.w3.org/2003/12/semantic-extractor.html
Accessibility KWCAG (Korea Web Contents Accessibility Guideline) 1.0,