qqqqqq.tistory.comqqqqqq.tistory.com/.../[email protected] · Web view링크가 적용된 이미지의 테두리를 없애기 위해서 onfocus=”this.blue()”를

CSS& XHTML

웹표준가이드

2010.04.05 박 성곤

웹표준/웹접근성의 정의

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

웹에 접근하는 데 영향을 미치는 요인은 시각, 청각, 지각, 신체, 신경질환, 언어 장애와 같은 신체적 장애뿐 아니라, 고사양 하드웨어, 고비용 소프트웨어를 사용하지 못하는 사회 경제적 여건까지를 포함합니다.

수 많은 사람들이 웹을 사용하는데 장애를 겪고 있습니다. 대부분의 웹 사이트와 웹 어플리케이션은 접근성을 저해하는 요소를 갖고 있으며, 이로 인해 많은 장애인들이 웹에 접근하지 못하고 있습니다. 웹 사이트와 웹 어플리케이션의 접근성이 향상될수록, 장애인들도 보다 쉽게 웹에 접속하고 정보를 생산할 수 있습니다.

인터넷을 이용하는 모든 분들이 최신 사양의 고성능 컴퓨터를 사용하는 것은 아닙니다. 경제적 여건이 어려워 낡은, 저사양 컴퓨터를 이용하시는 분들도 큰 불편없이 정보를 접하고 서비스를 받을 수 있도록 하는 것도 웹 접근성의 문제입니다. 그리고 마우스를 민첩하게 다루기 어려운 어르신들께서도 이용에 불편이 없도록 해드리는 것도 접근성의 문제입니다.

웹 접근성은 장애인이 아닌 일반인에게도 이익을 줍니다. 예를 들어, 웹 접근성의 핵심은 웹 사이트와 어플리케이션이 다양한 사용자의 요구와 기호, 환경에 유연하게 대처할 수 있도록 디자인하는 것입니다.이러한 유연함은 느린 인터넷 회선 속도, 팔이나 손가락이 다친 환자 등 특정 환경에 처한 일반인에게도 이익을 줍니다.

웹표준이 왜 중요한가요?웹은 교육, 고용, 정부, 경제, 건강, 오락 등 삶의 여러 측면에서 더욱 중요한 수단이 되고 있습니다. 이 점이 바로 웹이 장애인에게 동일한 접근과 동일한 기회을 제공해야 하는 본질적인 이유입니다. 접근 가능한 웹은 장애인의 활발한 사회 참여를 가능하게 하기 때문입니다.

웹접근성 준수하기

웹은 교육, 고용, 정부, 경제, 건강, 오락 등 삶의 여러 측면에서 더욱 중요한 수단이 되고 있습니다. 이 점이 바로 웹이 장애인에게 동일한 접근과 동일한 기회을 제공해야 하는 본질적인 이유입니다. 접근 가능한 웹은 장애인의 활발한 사회 참여를 가능하게 하기 때문입니다.CSS 적용사례

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="SiteMap" /><area shape="rect" coords="90,0,137,9" href="mailto:[email protected]"alt="Contact us" title="메일 보내기" /></map>

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.gif" alt="첨부" title="(기조연설 1) Inclusive Innovation - The key to creating accessible solutions.pdf"></a></td><td>관리자</td><td>2008-01-01</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>

<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>

<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>

W3C 의 표준 문법을 준수합니다

XHTML 1.0 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-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 속성에 표기된 약어를 읽게 됩니다.

화면낭독기와 같은 보조공학기기는 현재의 표를 다음과 같이 읽어주어야 합니다.

표 제목 : 자장면과 짬뽕의 가격과 열량 비교표 요약 : 짬뽕은 자장면보다 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>

특수문자는 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>ul, ol, dl 의 자식요소인 li, dt, dd 요소는 들여쓰기 하지 않습니다.<ul><li>...</li><li>...</li></ul>

<ol>

<li>...</li><li>...</li> </ol>

<dl> <dt>...</dt><dd>...</dd> </dl>

CSS 요약정리

fontfont-family : [폰트이름] (폰트를 지정한다)font-style : [normal/italic/oblique] (문자의 형태를 지정한다)font-variant : [normal/small-cap] (소문자를 대문자로 표시)font-weight : [normal/bold/bolder/lighter/100/200/…/900] (문자의 두께를 조절한다)font-size : [사이즈] (글자의 크기를 지정한다)

colorcolor : [컬러값] (요소의 텍스트색을 지정한다)

