웹표준 / 웹접근성의정의 웹접근성은장애인들도웹을사용할수있도록하는것입니다. 장애인들도웹사이트와페이지를이동하고, 웹의정보 를확인 / 이해하며, 웹페이지를작성할수있도록하는것입니다. 웹접근성이확보되면, 장애인뿐만아니라, 우리자신도언제가될노인에게많은도움을줍니다. 웹에접근하는데영

Size: px

Start display at page:

Download "웹표준 / 웹접근성의정의 웹접근성은장애인들도웹을사용할수있도록하는것입니다. 장애인들도웹사이트와페이지를이동하고, 웹의정보 를확인 / 이해하며, 웹페이지를작성할수있도록하는것입니다. 웹접근성이확보되면, 장애인뿐만아니라, 우리자신도언제가될노인에게많은도움을줍니다. 웹에접근하는데영"

학철 제갈
6 years ago
Views:

1 CSS& XHTML 웹표준가이드 박성곤

2 웹표준 / 웹접근성의정의 웹접근성은장애인들도웹을사용할수있도록하는것입니다. 장애인들도웹사이트와페이지를이동하고, 웹의정보 를확인 / 이해하며, 웹페이지를작성할수있도록하는것입니다. 웹접근성이확보되면, 장애인뿐만아니라, 우리자신도언제가될노인에게많은도움을줍니다. 웹에접근하는데영향을미치는요인은시각, 청각, 지각, 신체, 신경질환, 언어장애와같은신체적장애뿐아니라, 고 사양하드웨어, 고비용소프트웨어를사용하지못하는사회경제적여건까지를포함합니다. 수많은사람들이웹을사용하는데장애를겪고있습니다. 대부분의웹사이트와웹어플리케이션은접근성을저해하는 요소를갖고있으며, 이로인해많은장애인들이웹에접근하지못하고있습니다. 웹사이트와웹어플리케이션의접근성이향상될수록, 장애인들도보다쉽게웹에접속하고정보를생산할수있습니다. 인터넷을이용하는모든분들이최신사양의고성능컴퓨터를사용하는것은아닙니다. 경제적여건이어려워낡은, 저사양컴퓨터를이용하시는분들도큰불편없이정보를접하고서비스를받을수있도록하는것도웹접근성의문제입니다. 그리고마우스를민첩하게다루기어려운어르신들께서도이용에불편이없도록해드리는것도접근성의문제입니다. 웹접근성은장애인이아닌일반인에게도이익을줍니다. 예를들어, 웹접근성의핵심은웹사이트와어플리케이션이다양한사용자의요구와기호, 환경에유연하게대처할수있도록디자인하는것입니다. 이러한유연함은느린인터넷회선속도, 팔이나손가락이다친환자등특정환경에처한일반인에게도이익을줍니다. 웹표준이왜중요한가요? 웹은교육, 고용, 정부, 경제, 건강, 오락등삶의여러측면에서더욱중요한수단이되고있습니다. 이점이바로웹이 장애인에게동일한접근과동일한기회을제공해야하는본질적인이유입니다. 접근가능한웹은장애인의활발한사회참여를가능하게하기때문입니다. 웹접근성준수하기 웹은교육, 고용, 정부, 경제, 건강, 오락등삶의여러측면에서더욱중요한수단이되고있습니다. 이점이바로웹이 장애인에게동일한접근과동일한기회을제공해야하는본질적인이유입니다. 접근가능한웹은장애인의활발한사회참여를가능하게하기때문입니다.

3 CSS 적용사례

4 1. 이미지에대체텍스트제공 <img src="logo.png" alt=" 행정안전부 " /> 2. 이미지맵에대체텍스트제공 <img alt=" 언어선택 " src="languge.gif" usemap="#language"> <map name="language"> <area alt="english" shape="rect" coords="10,5,66,19" href="/en/"> <area alt="korean" shape="rect" coords="10,17,66,32" href="/ko/"> </map> 3. 서식의서밋버튼에대한대체텍스트제공 <input type="image" src="btn_write.gif" alt=" 실명확인및글쓰기 " /> 의미가없는레이아웃이나배경으로작성한이미지에대해서는 alt= 으로제공해야함 4. 클라이언트이미지맵사용시대체텍스트 <img> 요소에 usemap 속성을사용하고링크영역의좌표정보가 HTML( 클라이언트 ) 에존재하면 영역별로대체텍스트를적절하게제공해야함 <img src="toplink.png" alt="" width="137" height="9" usemap="#toplinkmap" /><br /> <map name="toplinkmap" id="toplinkmap"> <area shape="rect" coords="0,0,23,9" href="/" alt="home" /> <area shape="rect" coords="40,0,75,9" href="/publish/sitemap.htm" alt="site Map" /> <area shape="rect" coords="90,0,137,9" href="mailto:myname@example.com" alt="contact us" title=" 메일보내기 " /> </map>