backgroundbackground-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] (배경이미지의 위치를 지정한다)

textword-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 : [길이] (요소하부의 선두께를 설정한다)border-left-width : [길이] (요소좌측의 선두께를 설정한다)border-color : [색갈값] (선색갈을 설정한다)border-style : [none/dotted/dashed/solid/double/groove/inset/outset] (선 양식을 설정한다)

positionhtml 상에서 x,y,z축으로 각 block 의 위치를 레이어처럼 겹치고 세밀한 위치를 지정할수있다.[absolute][relative]

floatfloat : [left/right/none] (요소의 위치를 기존 자리에서 분리시킨다)

displaydisplay : [block/inline/list-item/none] (브라우져에 디스플레이 되는 방법을 결정한다)

listlist-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;

초보과정

폰트칼라 지정하기

<style>/* base */body {font:12px "나눔고딕",arial;}.plplpl {font:12px "나눔고딕",arial;color:#330000;}#abc {font:12px "나눔고딕",arial; color:#ff0000;}.abc {font:12px "나눔고딕",arial; color:#0099ff;}</style>

<p>웹표준 season 1 강의입니다!!</p><p id=abc>id값이 적용됩니다</p><p class=abc>id값이 적용됩니다</p><p class=abc>id값이 적용됩니다</p><p class=abc>id값이 적용됩니다</p>

---------- 결과 -----------------------------------------------------------------------------------------------------------------------------

이미지 테두리 삭제

<style>img {border:0;}</style>

<a href="#"><img src="http://www.designhome.co.kr/odmfront/img/main/logo.gif" alt="오버추어 디자인마켓 로고입니다."></a>

---------- 결과 -----------------------------------------------------------------------------------------------------------------------------

하이퍼링크

<p><a href="http://www.designhome.co.kr/">하이퍼 링크 입니다</a></p>

---------- 결과 -----------------------------------------------------------------------------------------------------------------------------

셀렉트박스에 폰트칼라 지정하기

<style>select {font:12px "나눔고딕",arial;color:blue;}.plplpl {font:12px "나눔고딕",arial;color:#330000;background:#f1f4c2}</style>

<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>

---------- 결과 -----------------------------------------------------------------------------------------------------------------------------

인풋박스 색상제어하기

<style>input,textarea {font:12px "나눔고딕",arial; border:solid 4px #f1f4c2;}/*이중으로 적용받게 할려면 ,를 넣어줍니다.*/</style>

<p><input /></p><p><textarea name="" rows="10" cols="20"></textarea></p> 

---------- 결과 -----------------------------------------------------------------------------------------------------------------------------

머리말 타이틀 정의하기

<style>h1,h2,h3,h4,h5,h6 {color:#009900;} /*머릿말 폰트의 크기를 정의합니다.*/</style><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%간격으로 늘려줍니다. letter-spacing 은 글씨 자간을 줄여줍니다.*/#line-h a{font-size:20px;color:#060;text-decoration:underline;}/* line-h 에 링크가 있다면 밑줄을 나오게 합니다.*/</style>

<p>바로 이런것이 <span id=abc>전문성</span>입니다.</p><span id=plop>바로 이런것이 전문성 입니다.</span><p id=line-h>부활한 '코리안 특급' 박찬호와 필라델피아의 결별이 기정사실로 알려졌다. 이에 따라 향후 박찬호의 행보에 국내 팬들은 물론 현지 언론도 높은 관심을 보이고 있다. 외신은 15 일(이후 한국시간) "박찬호는 (구단이 제시한) 300 만 달러보다 훨씬 높은 몸값과 선발투수 보직을 바라고 있지만 <a href="">필라델피아는</a> 이 조건들을 받아들이지 않았다."고 보도했다. 사실상 결별이 확정된 것으로 보인다.</p> 

---------- 결과 -----------------------------------------------------------------------------------------------------------------------------

박스에 스타일주기

<style>#box {width:300px; height:50px; border:1px solid #ccc; background:#FFFFCC;font:12px "나눔고딕",Arial; padding:5px 7px; margin:50px 0 0 50px;}/*박스는 div(제일 많이 사용), p(줄바꿈), span(요소들) 전부 적용됩니다.*/</style>

<div id=box>박스에 들어가는 내용입니다</div>

---------- 결과 -----------------------------------------------------------------------------------------------------------------------------

박스에 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;는 박스를 무조건 가운데로 정렬합니다.*/</style>

<div class=box_a>박스에 들어가는 내용입니다</div><div class=box_b>박스에 들어가는 내용입니다 2</div><div class=box_c>박스에 들어가는 내용입니다 3</div>

---------- 결과 -----------------------------------------------------------------------------------------------------------------------------

박스에 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 0 0 50px;width:300px; height:50px; border:1px solid #ccc; background:#999; text-align:center; }/*z-index값으로 포개지는 구분을 줄수 있습니다.*/.box_f {z-index:3; position:absolute; margin:30px 0 0 100px;width:300px; height:50px; border:1px solid #ccc; background:#666; text-align:center; }/**/</style>

<div class=box_d>1 번 입니다.</div><div class=box_e>2 번 입니다.</div><div class=box_f>3 번 입니다.</div> 

---------- 결과 -----------------------------------------------------------------------------------------------------------------------------

테이블 예제_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;}/**/</style><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>

---------- 결과 -----------------------------------------------------------------------------------------------------------------------------

테이블 예제_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 의 텍스트는 무조건 가운데로 정렬됩니다.*/</style><div id="table">

<table id=table_b><tr>

<th>제목</th><th>아이디</th><th>비밀번호</th>

</tr><tr>


</tr><tr>


</tr></table>

</div>

---------- 결과 -----------------------------------------------------------------------------------------------------------------------------

서브메뉴_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("http://wstatic.naver.com/w9/btn_next.gif") no-repeat left;}/*list-style:none 를 선언하면 볼릿 기호가 없어집니다.(모든 브라우져)*/#left_menu li.lol { color:#000;font-weight:bold;letter-spacing:-1px;}/**/</style><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 는 가운데로 붙는 명령어 입니다.*/#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;}/*마우스를 올렸을때 반응입니다.*/</style><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;}/**/#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;}/**/</style><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 {display:block;width:120px;padding:5px;color:#fff; background:#e6e6e6;border-bottom:1px solid #eee;text-decoration: 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;}

</style><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>

---------- 결과 -----------------------------------------------------------------------------------------------------------------------------

가로메뉴_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;}/**/</style><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 555555555555</a></li>

</ul></div>

---------- 결과 -----------------------------------------------------------------------------------------------------------------------------

제 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 이기 때문에 독립적이게 취급된다.

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 elementDouble side element<p>여기처럼 처음과 끝이 쌍으로 있는 형태의 element 를 말합니다</p>Inline level element<img src=”주소표시” /> 처럼 시작과 끝이 없이 하나의 element(구성요소)만 써주는 형태의 element 를 말한다.

제 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 (설명)

제 3 강 div (division:분할, 분배) 와 span elementdivdivision 의 약자로 시작태그 <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 의 구조적 차이

<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 을 사용할 수 있다.

제 4 강 class 속성class 는 웹문서에 스타일 속성을 정의할 때 id 속성과 함께 흔히 잘 쓰인다.일종의 디자인된 옷이라고 생각하면 된다.style 영역에서 클래스 속성을 정의하고 body 에 있는 element 에서 불러서 정의되어 있는 스타일을 적용시키는 것이다.

Class 를 사용하는 방법은 style 영역이나 CSS 파일 내에서

.클래스명{스타일 속성 정의} 이렇게 클래스 스타일 속성을 정의해 놓고 body 에 가서<element 명 class=”클래스명”></element 명>식으로 활용하면 된다

제 5 강 box dimension (content, border, padding, margin)

보통 Block level 의 element 들은 그 영역을 box dimension 이라는 박스형의 영역을 가지게 된다.(혹은 Inline element 라도 display:block 으로 스타일 속성을 지정하면, box형 dimension 을 가지게 된다.)그 영역은 또 여러 영역으로 나누게 되는데 content, border, padding, margin 이다

하나의 박스형 element 가 차지하는 영역은 위 네 영역을 모두 합한 영역이다.

borderborder-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; }