5 5. 아이프레임에적절한타이틀제공사례 <iframe title=" 국정브리핑정책속보 " name="briefing"src="template/admin/html/kor/ticker.html"></iframe> 6. 키보드만으로콘텐츠가제공되는모든기능을이용할수있어야한다. <a href="/woopuns/woopuns_main.jsp" onmouseover="setmenu(1)" onfocus="setmenu(1)"> 링크가적용된이미지의테두리를없애기위해서 onfocus= this.blue() 를재공한경우키보드포커스가되지않기때문에 이러한경우준수하지못한것으로판단 7. 데이터테이블구성 데이터테이블을제공할경우, 테이블의내용을이해할수있는정보 ( 제목, 요약정보등 ) 를제공해야한다. <table class="type_a" summary="89575 개의게시물이있습니다 "> <caption> 자유게시판 </caption>  8. 데이터테이블을제공할경우, 제목셀과내용셀을구분할수있어야한다. <table> <thead> <tr> <th> 번호 </th> <th> 제목 </th> <th> 파일 </th> <th> 작성자 </th> <th> 작성일 </th> <th> 조회 </th> </tr> </thead> <tbody> <tr> <td>160</td> <td> <a href="contentview.asp"> 웹접근성기술동향및향상방안세미나 : Accessibility의미래 (...</a> </td>

<td> <a href="filename.pdf"><img src="/images/board/iconattach.

-- 하략 --> <table> <caption>3일예보 </caption> <tbody> <tr> <th> 오늘 <br>8.

6 <td> <a href="filename.pdf"><img src="/images/board/iconattach.gif" alt=" 첨부 " title="( 기조연설1) Inclusive Innovation - The key to creating accessible solutions.pdf"></a> </td> <td> 관리자 </td> <td> </td> <td>254</td> </tr>  <table> <caption>3일예보 </caption> <tbody> <tr> <th> 오늘 <br>8.7( 목 )</th> <td><img src="p_02.gif" alt=" 구름조금 "></td> <td> 구름조금 </td> </tr> <tr> <th> 예상기온 </th> <td> 최고 33 c, 최저 24 c</td> </tr>

7 <table summary=" 분과위원의이름과소속 "> <thead> <tr> <th> 이름 </th> <th> 소속 </th> </tr> </thead> <tbody> <tr> <th> 홍영우 </th> <td> 행정안전부 </td> </tr> <tr> <th> 권순교 </th> <td> 숙명여자대학교 </td> </tr> <tr> <th> 최두진 </th> <td> 한국정보문화진흥원 </td> </tr>  9. 레이블 <label> 제공 <dl> <dt><label for= uid > 아이디 </label></dt> <dd><input type= text id= uid ></dd> <dt><label for= upw > 비밀번호 </label></dt> <dd><input type= password id= upw ></dd> </dl>

8 <dl> <dt><label for= name > 이름 </label></dt> <dd><input type= text id= name ></dd> <dt><label for= unum1 > 주민번호 </label></dt> <dd><input type= text id= unum1 title= 주민번호앞자리 >-<input type= password id= unum2 title= 주민번호뒷자리 ></dd> </dl> 10. 링크, 서식, 버튼은자바스크립트없이도작동할수있는가? <a href="popup.html" onclick="window.open(this.href, 'popupname', 'width=300,height=200'); return false;"><img src="openwindow.gif"></a>

9 W3C 의표준문법을준수합니다 XHTML 1.0 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " transitional.dtd"> <strong class="new"> (O) 소문자처리하기 문자셋 (charset) 과자연어를명시합니다 <meta http-equiv="content-type" content="text/html; charset=utf-8"> Table 의바른사용법 caption : 표의제목요소. table 요소바로뒤에만허용되며한번만표시할수있습니다. summary : 표의요약속성. table 요소에동반되는속성으로서표의제목이존재하지않는경우나표에요약설명이필요한경우사용할수있습니다. thead, tbody, tfoot : 표의행 tr 을그룹핑하는요소로서표의머리글, 본문, 풋터를지정합니다. tfoot 요소의경우보통이에해당하는데이터가없어서생략되는경우가많습니다. th : 표의머리글셀을지정합니다. 표의머리글셀은 scope, abbr 과같은속성을동반합니다. scope 속성은사용이강력하게권장되며 abbr 속성은필요에따라사용할수있습니다. scope : th 요소에동반되는속성으로서현재의셀이어느셀의제목인지그범위를명시합니다. scope 속성의값으로는 col, colgroup, row, rowgroup 이있습니다. abbr : th 요소에동반되는속성으로서포함하고있는콘텐츠에대한약식표기가가능한경우약어를표기하는데사용합니다. th 셀의내용을반복해서음성으로출력하는도구들은 abbr 속성에표기된약어를읽게됩니다.

10 화면낭독기와같은보조공학기기는현재의표를다음과같이읽어주어야합니다. 표제목 : 자장면과짬뽕의가격과열량비교표요약 : 짬뽕은자장면보다 500 원비싸고열량이 50kcal 높다표머리글 : 구분, 가격 (won), 열량 (kcal) 표본문 : 자장면-가격-3,000-자장면-열량-300-짬뽕-가격-3,500-짬뽕-열량-350 ( 표의제목셀을먼저읽어주며제목셀에 abbr 값이있는경우 abbr 값을읽어줌 ) <table summary=" 짬뽕은자장면보다 500원비싸고열량이 50kcal 높다 "> <caption> 자장면과짬뽕의가격과열량비교 </caption> <thead> <tr> <th> 구분 </th> <th scope="col" abbr=" 가격 "> 가격 (won)</th> <th scope="col" abbr=" 열량 "> 열량 (kcal)</th> </tr> </thead> <tbody> <tr> <th scope="row"> 자장면 </th> <td>3,000</td> <td>300</td> </tr> <tr> <th scope="row"> 짬뽕 </th> <td>3,500</td> <td>350</td> </tr> </tbody> </table>

11 특수문자는 Entity 코드로변환합니다. HTML 주석가이드  (O)  GNB 코드가시작됨을선언 <div class="gnb">...</div>  GNB 코드가끝남을선언  (O) table 의자식요소인 caption, thead, tbody, tfoot, tr, th, td는들여쓰기하지않습니다. <table> <caption>...</caption> <thead> <tr> <th>...</th> <th>...</th> </tr> </thead> <tbody> <tr> <td>...</td> <td>...</td> </tr> </tbody> </table>

12 ul, ol, dl 의자식요소인 li, dt, dd 요소는들여쓰기하지않습니다. <ul> <li>...</li> <li>...</li> </ul> <ol> <li>...</li> <li>...</li> </ol> <dl> <dt>...</dt> <dd>...</dd> </dl>

13 CSS 요약정리 font font-family : [ 폰트이름 ] ( 폰트를지정한다 ) font-style : [normal/italic/oblique] ( 문자의형태를지정한다 ) font-variant : [normal/small-cap] ( 소문자를대문자로표시 ) font-weight : [normal/bold/bolder/lighter/100/200/ /900] ( 문자의두께를조절한다 ) font-size : [ 사이즈 ] ( 글자의크기를지정한다 ) color color : [ 컬러값 ] ( 요소의텍스트색을지정한다 ) background background-color : [ 색갈값 /transparent] ( 요소의배경색을기술한다 ) background-image : [url( 주소 )/none] ( 요소의배경이미지를설정한다 ) background-repeat : [repeat/repeat-x/repeat-y/no-repeat] ( 배경이미지의반복을지정한다 ) background-attachment : [scroll/fixed] ( 배경의고정과스크롤을설정한다 ) background-position : [ 위치 /top/center/bottom/left/right] ( 배경이미지의위치를지정한다 ) text word-spacing : [ 길이 ] ( 단어간간격설정 ) letter-spacing : [ 길이 ] ( 문자간간격설정 ) text-decoration : [none/underline/overline/line-though/blink] (text 에효과를준다 ) vertical-align : [baseline/sub/super/top/text-top/middle/text-bottom] ( 세로방향정렬을지정한다 ) text-transform : [capitalize/uppercase/lowcase/none] ( 단어를대소문자로바꾸어준다 ) text-align : [left/right/center/justify] ( 텍스트의정렬방법을정한다 ) text-indent : [ 길이 ] ( 들여쓰기를지정한다 ) line-height : [ 길이 ] ( 라인과라인간의간격을정한다 ) text-justify : [newspaper/distribute-all-lines] ( 라인폭자동정렬을설정한다 ) white-space : [normal/per/nowrap] ( 공백처리방법설정 ) boxmodel (margin, padding, border) margin-top : [ 길이 ] ( 요소상부의마진을설정한다 ) margin-right : [ 길이 ] ( 요소우측의마진을설정한다 ) margin-bottom : [ 길이 ] ( 요소하부의마진을설정한다 ) margin-left : [ 길이 ] ( 요소좌측의마진을설정한다 ) padding-top : [ 길이 ] ( 요소상부의 padding 을설정한다 ) padding-right : [ 길이 ] ( 요소우측의 padding 을설정한다 ) padding-bottom : [ 길이 ] ( 요소하부의 padding 을설정한다 ) padding-left : [ 길이 ] ( 요소좌측의 padding 을설정한다 ) border-top-width : [ 길이 ] ( 요소상부의선두께를설정한다 ) border-right-width : [ 길이 ] ( 요소우측의선두께를설정한다 ) border-bottom-width : [ 길이 ] ( 요소하부의선두께를설정한다 )

14 border-left-width : [ 길이 ] ( 요소좌측의선두께를설정한다 ) border-color : [ 색갈값 ] ( 선색갈을설정한다 ) border-style : [none/dotted/dashed/solid/double/groove/inset/outset] ( 선양식을설정한다 ) position html 상에서 x,y,z 축으로각 block 의위치를레이어처럼겹치고세밀한위치를지정할수있다. [absolute][relative] float float : [left/right/none] ( 요소의위치를기존자리에서분리시킨다 ) display display : [block/inline/list-item/none] ( 브라우져에디스플레이되는방법을결정한다 ) list list-style-type : [disk/circle/square/decimal/lower-roman/upper-roman/lower-alpha/upper- alpha/none] (list 의스타일을정의한다 ) list-style-image : [url( 주소 )/none] (list 마커로사용할이미지선택 ) list-style-position : [outside/inside] ( 마커가표시될위치지정 ) cursor : [hand/move/wait/ne-resize/nw-resize/sw-resize/se-resize] ( 커서의형태를지정한다 ) 속기법정리 padding-top:0px; padding-right:20px; padding-bottom:30px; padding-left:10px; padding:0px 20px 30px 10px; padding-top:20px; padding-right:20px; padding-bottom:20px; padding-left:20px; padding:20px; margin-top:0px; margin-right:20px; margin-bottom:30px; margin-left:10px; margin:0px 20px 30px 10px; border-width:1px; border-style:solid; border-color:#007e7e; border: 1px solid #007e7e background-color:white; background-image:url(images/cocktail.gif); background-repeat: repeat-x; background:white url(images/cocktail.gif) repeat-x;

15 초보과정 폰트칼라지정하기  <style> /* base */ body {font:12px " 나눔고딕 ",arial;}.plplpl {font:12px " 나눔고딕 ",arial;color:#330000;} #abc {font:12px " 나눔고딕 ",arial; color:#ff0000;}.abc {font:12px " 나눔고딕 ",arial; color:#0099ff;} <p> 웹표준 season 1 강의입니다!!</p> <p id=abc>id 값이적용됩니다 </p> <p class=abc>id 값이적용됩니다 </p> <p class=abc>id 값이적용됩니다 </p> <p class=abc>id 값이적용됩니다 </p>  결과

16 이미지테두리삭제  <style> img {border:0;} <a href="#"><img src=" alt=" 오버추어디자인마켓 로고입니다."></a>  결과 하이퍼링크 <p><a href=" 하이퍼링크입니다 </a></p> 결과

17 셀렉트박스에폰트칼라지정하기  <style> select {font:12px " 나눔고딕 ",arial;color:blue;}.plplpl {font:12px " 나눔고딕 ",arial;color:#330000;background:#f1f4c2} <select name=""> <option value="0"> 한글판그래픽프로그램 </option> <option value=""> 캐드 2002</option> <option value=""> 포토샵한글판 cs</option> <option value=""> 포토샵한글판 cs2</option> <option value=""> 드림위버한글판 mx2004</option> </select> <select class="plplpl"> <option value="0"> 한글판그래픽프로그램 </option> <option value=""> 캐드 2002</option> <option value=""> 포토샵한글판 cs</option> <option value=""> 포토샵한글판 cs2</option> <option value=""> 드림위버한글판 mx2004</option> </select>  결과

18 인풋박스색상제어하기  <style> input,textarea {font:12px " 나눔고딕 ",arial; border:solid 4px #f1f4c2;} /* 이중으로적용받게할려면, 를넣어줍니다.*/ <p><input /></p> <p><textarea name="" rows="10" cols="20"></textarea></p>  결과

19 머리말타이틀정의하기  <style> h1,h2,h3,h4,h5,h6 {color:#009900;} /* 머릿말폰트의크기를정의합니다.*/ <h1> 머릿말 h1 입니다 </h1> <h2> 머릿말 h2 입니다 </h2> <h3> 머릿말 h3 입니다 </h3> <h4> 머릿말 h4 입니다 </h4> <h5> 머릿말 h5 입니다 </h5>  결과

글씨에스타일주기 <!-- 글씨에스타일주기 --> <style> #plop {font:17px " 나눔고딕 ",arial; color:red;} #line-h {line-height:150%;letter-spacing:-1px;width:300px;} /* line-height 는글씨높이를 150% 간격으로늘려줍니다.

20 글씨에스타일주기  <style> #plop {font:17px " 나눔고딕 ",arial; color:red;} #line-h {line-height:150%;letter-spacing:-1px;width:300px;} /* line-height 는글씨높이를 150% 간격으로늘려줍니다. letter-spacing 은글씨자간을줄여줍니다.*/ #line-h a{font-size:20px;color:#060;text-decoration:underline;} /* line-h 에링크가있다면밑줄을나오게합니다.*/ <p> 바로이런것이 <span id=abc> 전문성 </span> 입니다.</p> <span id=plop> 바로이런것이전문성입니다.</span> <p id=line-h> 부활한 ' 코리안특급 ' 박찬호와필라델피아의결별이기정사실로알려졌다. 이에따라향후박찬호의행보에국내팬들은물론현지언론도높은관심을보이고있다. 외신은 15 일 ( 이후한국시간 ) " 박찬호는 ( 구단이제시한 ) 300 만달러보다훨씬높은몸값과선발투수보직을바라고있지만 <a href=""> 필라델피아는 </a> 이조건들을받아들이지않았다." 고보도했다. 사실상결별이확정된것으로보인다.</p>  결과

21 박스에스타일주기  <style> #box {width:300px; height:50px; border:1px solid #ccc; background:#ffffcc;font:12px " 나눔고딕 ",Arial; padding:5px 7px; margin:50px px;} /* 박스는 div( 제일많이사용 ), p( 줄바꿈 ), span( 요소들 ) 전부적용됩니다.*/ <div id=box> 박스에들어가는내용입니다 </div>  결과

22 박스에 float 적용하기  <style>.box_a {float:left;width:100px; height:50px; border:1px solid #ccc; background:#ffffcc;font:12px " 나눔고딕 ",Arial; padding:5px 7px;} /*float 는넓이와높이가반드시정해져있어야합니다.*/.box_b {float:right;width:100px; height:50px; border:1px solid #ccc; background:#ffffcc;font:12px " 나눔고딕 ",Arial; padding:5px 7px;/*margin-left:50px;*/} /*float 는같은위치에서박스이동이가능합니다.*/.box_c {margin:0px auto;width:100px; height:50px; border:1px solid #ccc; background:#ffffcc;font:12px " 나눔고딕 ",Arial; padding:5px 7px;/*margin-left:50px;*/text-align:right;} /*margin:0px auto; 는박스를무조건가운데로정렬합니다.*/ <div class=box_a> 박스에들어가는내용입니다 </div> <div class=box_b> 박스에들어가는내용입니다 2</div> <div class=box_c> 박스에들어가는내용입니다 3</div>  결과

23 박스에 position 적용하기  <style>.box_d { position:absolute;width:300px; height:50px; border:1px solid #ccc; background:#e6e6e6; text-align:center; } /*absolute 를써주지않으면밑으로붙는박스가됩니다.*/.box_e {z-index:2; position:absolute; margin:15px px;width:300px; height:50px; border:1px solid #ccc; background:#999; text-align:center; } /*z-index 값으로포개지는구분을줄수있습니다.*/.box_f {z-index:3; position:absolute; margin:30px px;width:300px; height:50px; border:1px solid #ccc; background:#666; text-align:center; } /**/ <div class=box_d>1 번입니다.</div> <div class=box_e>2 번입니다.</div> <div class=box_f>3 번입니다.</div>  결과

24 테이블예제 _01  <style> #table {margin-top:100px} #table_a { width:500px;border-top:2px solid #ccc;} /**/ #table_a td { border:1px solid #ccc;font:12px " 나눔고딕 ",arial;} /* 테이블안에 td 가있다면모두적용됩니다.*/ #table_a td.a200 {width:200px;font-weight:bold;background:#ffffcc;text-align:center;} /* 아이디에. 이붙으면그것은클레스로적용됩니다.*/ #table_a td.af {background:#e6e6e6;} /**/ <div id="table"> <table id=table_a> <tr> <td class=a200> 제목 </td> <td class=a200> 아이디 </td> <td class=a200> 비밀번호 </td> </tr> <tr> <td> 제목입니다.</td> <td class=af> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> </table> </div>  결과

25 테이블예제 _02  <style> #table_b {width:500px;border-top:2px solid #ccc;} /**/ #table_b td {border:1px solid #ccc;font:13px " 나눔고딕 ",arial;} /**/ #table_b th { width:200px;font:12px" 나눔고딕 ",arial;border:1px solid #ccc; background:#ffffcc;} /*th 는테이블의머릿말입니다. th 는 td 와별개로스타일을모두적용시켜야합니다. th 의텍스트는무조건가운데로정렬됩니다.*/ <div id="table"> <table id=table_b> <tr> <th> 제목 </th> <th> 아이디 </th> <th> 비밀번호 </th> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> </table> </div>  결과

26 서브메뉴 _01  <style> #left_menu {border:1px solid #ccc; width:140px; margin:30px; background:#e6e6e6;} /**/ #left_menu ul {margin:0; padding:5px; list-style:none; } /*margin:0*/ #left_menu li {font:12px" 나눔고딕 ",arial; padding-left:16px; background:url(" no-repeat left;} /*list-style:none 를선언하면볼릿기호가없어집니다.( 모든브라우져 )*/ #left_menu li.lol { color:#000;font-weight:bold;letter-spacing:-1px;} /**/ <div id=left_menu> <ul> <li>menu 1 입니다 </li> <li class=lol>menu 2 입니다 </li> <li>menu 3 입니다 </li> </ul> </div>  결과

$서브메뉴 _02  <style> #menu_over {width:200px;background:#ccc;padding:5px;} /*margin:0pt auto 는가운데로붙는명령어입니다.$

27 서브메뉴 _02  <style> #menu_over {width:200px;background:#ccc;padding:5px;} /*margin:0pt auto 는가운데로붙는명령어입니다.*/ #menu_over a, #menu_over a:visited {display:block;width:184px;background:#ffff99;padding:3px 3px 3px 10px;margin:1px;text-decoration:none;border-right:3px solid #7f7f7f;color:#555;} /*display:block 처리를하면아래로줄바꿈을합니다. padding:3px;margin:1px 은블록안에서이루어집니다 */ #menu_over a:hover {border-right:3px solid #000;color:#000;background:#ffffff;} /* 마우스를올렸을때반응입니다.*/ <div id="menu_over"> <a href="#">menu 1</a> <a href="#">menu 2</a> <a href="#">menu 3</a> <a href="#">menu 4</a> <a href="#">menu 5</a> </div>  결과

$서브메뉴 _03 <style> #alzio_mh {width:208px;font:12px" 나눔고딕 ",arial;font-weight:bold;padding:2px; background:#90bade;margin-top:30px} /**/ #alzio_mh ul {margin:0;padding:0;list-style: none;} /**/$

28 서브메뉴 _03 <style> #alzio_mh {width:208px;font:12px" 나눔고딕 ",arial;font-weight:bold;padding:2px; background:#90bade;margin-top:30px} /**/ #alzio_mh ul {margin:0;padding:0;list-style: none;} /**/ #alzio_mh ul li {border-bottom:1px solid #90bade;} /**/ #alzio_mh ul li a {display:block;padding:2px 2px 2px 10px;border-left:5px solid #1958b7;border-right:5px solid #508fc4;background:#2175bc;color:#fff;text-decoration:none;} /*li 를따로선언해주면 display:block 에 width 값이없어도적용이됩니다.*/ #alzio_mh ul li a:hover {border-left:5px solid #1c64d1; border-right:5px solid #5ba3e0; background:#2586d7;} /**/ #alzio_mh ul li a.on {border-left:5px solid red; border-right:5px solid green; background:yellow;color:red;} /**/ <div id="alzio_mh"> <ul> <li><a href="#"> 메뉴링크 1</a></li> <li><a href="#" class='co'> 메뉴링크 2</a></li> <li><a href="#"> 메뉴링크 3</a></li> <li><a href="#"> 메뉴링크 4</a></li> <li><a href="#"> 메뉴링크 5</a></li> </ul> </div>  결과

$-- 서브메뉴 04 --> <style> #alzio_mh2 {width:120px;margin-top:30px} /**/ #alzio_mh2 ul {margin:0;padding:0;} #alzio_mh2 li {list-style:none} /**/ #alzio_mh2 ul li a$

29 서브메뉴 _04  <style> #alzio_mh2 {width:120px;margin-top:30px} /**/ #alzio_mh2 ul {margin:0;padding:0;} #alzio_mh2 li {list-style:none} /**/ #alzio_mh2 ul li a {display:block;width:120px;padding:5px;color:#fff; background:#e6e6e6;border-bottom:1px solid #eee;textdecoration: none;} /*width:120px 를써주면링크영역이잡힙니다. li 를따로선언해주지않으면 display:block 에 width 값이반드시있어야됩니다. */ #alzio_mh2 li.on a {background:#000;color:#fff;} #alzio_mh2 li a:hover {background:#000;color:#fff;} <div id="alzio_mh2"> <ul> <li><a href="#"> 메뉴링크 1</a></li> <li><a href="#"> 메뉴링크 2</a></li> <li><a href="#"> 메뉴링크 3</a></li> <li class="on"><a href="#"> 메뉴링크 4...</a></li> <li><a href="#"> 메뉴링크 5</a></li> </ul> </div>  결과

30 가로메뉴 _01  <style> #alzio_mh7 {margin-top:30px;} /**/ #alzio_mh7 ul {margin:0;padding:0} #alzio_mh7 li {float:left;list-style:none;} /**/ #alzio_mh7 a {color:#000; display:block; background:#ccc;padding:4px 10px;border-left:1px solid #fff;text-decoration:none;} /*display:block 을넣지않으면패딩적용이안됩니다.*/ #alzio_mh7 a:hover {background:#999;} /**/ <div id="alzio_mh7"> <ul> <li><a href="#">menu 1</a></li> <li><a href="#">menu 2</a></li> <li><a href="#">menu 3</a></li> <li><a href="#">menu 4</a></li> <li><a href="#">menu </a></li> </ul> </div>  결과

31 제 1 강블록과인라인 HTML 이나 XHTML 의 Tag 들은 Block level element 와 Inline level element 으로나누어진다. 눈에보이는특징으로구분한다면, Block 형 tag 는줄바꿈이되고 Inline 형 tag 는줄바꿈이되지않는다는것이다 Block level element ( 블록요소 ) <div>, <h1-h6>, <p>, <ul>, <ol>, <li>, <dl>, <dt>, <dd>, <blockquote>, <form>, <pre>, <fieldset> 블록엘리먼트들은 <p> 엘리먼트밖에두어야합니다. 문단은텍스트를위한것입니다. 따라서문단밖에블록엘리먼트들을위치시켜야합니다. 물론모든인라인엘리먼트들을두는것은괜찮습니다. <em>, <a>, <strong>, <img>, <q> 일반적으로, block 은다른 block 과 inline 를포함합니다. block 은 inline 의상위구조입니다. 일반적인속성의 block 은새로운줄을만듭니다.( 줄단위의공간값을가집니다.) div, form, ul, ol, li, dl, dt, dd 등이 block 그루핑에사용되는엘리먼트들이다. block 태그들은성격에따라 Physical, Logical, Group, User-input 로분류가됩니다. <p> 는 Physical Block 태그입니다. <blockquote>, <pre>, <listing>, <xmp>, <plaintext>, <h1>~<h7>, <cite> 는 Logical Block( 타당한, 논리적인 ) 태그입니다. <div> 는 Grouping Block 태그입니다. <form>, <fieldset> 은 User-input Block 태그입니다. <p> 태그안에는 <div>, <table>, <blockquote> 같은 block 태그가위치하지못합니다. <li> 태그안에는 <div>, <table>, <blockquote> 같은 block 태그가위치하지못합니다. <address> 태그역시 block 태그가위치하지못합니다. 즉, <p>, <li>, <address> 태그안에는오로지 inline 태그들만이위치할수있습니다. 또한, inline 태그를 display:block 으로바꾸어사용할수도없습니다. 이럴때쓰는것이 display: inline 입니다. < 참조 > 보통제목은 <h1>-<h6> 으로 element 를지정하고글의단락은 <p></p> 로지정한다. 자동으로줄바꿈이되며이것은 block level element 이기때문에독립적이게취급된다.

32 Inline level element ( 내부요소 ) <br/>, <img/>, <span>, <a>, <q>, <font>, <b>, <i>, <u>, <s>, <sub>, <sup>, <big>, <small>, <bdo>, <tt> <abbr>, <acronym>, <dfn>, <adress>, <code>, <kbd>, <samp>, <var>, <del>, <ins>, <em>, <strong> text level element 라고도불리웁니다. block 의내부에위치하며, 다른 inline 과 data, object 를포함합니다. block 의하위구조이며, data, object 의상위구조입니다. 일반적인속성의 inline 은새로운줄을생성하지않고, 줄내부에위치합니다. a, img, select, input, span 등이대표적인 inline 그루핑에사용되는엘리먼트들이다. block 태그들은성격에따라 Physical, Logical, Group, Functional 로분류가됩니다. <font>, <b>, <i>, <u>, <s>, <sub>, <sup>, <big>, <small>, <bdo>, <tt> 는 Physical inline( 물질적인 ) 태그입니다. <abbr>, <acronym>, <dfn>, <adress>, <q>, <code>,<kbd>, <samp>, <var>, <del>, <ins>, <em>, <strong> 는 Logical inline( 논리적인, 타당한 ) 태그입니다. <span> 은 Grouping inline 태그입니다. <a> 는 Functional 태그입니다 < 참조 > Double side element와 Single side element Double side element <p> 여기처럼처음과끝이쌍으로있는형태의 element를말합니다 </p> Inline level element <img src= 주소표시 /> 처럼시작과끝이없이하나의 element( 구성요소 ) 만써주는형태의 element 를말한다.

33 제 2 강 list 순서형리스트 <ol><li> 순서가나타나는리스트입니다.</li></ol> ol : ordered list ( 숫자붙은목록, li 앞에 '1.' 이붙음 ) li : list item ( 목록항목 ) 비순서형리스트 <ul><li> 순서가나타나는리스트입니다.</li></ul> ul : unordered list ( 일반목록, li 앞에기호가붙음 ) li : list item ( 목록항목 ) 정의형리스트용어의정의를첨부해놓은리스트 <body> <p> 정의형리스트만들기 </p> <dl> <dt> 여기에제목이들어갑니다.</dt> <dd> 여기에내용이들어갑니다.</dd> </dl> </body>. dl : definition list (' 용어 ' 와그 ' 설명 ' 으로구성된목록 ) dt : definition term ( 용어 ) dd : definition description ( 설명 )

34 제 3 강 div (division: 분할, 분배 ) 와 span element div division 의약자로시작태그 <div 속성 = 요소 > 와종료태그 </div> 로구성태그내에속성을적지않아도시작태그와종료태그사이에들어가는내용에따라그공간의크기도달라진다. 줄바꿈태그 span 시작태그 <span 속성 = 요소 > 와종료태그 </span> 으로구성 span 태그는연속사용시이웃하는성질을가지고있어글씨에관한 style 을적용할때적합한태그이다. div 태그이용해서구조만들기 <div> <div> container </div> <div> <div> header </div> <div> content </div> <div> sideinfo </div> </div> <div> footer </div> </div> div 와 span 의구조적차이

35 <div style= background:#eee >div</div> <div style= background:#eee >div</div> <span style= background:#eee >span</span> <span style= background:#eee >span</span> width, height, background, border, padding, margin, overflow, font, color 등의 style 을사용할수있다.

36 제 4 강 class 속성 class 는웹문서에스타일속성을정의할때 id 속성과함께흔히잘쓰인다. 일종의디자인된옷이라고생각하면된다. style 영역에서클래스속성을정의하고 body 에있는 element 에서불러서정의되어있는스타일을적용시키는것이다. Class 를사용하는방법은 style 영역이나 CSS 파일내에서. 클래스명 { 스타일속성정의 } 이렇게클래스스타일속성을정의해놓고 body 에가서 <element 명 class= 클래스명 ></element 명 > 식으로활용하면된다

37 제 5 강 box dimension (content, border, padding, margin) 보통 Block level 의 element 들은그영역을 box dimension 이라는박스형의영역을가지게된다. ( 혹은 Inline element 라도 display:block 으로스타일속성을지정하면, box 형 dimension 을가지게된다.) 그영역은또여러영역으로나누게되는데 content, border, padding, margin 이다 하나의박스형 element 가차지하는영역은위네영역을모두합한영역이다. border border-top-width : [ 길이 ] ( 요소상부의선두께를설정한다 ) border-right-width : [ 길이 ] ( 요소우측의선두께를설정한다 ) border-bottom-width : [ 길이 ] ( 요소하부의선두께를설정한다 ) border-left-width : [ 길이 ] ( 요소좌측의선두께를설정한다 ) border-color : [ 색갈값 ] ( 선색갈을설정한다 ) border-style : [none/dotted/dashed/solid/double/groove/inset/outset] ( 선양식을설정한다 ) #border { border: 1px solid #007e7e; } #border_bot { border-bottom:2px solid #007e7e; } #border_tlrb { border-top:1px solid red; border-left:2px solid red; border-right:3px solid red; border-bottom:4px solid red; }

38 padding padding 은테두리인 border 와실제로내용이들어가는 content 사이의영역이다. <style type="text/css"> #box {width:300px; height:50px; border:1px solid #ccc; background:#ffffcc;font:13px " 나눔고딕 ",Arial; padding:5px 7px; margin:50px px;} <div id=box> 박스에들어가는내용입니다 </div>

<style type="text/css"> #box { width:300px; height:50px; border:1px solid #ccc; background:#ffffcc;font:13px " 나눔고딕 ",Arial; padding:5px 7px;

39 margin margin 이라는스타일속성은테두리인 border와다른 element의 box들과의사이의영역을말한다. Padding과마찬가지로그사이의너비를지정해주면되는데, Margin은특이한점하나가있는데만약 margin영역을지정해준 box element가역시 margin을지정한또다른 Box element와접해있을때서로의 margin영역이겹쳐질수있다는것이다. <style type="text/css"> #box { width:300px; height:50px; border:1px solid #ccc; background:#ffffcc;font:13px " 나눔고딕 ",Arial; padding:5px 7px; margin:30px; } <div id=box> 박스에들어가는내용입니다 </div> <style type="text/css">.box {width:300px; height:50px; border:1px solid #ccc; background:#ffffcc;font:13px " 나눔고딕 ",Arial; padding:5px 7px; margin:30px; } <div class=box> 박스에들어가는내용입니다 </div> <div class=box> 박스에들어가는내용입니다 </div>

40 float block level의 element는자동으로줄바꿈이된다. 하지만레이아웃을구성할때 block level element옆에다른컨텐츠들이배치되게하고싶어지기도할것이다. block level element의영역을유지하면서옆에자연스럽게다른컨텐츠들이오게하고싶을때 float스타일속성을쓴다. float 의속성으로는 left 와 right 가있습니다. float 해제방법으로는.. 뒤에오는요소에대해 clear:both; 를적용하는방법. 부모요소에 float 을적용하는방법부모요소에 overflow:hidden; zoom:1;( 익스 6~7 에서만 ) 을적용하는방법 :after 속성으로가상요소를생성하여 clear:both 시키는방법 <style type="text/css"> body { font:13px " 나눔고딕 ",Arial;}.box_a { float:left;width:100px; height:50px; border:1px solid #ccc; background:#ffffcc; padding:5px 7px; margin-left:100px;} /*float는넓이와높이가반드시정해져있어야합니다.*/.box_b { float:right;width:100px; height:50px; border:1px solid #ccc; background:#ffffcc; padding:5px 7px; } /*float는같은위치에서박스이동이가능합니다.*/.box_c { margin:0px auto;width:100px; height:50px; border:1px solid #ccc; background:#ffffcc; text-align:right; } /*margin:0px auto; 는박스를무조건가운데로정렬합니다.*/ <div class=box_a> 박스에들어가는내용입니다 </div> <div class=box_b> 박스에들어가는내용입니다 2</div> <div class=box_c> 박스에들어가는내용입니다 3</div> Float 전 float 후

41 <style type="text/css"> body { background-color:#f4f4f4;font:13px " 나눔고딕 ",Arial;} div { width:200px; border 1px solid gray; background-color:yellow; float:left; }.box1 { width:50px;background-color:white; float:left; }.box2 { } p { margin:0; } <div> <p class="box1"> 박스1</p> <p class="box2"> 동해물과백두산이마르고닳도록하느님이보우하사우리나라만세!!</p> </div> <style type="text/css">.float_box_wrap {width:100%; margin-bottom:30px; font:bold 200% verdana; border:3px dashed #aaa; *zoom:1;}.float_box_wrap:after { content:''; clear:both; height:0; display:block; visibility:hidden; }.box01 { float:left; width:25%; padding:20px; border:2px solid #ccc; background:#eee; }.box02 { float:left; width:25%; padding:20px; border:2px solid #ccc; background:#eee; } <div class="float_box_wrap"> <div class="box01">float:left;</div> <div class="box02">float:right;</div> </div>

$position_box_wrap02 {position:relative; height:400px; padding-top:180px; margin-bottom:50px; font:bold 12px " 나눔고딕 "; border:1px solid #000; background:#efefef; text-align:center;}.$

42 position:absolute position 의속성으로는 relative( 상대값 ) 와 absolute( 절대값 ) 이있습니다. position 과같이쓸수있는 css 로는위치값을지정할수있는 top/bottom, left/right 와 z-index( 레이어순서 ) 가있습니다. <style type="text/css">.position_box_wrap02 {position:relative; height:400px; padding-top:180px; margin-bottom:50px; font:bold 12px " 나눔고딕 "; border:1px solid #000; background:#efefef; text-align:center;}.absolute01 {position:absolute; top:0px; left:0px; width:200px; height:100px; background:red;}.absolute02 {position:absolute; top:0px; right:0px; width:200px; height:100px; background:red;}.absolute03 {position:absolute; bottom:0px; left:0px; width:200px; height:100px; background:red;}.absolute04 {position:absolute; bottom:0px; right:0px; width:200px; height:100px; background:red;} <div class="position_box_wrap02"> Position:relative; <div class="absolute01">position:absolute; top:0px; left:0px;</div> <div class="absolute02">position:absolute; top:0px; right:0px;</div> <div class="absolute03">position:absolute; bottom:0px; left:0px;</div> <div class="absolute04">position:absolute; bottom:0px; right:0px;</div> </div>

$position_box_wrap {position:relative; height:400px; padding:20px; margin-bottom:50px; font:bold 120% verdana; border:1px solid #000; background:#efefef;}.$

43 position:relative position 의속성으로는 relative( 상대값 ) 와 absolute( 절대값 ) 이있습니다. position 과같이쓸수있는 css 로는위치값을지정할수있는 top/bottom, left/right 와 z-index( 레이어순서 ) 가있습니다. <style type="text/css">.position_box_wrap {position:relative; height:400px; padding:20px; margin-bottom:50px; font:bold 120% verdana; border:1px solid #000; background:#efefef;}.relative {position:relative; top:20px; left:20px; width:200px; height:100px; background:red; z-index:1;}.relative span { display:block; padding-top:80px; }.absolute {position:absolute; top:20px; left:20px; width:200px; height:100px; background:blue; z-index:2;} <div class="position_box_wrap"> <div class="relative"><span>relative</span></div> <div class="absolute">absolute</div> </div>

display:inline, display:block, display:none display 스타일속성은 block element 를 inline element 로또는 inline element 를 block element 로변환시켜준다. 또한 display:none 을지정해주면그 element 는화면에출력이되지않는다.

44 display:inline, display:block, display:none display 스타일속성은 block element 를 inline element 로또는 inline element 를 block element 로변환시켜준다. 또한 display:none 을지정해주면그 element 는화면에출력이되지않는다. <style type="text/css"> body { font:13px " 나눔고딕 "; background:#f1f1f1; }.display { display:block; background:#46b616; } div { display:inline; } <p > 검색엔진사이트 <span class="display"> 네이버로연결됩니다.</span></p> <div> 첫번째블럭 </div> <div> 두번째블럭 </div>

overflow overflow는 block element에쓰이는속성인데레이어의크기는제한이되어있지만들어갈내용이많을때레이어의크기범위를넘어가는부분에대한스타일속성을정의해주는것이다, overflow에는 visible과 hidden, scroll, auto가있다.

45 overflow overflow는 block element에쓰이는속성인데레이어의크기는제한이되어있지만들어갈내용이많을때레이어의크기범위를넘어가는부분에대한스타일속성을정의해주는것이다, overflow에는 visible과 hidden, scroll, auto가있다. Visible : 내용이범위를넘어가도그냥보여줌 Hidden : 내용이번위를넘어가면넘어가는부분은감춤 Scroll : 레이어에스크롤바를달아서범위안에내용이모두들어갈수있게해줌 Auto : 기본적으로는 scroll방식인데가로세로의스크롤바중필요가없는스크롤바는안보이게하는것이다. <overflow:visible> <style type="text/css"> body { font:13px " 나눔고딕 "; } h1 { font:16px 나눔고딕 ; font-weight:bold; } div { border:1px solid; background:#46b616; padding:5px; width:200px; height:100px;overflow:visible; } <h1> 리버풀행황당, 최소 1년은잔류 </h1> <div><p> 국내한언론이이청용 (22 볼턴 ) 이잉글랜드프리미어리그리버풀로이적할가능성을보도하자이청용측은황당하다는반응을보이고있다. 이청용의에이전트인김승태 TI스포츠대표는 26일 한마디로황당하다. 그동안리버풀과 ( 이적에관련된 ) 어떤논의도없었다 며 볼턴이챔피언십 (2부리그) 으로강등하지않는한다음시즌은무조건볼턴에서 1년을더뛴다 고강조했다. </p></div>

<overflow:hidden> <style type="text/css"> body { font:13px " 나눔고딕 "; } h1 { font:16px 나눔고딕 ; font-weight:bold; } div { border:1px solid; background:#46b616; padding:5px; width:200px;

46 <overflow:hidden> <style type="text/css"> body { font:13px " 나눔고딕 "; } h1 { font:16px 나눔고딕 ; font-weight:bold; } div { border:1px solid; background:#46b616; padding:5px; width:200px; height:100px;overflow:hidden; } <h1> 리버풀행황당, 최소 1년은잔류 </h1> <div><p> 국내한언론이이청용 (22 볼턴 ) 이잉글랜드프리미어리그리버풀로이적할가능성을보도하자이청용측은황당하다는반응을보이고있다. 이청용의에이전트인김승태 TI스포츠대표는 26일 한마디로황당하다. 그동안리버풀과 ( 이적에관련된 ) 어떤논의도없었다 며 볼턴이챔피언십 (2부리그) 으로강등하지않는한다음시즌은무조건볼턴에서 1년을더뛴다 고강조했다. </p></div>

<overflow:scroll> <overflow:auto> <style type="text/css"> body { font:13px " 나눔고딕 "; } h1 { font:16px 나눔고딕 ; font-weight:bold; } div { border:1px solid #e6e6e6; background:#46b616; padding:5px;

47 <overflow:scroll> <overflow:auto> <style type="text/css"> body { font:13px " 나눔고딕 "; } h1 { font:16px 나눔고딕 ; font-weight:bold; } div { border:1px solid #e6e6e6; background:#46b616; padding:5px; width:200px; height:100px;overflow:scroll; scrollbar-facecolor:#ffffff; scrollbar-track-color:#ffffff; scrollbar-shadow-color:#e6e6e6; scrollbar-highlight-color:#e6e6e6; scrollbar-dackshadow-color:#ffffff; scrollbar-3dlight-color:#ffffff; scrollbar-arrow-color:#e6e6e6; } <h1> 리버풀행황당, 최소 1년은잔류 </h1> <div><p> 국내한언론이이청용 (22 볼턴 ) 이잉글랜드프리미어리그리버풀로이적할가능성을보도하자이청용측은황당하다는반응을보이고있다. 이청용의에이전트인김승태 TI스포츠대표는 26일 한마디로황당하다. 그동안리버풀과 ( 이적에관련된 ) 어떤논의도없었다 며 볼턴이챔피언십 (2부리그) 으로강등하지않는한다음시즌은무조건볼턴에서 1년을더뛴다 고강조했다. </p></div>

48 layout-1 <style type="text/css"> body { font:13px " 나눔고딕 "; } #wrap { position:relative;margin:0 auto;width:300px; } #lnb { position:absolute; top:0; left:0; width:50px; height:100px;background:#e1e1e1; } #contents { margin:0 95px 0 55px; height:100px;background:#c9c9c9; } #side { position:absolute; top:0; right:0; width:90px;height:100px;background:#b0b0b0; } <div id="wrap"> <div id="lnb"> 좌측내용 </div> <div id="contents"> 우측컨텐츠 </div> <div id="side"> 우측내용 </div> </div>

layout-2 <style type="text/css"> body { font:13px " 나눔고딕 "; } #wrap { margin:0 auto;width:300px; } #lnb { float:left;width:50px; height:100px;background: #e1e1e1;; } #contents { float:left;

49 layout-2 <style type="text/css"> body { font:13px " 나눔고딕 "; } #wrap { margin:0 auto;width:300px; } #lnb { float:left;width:50px; height:100px;background: #e1e1e1;; } #contents { float:left; width:250px;height:100px;background: #c9c9c9; } #footer { clear:both;height:30px;background: #b0b0b0; } <div id="wrap"> <div id="lnb"> 좌측내용 </div> <div id="contents"> 우측컨텐츠 </div> <div id="footer"> 푸터 </div> </div>

$layout-3 <style type="text/css"> body { font:13px " 나눔고딕 "; } *{margin:0; padding:0;}.box_out { border:3px dashed #aaa;float:left;overflow:hidden; zoom:1; }.$

50 layout-3 <style type="text/css"> body { font:13px " 나눔고딕 "; } *{margin:0; padding:0;}.box_out { border:3px dashed #aaa;float:left;overflow:hidden; zoom:1; }.box_out:after { content:''; clear:both; height:0; display:block; visibility:hidden; }.box { width:100px; height:100px; text-align:center; background:#eee; border:2px solid #ccc; float:left; } p{clear:both;} <div class="box_out"> <div class="box"> 박스1</div> <div class="box "> 박스2</div> <div class="box "> 박스3</div> <div class="box "> 박스4</div> </div> <p> 뒤쪽에오는컨텐츠 </p>

layout-4 <style type="text/css"> body {font-family: 나눔고딕,arial; font-size:13px; color:#000; background:#fff; } #container {margin:0pt auto; width:300px; height:200px; } #header { padding:2px;

51 layout-4 <style type="text/css"> body {font-family: 나눔고딕,arial; font-size:13px; color:#000; background:#fff; } #container {margin:0pt auto; width:300px; height:200px; } #header { padding:2px; width:296px;height:30px;background-color:#e1e1e1; } #sidebar { padding:2px;width:96px; height:100px;float:left;background-color:#b0b0b0; } #content { padding:2px;width:96px;height:100px;float:left;background-color:#c9c9c9; } #sidebara { padding:2px;width:96px; height:100px;float:right;background-color:#b0b0b0; } #footer { padding:2px; width:296px;height:30px; background: #e1e1e1;clear:both; } <div id='container'> <div id='header'>header내용입니다 </div> <div id='sidebar'>sidebar내용입니다 </div> <div id='content'>content내용입니다 </div> <div id='sidebara'>headera내용입니다 </div> <div id='footer'>footer내용입니다 </div> </div>

$layout-5 <style type="text/css"> body {font-family: 나눔고딕,arial; font-size:13px; color:#000; background:#e6e6e6; } #login_area { width:100px;$

52 layout-5 <style type="text/css"> body {font-family: 나눔고딕,arial; font-size:13px; color:#000; background:#e6e6e6; } #login_area { width:100px; height:100px; background:#888;position:absolute; top:50%; left:50%;margin:-50px px;textalign:center;line-height:94px; } <div id="login_area"> 로그인입니다. </div>

53 contents-1 <style type="text/css"> body { font-family: " 나눔고딕 " ; font-size: 12px; } li { list-style:none; }.boxr { margin-left:100px; width:685px; background:url("image/boxbot.gif") no-repeat 0 bottom; }.boxr h1 { background:url("image/boxtop.gif") no-repeat 0 top;color:green; font-family: " 나눔고딕 " ; font-size: 12px;fontweight:bold;text-decoration:underline;padding:10px; }.boxr p { color:#666; padding:0 10px 10px 10px;}.boxR span { color:#999;font-family: " 나눔고딕 " ; font-size: 10px; } <div class="boxr"> <h1> 이승훈 ' 기적같은 ' 금메달 </h1> <p> 이승훈선수가동계올림픽마라톤으로불리는스피드스케이팅 1만m에서금메달을목에걸었습니다. 첫은메달을선사했던이승훈선수는두번째선물로금메달을안겨줬습니다.<br /> <span> :00</span></p> </div>

54 contents-2 <style type="text/css"> body { font-family: " 나눔고딕 " ; font-size: 12px; } li { list-style:none; }.boxr1 { margin-left:100px; width:685px; background:url("image/boxbot.gif") no-repeat 0 bottom; }.boxr1 dt { background:url("image/boxtop.gif") no-repeat 0 top;color:green; font-family: " 나눔고딕 " ; font-size: 12px;fontweight:bold;text-decoration:underline;padding:10px; }.boxr1 dd { color:#666; padding: 0 10px 10px 10px;}.boxR1 span { color:#999; font-family: " 나눔고딕 " ; font-size: 10px;} <dl class="boxr1"> <dt> 이승훈 ' 기적같은 ' 금메달 </dt> <dd> 이승훈선수가동계올림픽마라톤으로불리는스피드스케이팅 1만m에서금메달을목에걸었습니다. 첫은메달을선사했던이승훈선수는두번째선물로금메달을안겨줬습니다.<br /> <span> :00</span></dd> </dl>

55 contents-3 <style type="text/css"> body { font-family: " 나눔고딕 " ; font-size: 12px; }.boxr2 { margin-left:100px; overflow:hidden; width:450px;line-height:42px; background:url("image/boxright.gif") no-repeat right 0; }.boxr2 dt { float:left; background:url("image/boxleft.gif") no-repeat left 0; color:green; font-family: " 나눔고딕 " ; font-size: 12px;font-weight:bold;text-decoration:underline;padding-left:10px; }.boxr2 dd { float:right; color:#666;padding-right:10px;} <dl class="boxr2"> <dt> 보건복지부 </dt> <dd> 이승훈선수는두번째선물로금메달을안겨줬습니다.</dd> </dl>

56 contents-4 <style type="text/css"> body { font-family: " 나눔고딕 " ; font-size: 12px; } li { list-style:none; }.list1 li { margin-left:100px; overflow:hidden; width:500px;line-height:20px; background:url("image/pattern.gif") repeat-x 0 bottom;}.list1 li.subject { float:left; background:url("image/bul_or.gif") no-repeat 0 4px;padding-left:12px; }.list1 li.data { float:right;font-size: 10px; } <ul class="list1"> <li><span class="subject"> 게시물 1번입니다.</span><span class="data"> </span></li> <li><span class="subject "> 게시물 2번입니다.</span><span class="data"> </span></li> <li><span class="subject "> 게시물 3번입니다.</span><span class="data"> </span></li> <li><span class="subject"> 게시물 4번입니다.</span><span class="data"> </span></li> </ul>

contents-5 <style type="text/css"> * {margin:0; padding:0;} body {margin:0; padding:0; font-size:12px; font-family:" 나눔고딕 "," 돋움 ", Dotum, " 굴림 ", Gulim, AppleGothic, Sans-serif;} a

57 contents-5 <style type="text/css"> * {margin:0; padding:0;} body {margin:0; padding:0; font-size:12px; font-family:" 나눔고딕 "," 돋움 ", Dotum, " 굴림 ", Gulim, AppleGothic, Sans-serif;} a {text-decoration:none;} a:hover, a:active, a:focus {text-decoration:underline;} img {border:none; vertical-align:top;}.viewer_area {width:300px; border:1px solid #e6e6e6;margin:20px;padding-top:10px;}.viewer_area ul{}.viewer_area li {list-style:none;border-bottom:1px solid #e6e6e6;margin:0 10px 10px 10px;padding-bottom:10px;}.viewer_area li.last {border:none;padding-bottom:0;}.viewer_area dl {overflow:hidden; *zoom:1;}.viewer_area dt {margin-left:95px; padding:5px 0;}.viewer_area dd.thum {float:left; margin-top:-27px; margin-right:10px;}.viewer_area dd p.mt10 { margin-left:95px; margin-top:10px; } <ul class="viewer_area"> <li> <dl> <dt><img src="images/dt_viewerdownload01.gif" alt=" 한글뷰어 " /></dt> <dd class="thum"><img src="images/thum_viewerdownloaad01.gif" alt=" 한글뷰어썸네일 " /></dt></dd> <dd><p> 이승훈선수가동계올림픽마라톤으로불리는스피드스케이팅 1만m에서금메달을목에걸었습니다. 첫은메달을선사했던이승훈선수는두번째선물로금메달을안겨줬습니다.</p> <p class="mt10"><a href="#"><img src="images/btn_viewerdownload.gif" alt=" 뷰어다운로드 " /></a></p></dd> </dl> </li>

58 <li class="last"> <dl> <dt><img src="images/dt_viewerdownload01.gif" alt=" 한글뷰어 " /></dt> <dd class="thum"><img src="images/thum_viewerdownloaad01.gif" alt=" 한글뷰어썸네일 " /></dt></dd> <dd><p> 이승훈선수가동계올림픽마라톤으로불리는스피드스케이팅 1만m에서금메달을목에걸었습니다. 첫은메달을선사했던이승훈선수는두번째선물로금메달을안겨줬습니다.</p><p class="mt10"><a href="#"><img src="images/btn_viewerdownload.gif" alt=" 뷰어다운로드 " /></a></p></dd> </dl> </li> </ul>

$contents-6 <style type="text/css">.box {width: 175px; background: url(img/bg_01.gif) repeat-y bottom left; }.$

59 contents-6 <style type="text/css">.box {width: 175px; background: url(img/bg_01.gif) repeat-y bottom left; }.box h3 { margin: 0; padding: 6px 8px 4px 10px; font-family:" 나눔고딕 ",Verdana, Arial, Helvetica, sans-serif; font-size: 15px;color: #333;border-bottom: 1px solid #E0CFAB; background: url(img/roundbox_01.gif) no-repeat top left; position:relative; }.box ul {margin: 0;padding: 10px 10px 3px 10px; list-style: none;}.box li {margin: 0 0 3px 0;padding: 0; font-family:" 나눔고딕 ",Verdana, Arial, Helvetica, sans-serif; font-size:11px;}.box li a {color:#333; text-decoration:none; }.visual {background: url(img/roundbox_03.gif) no-repeat top left; width: 175px; height:7px; line-height:0px; padding:0px; margin:0px;} <div class="box"> <h3> 박스타이틀입니다.</h3> <ul> <li><a href="/purchase/"> 리스트목록1 입니다.</a></li> <li><a href="/redeem/"> 리스트목록2 입니다.</a></li> <li><a href="/view/"> 리스트목록3 입니다.</a></li> <li><a href="/purchase/"> 리스트목록4 입니다.</a></li> <li><a href="/redeem/"> 리스트목록5 입니다.</a></li> <li><a href="/view/"> 리스트목록6 입니다.</a></li> </ul> <div class="visual"></div> </div>

contents-7 <style type="text/css"> * {margin:0; padding:0;} body { font-size:12px; font-family:" 나눔고딕 "," 돋움 ", Dotum, " 굴림 ", Gulim, AppleGothic, Sans-serif;} a {text-decoration:none;} a:hover,

60 contents-7 <style type="text/css"> * {margin:0; padding:0;} body { font-size:12px; font-family:" 나눔고딕 "," 돋움 ", Dotum, " 굴림 ", Gulim, AppleGothic, Sans-serif;} a {text-decoration:none;} a:hover, a:active, a:focus {text-decoration:underline;} img {border:none; vertical-align:top;} #wrap {float:left;width:200px;background-color:#eee;text-align:left;}.more{position:absolute;top:10px;right:8px;background:url( norepeat;width:25px;height:8px;display:block;text-indent:-100em;overflow:hidden;padding:0;font-size:1px;line-height:0%;textdecoration:none;} /* unordered List */.dotlistarea {position:relative;padding-bottom:5px;}.dotlistarea h3 {padding:0;margin:0;height:30px;}.dotlistarea h3 a {position:relative;top:6px;left:0px;display:block;font-size:13px;color:#000;padding:1px px;letterspacing:-1px;}.dotListArea ul {background-color:#fff;margin:0 5px;padding:7px 0;}.dotListArea li {background:url( 7px 7px no-repeat;padding:3px 0 3px 14px;}.dotListArea li a {color:#333;} <div class="dotlistarea"> <h3><a href="#" title=" 리스트제목 "> 리스트제목 </a></h3> <ul> <li><a href="#"> 쿤타앤뉴올리언스 - 비처럼..</a></li> <li><a href="#"> 상욱선수 ( 엠게임 )</a></li> <li><a href="#"> 김정훈 궁을위..</a></li>

61 </div> <li><a href="#"> 통기타동영상강좌CD- 차차..</a></li> <li><a href="#"> 녹음실에서심심해서빠른MR..</a></li> <li><a href="#"> 예쁜다솔이의탄생 </a></li> <li><a href="#"> 사랑합니다.. 영윈히그녀만을...</a></li> <li><a href="#">( 광주 ) 젠틀맨비뇨기과 </a></li> <li><a href="#"> 태극체육관 ( 익산 )</a></li> </ul> <a href="#" class="more"> 리스트더보기 </a>

contents-8 * {margin:0; padding:0;} body { font-size:12px; font-family:" 나눔고딕 "," 돋움 ", Dotum, " 굴림 ", Gulim, AppleGothic, Sans-serif;} a {text-decoration:none;} a:hover, a:active, a:focus

62 contents-8 * {margin:0; padding:0;} body { font-size:12px; font-family:" 나눔고딕 "," 돋움 ", Dotum, " 굴림 ", Gulim, AppleGothic, Sans-serif;} a {text-decoration:none;} a:hover, a:active, a:focus {text-decoration:underline;} img {border:none; vertical-align:top;} #wrap {float:left;width:200px;background-color:#eee;text-align:left;}.more{position:absolute;top:10px;right:8px;background:url( norepeat;width:25px;height:8px;display:block;text-indent:-100em;overflow:hidden;padding:0;font-size:1px;line-height:0%;textdecoration:none;} /* ordered List */.num1 {background:url( no-repeat;}.num2 {background:url( no-repeat;}.num3 {background:url( no-repeat;}.num4 {background:url( no-repeat;}.num5 {background:url( no-repeat;}.num6 {background:url( no-repeat;}.num7 {background:url( no-repeat;}.num8 {background:url( no-repeat;}.num9 {background:url( no-repeat;}.num10 {background:url( no-repeat;}.num11 {background:url( no-repeat;}.num12 {background:url( no-repeat;}.num13 {background:url( no-repeat;}.num14 {background:url( no-repeat;}.num15 {background:url( no-repeat;}.ranklistarea_basic {position:relative;}.ranklistarea_basic h3 {padding:0;margin:0;height:30px;}.ranklistarea_basic h3 a {position:relative;top:6px;left:0px;display:block;padding:1px px;font-size:13px;color:#000;letterspacing:-1px;}.rankListArea_basic ol {background-color:#fff;margin:0 5px 5px 5px; padding:7px 0 5px 0;}

63 .ranklistarea_basic ol li {padding:3px 0 3px 24px;background-position:7px 5px;}.rankListArea_basic ol li a {color:#333;} <div id="wrap"> <div class="ranklistarea_basic"> <h3><a href="#" title=" 랭크리스트제목 "> 랭크리스트제목 </a></h3> <ol> <li class="num1"><a href="#"> 쿤타앤뉴올리언..</a></li> <li class="num2"><a href="#"> 상욱선수 ( 엠게임 )</a></li> <li class="num3"><a href="#"> 김정훈궁을위..</a></li> <li class="num4"><a href="#"> 통기타동영좌CD- 차차..</a></li> <li class="num5"><a href="#"> 녹음실에서빠른MR..</a></li> <li class="num6"><a href="#"> 예쁜다솔이의탄생 </a></li> </ol> <a href="#" title=" 랭크리스트더보기 " class="more"> 랭크리스트더보기 </a> </div> </div>

64 contents-9 <style> /* base */ * {margin:0; padding:0;} a {text-decoration:none;} a:link:hover, a:active {text-decoration:underline;} body,th,td {font-size:75%;font-family:" 돋움 ",gulim,sans-serif;color:#333;padding:0;margin:0;} #wrap {float:left;width:250px;background-color:#e6e6e6;text-align:left;padding:5px;}.more{position:absolute;top:13px;right:8px;_right:13px;background:url( no-repeat;width:25px;height:8px;display:block;text-indent:-100em;overflow:hidden;padding:0;font-size:1px;line-height:0%;textdecoration:none;} /* ordered List */.num1 {background:url( no-repeat;}.num2 {background:url( no-repeat;}.num3 {background:url( no-repeat;}.num4 {background:url( no-repeat;}.num5 {background:url( no-repeat;}.num6 {background:url( no-repeat;}.num7 {background:url( no-repeat;}.num8 {background:url( no-repeat;}.num9 {background:url( no-repeat;}.num10 {background:url( no-repeat;}.num11 {background:url( no-repeat;}.num12 {background:url( no-repeat;}.num13 {background:url( no-repeat;}.num14 {background:url( no-repeat;}.num15 {background:url( no-repeat;}.up {background:url( no-repeat;}.down {background:url( no-repeat;}.up {color:#ff5f00;}.down {color:#777;}.keep font,.keep {color:#fff;}

65 .ranklistarea_diff {position:relative;background-color:#fff;}.ranklistarea_diff h3 {padding:0;margin:0;height:30px;border-bottom:1px solid #eee;}.ranklistarea_diff h3 a {position:relative;top:9px;left:10px;_left:15px;display:block;font-size:13px;color:#000;letter-spacing:-1px;}.ranklistarea_diff ol {padding: 10px;margin:0; overflow:hidden; *zoom:1;}.ranklistarea_diff li {float:left;width:100%;height:16px;list-style:none;background-position:0 2px;}.rankListArea_diff li.rank {float:left;display:block;padding-left:10px;width:20px;font-size:9px;font-family:verdana;letter-spacing:- 1px;}.rankListArea_diff li a {float:left;display:block;color:#333;padding-left:14px;}.ranklistarea_diff li.hotall {float:right;font-size:90%;color:#666;}.ranklistarea_diff li.hotwow {float:right;padding:2px 0 1px 19px;background:url( -1px top no-repeat;font-size:11px;color:#ff5f00;}.ranklistarea_diff em {display:none;} <div id="wrap"> <div class="ranklistarea_diff"> <h3><a href="#" title="diff 랭크리스트제목 ">Diff 랭크리스트제목 </a></h3> <ol> <li class="keep"> <span class="rank"><em>=</em> 0 </span><a href="#" class="num1"> 프리 </a><span class="hotall"><em> 전체동영상수 : </em>2,151 개 </span> </li> <li class="up"> <span class="rank"><em>+</em> 3 </span><a href="#" class="num2"> 동해팔팔산악회 </a><span class="hotall"><em> 전체동영상수 : </em>53 개 </span> </li> <li class="down"> <span class="rank"><em>-</em> 1 </span><a href="#" class="num3"> 하루행복 </a><span class="hotall"><em> 전체동영상수 : </em>157 개 </span> </li> <li class="down"> <span class="rank"><em>-</em> 1 </span><a href="#" class="num4"> 재승사랑방 </a><span class="hotwow"><em> 와우수 : </em>428</span> </li> <li class="up"> <span class="rank"><em>+</em>35</span><a href="#" class="num5"> 개똥벌레 </a><span class="hotwow"><em> 와우수 : </em> 50</span> </li> <li class="down"> <span class="rank"><em>-</em> 1 </span><a href="#" class="num6"> 개똥벌레 </a><span class="hotwow"><em> 와우수 : </em>542</span> </li> </ol> <a href="#" title="diff 랭크리스트더보기 " class="more">diff 랭크리스트더보기 </a> </div> </div>

contents-10 <style> /* base */ * {margin:0; padding:0;} a {text-decoration:none;} a:link:hover, a:active {text-decoration:underline;} input,select,textarea {font-size:100%;} body,th,td

67 contents-10 <style> /* base */ * {margin:0; padding:0;} a {text-decoration:none;} a:link:hover, a:active {text-decoration:underline;} input,select,textarea {font-size:100%;} body,th,td {font-size:75%;font-family:" 돋움 ",gulim,sans-serif;color:#333;padding:0;margin:0;} #wrap {float:left;width:250px;background-color:#e6e6e6;text-align:left;padding:5px;}.more {position:absolute;top:13px;right:8px;_right:13px;background:url( norepeat;width:25px;height:8px;display:block;text-indent:-100em;overflow:hidden;padding:0;font-size:1px;line-height:0%;textdecoration:none;} /* definition List */.movielistarea {}.movielistarea h3 {padding:0;margin:0;height:30px;}.movielistarea h3 a {position:relative;top:9px;left:0px;display:block;padding:1px 0 0 4px;_padding:1px 0 0 9px;fontsize:13px;color:#000;letter-spacing:-1px;}.movieListArea.movieList {background-color:#fff;width:100%;padding-bottom:10px;}.movielistarea dl {float:left;display:inline;width:230px;margin:10px 0 0 9px;border-bottom:1px solid #e6e6e6;paddingbottom:10px}.movielistarea dl.none{border:none;padding:0}

68 .movielistarea dl a {color:#333;}.movielistarea dt {padding:2px 0 2px 0;}.movieListArea img {float:left;margin-right:7px;border:1px solid #9c9a99;}.movieListArea dd {font-size:11px;line-height:1.6;}.movielistarea dd.time {float:left;color:#999;}.movielistarea dd.nick {float:left;background:url( 6px 4px norepeat;padding-left:11px;}.movielistarea dd a {font-size:11px;}.clb {clear:both;} </head> <body> <div id="wrap"> <div class="movielistarea"> <h3><a href="#" title=" 동영상 List"> 동영상 List</a></h3> <div class="movielist">  <dl> <dd><a href="#" ><img src=" width="65" height="50" alt="dd"/></a></dd> <dt><a href="#" > 동영상제목 </a></dt> <dd class="time">02:29</dd> <dd class="nick"><a href="#"> 동영상으..</a></dd> </dl> <dl> <dd><a href="#" ><img src=" width="65" height="50" alt=" 지문을통하여적성을알수있나요?"/></a></dd> <dt><a href="#" > 지문을통하여적성을알..</a></dt> <dd class="time">02:29</dd> <dd class="nick"><a href="#"> 동영상으..</a></dd> </dl> <dl> <dd><a href="#" ><img src=" width="65" height="50" alt=" 밤길혼자귀가할때치한대처법알려주세요 "/></a></dd> <dt><a href="#" > 밤길혼자귀가할때치..</a></dt> <dd class="time">02:03</dd> <dd class="nick"><a href="#"> 동영상으..</a></dd> </dl> <dl> <dd><a href="#" ><img src=" width="65" height="50" alt=" 고칼로리라면끓이는법 "/></a></dd> <dt><a href="#" > 고칼로리라면끓이는법 </a></dt> <dd class="time">04:55</dd> <dd class="nick"><a href="#"> 동영상으..</a></dd> </dl>

모두 보기

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

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