paddingpadding 은 테두리인 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 0 0 50px;}</style>

<div id=box>박스에 들어가는 내용입니다</div>

marginmargin 이라는 스타일 속성은 테두리인 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; }</style>

<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; }</style>

<div class=box>박스에 들어가는 내용입니다</div><div class=box>박스에 들어가는 내용입니다</div>

floatblock 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;는 박스를 무조건 가운데로 정렬합니다.*/</style>

<div class=box_a>박스에 들어가는 내용입니다</div><div class=box_b>박스에 들어가는 내용입니다 2</div><div class=box_c>박스에 들어가는 내용입니다 3</div>

---------------------------------------------------------------------------------------------------------------------------

Float 전 float후

<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; }</style>

<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; }</style>

<div class="float_box_wrap"><div class="box01">float:left;</div><div class="box02">float:right;</div>

</div>

position:absoluteposition 의 속성으로는 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;}</style>

<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:relativeposition 의 속성으로는 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;}</style>

<div class="position_box_wrap"><div class="relative"><span>relative</span></div><div class="absolute">absolute</div>

</div>

display:inline, display:block, display:nonedisplay 스타일 속성은 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; }</style>

<p >검색엔진 사이트 <span class="display">네이버로 연결됩니다.</span></p><div>첫번째 블럭</div><div>두번째 블럭</div>

overflowoverflow 는 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; }</style>

<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; height:100px;overflow:hidden; }</style>

<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; width:200px; height:100px;overflow:scroll; scrollbar-face-color:#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; }</style>

<h1> 리버풀행 황당, 최소 1년은 잔류</h1><div><p> 국내 한 언론이 이청용(22·볼턴)이 잉글랜드 프리미어리그 리버풀로 이적할 가능성을 보도하자 이청용측은 황당하다는 반응을 보이고 있다.이청용의 에이전트인 김승태 TI 스포츠 대표는 26 일 “한마디로 황당하다. 그동안 리버풀과 (이적에 관련된)어떤 논의도 없었다”며 “볼턴이 챔피언십(2 부리그)으로 강등하지 않는 한 다음 시즌은 무조건 볼턴에서 1년을 더 뛴다”고 강조했다. </p></div>

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; }</style>

<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; width:250px;height:100px;background: #c9c9c9; }#footer { clear:both;height:30px;background: #b0b0b0; }</style>

<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; }.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;}</style>

<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; 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; }</style>

<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; height:100px; background:#888;position:absolute; top:50%; left:50%;margin:-50px 0 0 -50px;text-align:center;line-height:94px; }</style>

<div id="login_area">로그인 입니다.</div>

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;font-weight:bold;text-decoration:underline;padding:10px; }.boxR p { color:#666; padding:0 10px 10px 10px;}.boxR span { color:#999;font-family: "나눔고딕" ; font-size: 10px; }</style>

<div class="boxR"><h1>이승훈 '기적 같은' 금메달</h1><p>이승훈 선수가 동계올림픽 마라톤으로 불리는 스피드스케이팅 1 만 m 에서 금메달을 목에 걸었습니다.

첫 은메달을 선사했던 이승훈 선수는 두 번째 선물로 금메달을 안겨줬습니다.<br /><span>2010.02.14.12:00</span></p>

</div>

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;font-weight:bold;text-decoration:underline;padding:10px; }.boxR1 dd { color:#666; padding: 0 10px 10px 10px;}

.boxR1 span { color:#999; font-family: "나눔고딕" ; font-size: 10px;}</style>

<dl class="boxR1"><dt>이승훈 '기적 같은' 금메달</dt><dd>이승훈 선수가 동계올림픽 마라톤으로 불리는 스피드스케이팅 1 만 m 에서 금메달을 목에 걸었습니다.

첫 은메달을 선사했던 이승훈 선수는 두 번째 선물로 금메달을 안겨줬습니다.<br /><span>2010.02.14.12:00</span></dd>

</dl>

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;}</style>

<dl class="boxR2"><dt>보건복지부</dt><dd>이승훈 선수는 두 번째 선물로 금메달을 안겨줬습니다.</dd>

</dl>

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; }</style>

<ul class="list1"><li><span class="subject">게시물 1 번 입니다.</span><span

class="data">2010.02.14</span></li><li><span class="subject ">게시물 2 번 입니다.</span><span

class="data">2010.02.14</span></li><li><span class="subject ">게시물 3 번 입니다.</span><span

class="data">2010.02.14</span></li><li><span class="subject">게시물 4 번 입니다.</span><span

class="data">2010.02.14</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 {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; }</style>

<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><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; }.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;}</style>

<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, 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(http://image.hanmail.net/hanmail/s_img/keron/i_more.gif) no-repeat;width:25px;height:8px;display:block;text-indent:-100em;overflow:hidden;padding:0;font-size:1px;line-height:0%;text-decoration: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 0 0 10px;letter-spacing:-1px;}.dotListArea ul {background-color:#fff;margin:0 5px;padding:7px 0;}.dotListArea li {background:url(http://image.hanmail.net/hanmail/s_img/keron/blt_crs.gif) 7px 7px no-repeat;padding:3px 0 3px 14px;}

.dotListArea li a {color:#333;}</style>

<div class="dotListArea"><h3><a href="#" title="리스트 제목">리스트 제목</a></h3>

<ul><li><a href="#">쿤타 앤 뉴올리언스 - 비처럼 ..</a></li><li><a href="#">상욱선수(엠게임)</a></li><li><a href="#">김정훈 - 2006.07.30 - 궁을 위..</a></li><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>

</div>

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(http://image.hanmail.net/hanmail/s_img/keron/i_more.gif) no-repeat;width:25px;height:8px;display:block;text-indent:-100em;overflow:hidden;padding:0;font-size:1px;line-height:0%;text-decoration:none;}

/* ordered List */.num1 {background:url(http://image.hanmail.net/hanmail/s_img/keron/n_01.gif) no-repeat;}.num2 {background:url(http://image.hanmail.net/hanmail/s_img/keron/n_02.gif) no-repeat;}.num3 {background:url(http://image.hanmail.net/hanmail/s_img/keron/n_03.gif) no-repeat;}.num4 {background:url(http://image.hanmail.net/hanmail/s_img/keron/n_04.gif) no-repeat;}.num5 {background:url(http://image.hanmail.net/hanmail/s_img/keron/n_05.gif) no-repeat;}.num6 {background:url(http://image.hanmail.net/hanmail/s_img/keron/n_06.gif) no-repeat;}.num7 {background:url(http://image.hanmail.net/hanmail/s_img/keron/n_07.gif) no-repeat;}.num8 {background:url(http://image.hanmail.net/hanmail/s_img/keron/n_08.gif) no-repeat;}.num9 {background:url(http://image.hanmail.net/hanmail/s_img/keron/n_09.gif) no-repeat;}.num10 {background:url(http://image.hanmail.net/hanmail/s_img/keron/n_10.gif) no-repeat;}.num11 {background:url(http://image.hanmail.net/hanmail/s_img/keron/n_11.gif) no-repeat;}.num12 {background:url(http://image.hanmail.net/hanmail/s_img/keron/n_12.gif) no-repeat;}.num13 {background:url(http://image.hanmail.net/hanmail/s_img/keron/n_13.gif) no-repeat;}.num14 {background:url(http://image.hanmail.net/hanmail/s_img/keron/n_14.gif) no-repeat;}.num15 {background:url(http://image.hanmail.net/hanmail/s_img/keron/n_15.gif) 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 0 0 10px;font-size:13px;color:#000;letter-spacing:-1px;}.rankListArea_basic ol {background-color:#fff;margin:0 5px 5px 5px; padding:7px 0 5px 0;}.rankListArea_basic ol li {padding:3px 0 3px 24px;background-position:7px 5px;}.rankListArea_basic ol li a {color:#333;}

</style>

<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>

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(http://image.hanmail.net/hanmail/s_img/keron/i_more.gif) no-repeat;width:25px;height:8px;display:block;text-indent:-100em;overflow:hidden;padding:0;font-size:1px;line-height:0%;text-decoration:none;}

/* ordered List */.num1 {background:url(http://image.hanmail.net/hanmail/s_img/keron/n_01.gif) no-repeat;}.num2 {background:url(http://image.hanmail.net/hanmail/s_img/keron/n_02.gif) no-repeat;}.num3 {background:url(http://image.hanmail.net/hanmail/s_img/keron/n_03.gif) no-repeat;}.num4 {background:url(http://image.hanmail.net/hanmail/s_img/keron/n_04.gif) no-repeat;}.num5 {background:url(http://image.hanmail.net/hanmail/s_img/keron/n_05.gif) no-repeat;}.num6 {background:url(http://image.hanmail.net/hanmail/s_img/keron/n_06.gif) no-repeat;}.num7 {background:url(http://image.hanmail.net/hanmail/s_img/keron/n_07.gif) no-repeat;}.num8 {background:url(http://image.hanmail.net/hanmail/s_img/keron/n_08.gif) no-repeat;}.num9 {background:url(http://image.hanmail.net/hanmail/s_img/keron/n_09.gif) no-repeat;}.num10 {background:url(http://image.hanmail.net/hanmail/s_img/keron/n_10.gif) no-repeat;}.num11 {background:url(http://image.hanmail.net/hanmail/s_img/keron/n_11.gif) no-repeat;}

.num12 {background:url(http://image.hanmail.net/hanmail/s_img/keron/n_12.gif) no-repeat;}




.up {background:url(http://image.hanmail.net/hanmail/s_img/keron/i_up.gif) no-repeat;}

.down {background:url(http://image.hanmail.net/hanmail/s_img/keron/i_down.gif) no-repeat;}

.up {color:#ff5f00;}

.down {color:#777;}

.keep font,.keep {color:#fff;}

.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(http://image.hanmail.net/hanmail/s_img/keron/i_best.gif) -1px top no-repeat;font-size:11px;color:#ff5f00;}.rankListArea_diff em {display:none;}

</style>

<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>


<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>


<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 {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(http://image.hanmail.net/hanmail/s_img/keron/i_more.gif) no-repeat;width:25px;height:8px;display:block;text-indent:-100em;overflow:hidden;padding:0;font-size:1px;line-height:0%;text-decoration: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;font-size: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;padding-bottom:10px}.movieListArea dl.none{border:none;padding:0}.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(http://image.hanmail.net/hanmail/s_img/keron/line.gif) 6px 4px no-repeat;padding-left:11px;}.movieListArea dd a {font-size:11px;}.clb {clear:both;}

</style> </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="http://cfs.flvs.daum.net/files/34/23/55/56/1752910/thumb.jpg.mini" 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="http://cfs.flvs.daum.net/files/41/86/8/51/1750742/thumb.jpg.mini" 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="http://cfs.flvs.daum.net/files/53/11/34/79/1750667/thumb.jpg.mini" 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="http://cfs.flvs.daum.net/files/70/16/30/95/1728847/thumb.jpg.mini" 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><dl class="none"><dd><a href="#" ><img

src="http://cfs.flvs.daum.net/files/37/80/98/62/1728814/thumb.jpg.mini" width="65" height="50" alt="양배추즙이 위장에 좋나요?"/></a></dd>

<dt><a href="#" >양배추즙이 위장에 좋나요..</a></dt><dd class="time">03:55</dd><dd class="nick"><a href="#">동영상으..</a></dd></dl>

<br class="clb" /></div><a href="#" title="동영상 List 더보기" class="more">동영상 List 더보기</a>

</div></div>

용어사전

CSS Cascading Style Sheet 여러 단계로 구성된 폭포XHTML인터넷 표준기관인 W3C(www.w3c.org)는 XHTML 1.0 이란 새로운 표준을 내놓았습니다. 이는 웹페이지를 만드는 데 가장 많이 쓰이는 언어인 HTML 이 차세대 언어 XML 로 가기 위한 다리가 된다는 점에서 커다란 의미를 지닙니다.

XML 은 HTML 에 비해 여러가지 강점이 있습니다. 특히 XML 이 웹페이지에 담긴 내용인 `콘텐츠 정보'와 단말기 화면에 나타날 모양을 결정하는 `스타일 정보'를 분리시킬 수 있다는 점은 차세대 인터넷을 위한 결정적인 요소입니다. 핸드폰에 붙은 액정화면에서 텔레비전 화면에 이르기까지 다양한 단말장치에 비디오, 수학공식, 움직이는 2차원 글씨 등 변화무쌍한 내용을 자유롭게 보여줄 수 있기 때문입니다.

그러나 XML 이 아무리 강력하다 할지라도 현재 HTML 로 씌어있는 10억개가 넘는 웹페이지들을 하루아침에 모두 XML로 바꿀 수는 없습니다. HTML 과 XML 사이에는 적잖은 차이가 있기 때문입니다. 그렇다고 이미 축적된 방대한 HTML 문서들을 버릴 수 없다는 이유만으로 XML 로 가는 길에서 발목을 잡힐 수도 없습니다. 그래서 나오게 된 것이 XHTML입니다.

display 표시overflow 넘침float 흐름position 위치z-index 정렬width & height 크기margin & padding 간격border 보더font 폰트

background 배경list 순서import 도입absolute 절대적인div division 경계선ol Orderd List 순서가 있는 리스트ul UnOrderd List 순서가 없는 리스트li 리스트dl Definition List 설명형 리스트dt Definition titledd

Documents

qqqqqq.tistory.comqqqqqq.tistory.com/.../[email protected] · Web view링크가 적용된 이미지의 테두리를 없애기 위해서 onfocus=”this.blue()”를