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

Size: px
Start display at page:

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

Transcription

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>

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 주석가이드 <!-- GNB --> (O) <!-- GNB --> GNB 코드가시작됨을선언 <div class="gnb">...</div> <!-- //GNB --> 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> <!-- // 머릿말타이틀정의하기 --> 결과

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 적용하기 <!-- 박스에 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> <!-- // 박스에 float 적용하기 --> 결과

23 박스에 position 적용하기 <!-- 박스에 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> <!-- // 박스에 position 적용하기 --> 결과

24 테이블예제 _01 <!-- 테이블예제 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> <!-- // 테이블예제 01 --> 결과

25 테이블예제 _02 <!-- 테이블예제 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> <!-- // 테이블예제 02 --> 결과

26 서브메뉴 _01 <!-- 서브메뉴 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> <!-- // 서브메뉴 01 --> 결과

27 서브메뉴 _02 <!-- 서브메뉴 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> <!-- // 서브메뉴 02 --> 결과

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> <!-- // 서브메뉴 03 --> 결과

29 서브메뉴 _04 <!-- 서브메뉴 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> <!-- // 서브메뉴 04 --> 결과

30 가로메뉴 _01 <!-- 가로메뉴 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> <!-- // 가로메뉴 01 --> 결과

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

66

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"> <!-- list Start --> <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

More information

쉽게 풀어쓴 C 프로그래밍

쉽게 풀어쓴 C 프로그래밍 CHAPTER 7. HTML 와 CSS 로웹사이트만들 기 웹사이트작성 웹사이트구축과정 내비게이션구조도 홈페이지레이아웃 헤더 web Shop 내비게이션메뉴

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 ONE page html 이란? 원페이지는최근의홈페이지제작트렌드로한페이지에상단에서하단으로의마우스스크롤링을통해서컨텐츠를보여주는스타일의홈페이지입니다. USER 의시선을분산시키지않고위쪽에서아래쪽으로마우스스크롤링을통해서홈페이지의컨텐츠를보여주게됩니다. 반응형으로제작되어스마트폰, 아이패드, 태블릿,PC, 노트북등다양한디바이스에서자동으로최적화됩니다. ONE page 웹사이트사례

More information

Front-Side 웹개발의이해 (CSS Basic) 1. CSS 란?

Front-Side 웹개발의이해 (CSS Basic) 1. CSS 란? CSS Basic 과정소개 과정목표 : CSS 의기본개념이해 1. CSS 란? 2. CSS 선택자 3. CSS 속성 1 Front-Side 웹개발의이해 (CSS Basic) 1. CSS 란? 1. CSS 란? - 스타일선언이위에서아래로순차적으로적용이되고, 마지막에선언된스타일이우선순위갖음 - 마크업언어 (HTML/XHTML) 가실제화면에표시되는방법을기술하는언어

More information

Overall Process

Overall Process CSS ( ) Overall Process Overall Process (Contents : Story Board or Design Source) (Structure : extensible HyperText Markup Language) (Style : Cascade Style Sheet) (Script : Document Object Model) (Contents

More information

쉽게 풀어쓴 C 프로그래밍

쉽게 풀어쓴 C 프로그래밍 CHAPTER 6. CSS 레이아웃과애니메이션 레이아웃이란? 웹페이지에서 HTML 요소의위치, 크기등을결정하는것 집안에서의가구배치와비슷하다. 블록요소와인라인요소 블록 (block) 요소 - 화면의한줄을전부차지한다. 인라인 (inline) 요소 - 한줄에차례대로배치된다. 현재줄에서필요한만큼의너비만을차지한다. 블록요소 한줄을전부차지 , , ,

More information

SK Telecom Platform NATE

SK Telecom Platform NATE SK Telecom Platform NATE SK TELECOM NATE Browser VER 2.6 This Document is copyrighted by SK Telecom and may not be reproduced without permission SK Building, SeRinDong-99, JoongRoGu, 110-110, Seoul, Korea

More information

Lab1

Lab1 Lab 1: HTML CSS 2015 Fall human-computer interaction + design lab. Joonhwan Lee HTML Web Server (World Wide Web: WWW)? (., FTP ). web 3 웹 구조의 이해 웹페이지 웹페이지는 HTML 이라는 언어로 만들어진 일종의 프로그램 웹페이지는 텍스트, 이미지, 동영상,

More information

PowerPoint Presentation

PowerPoint Presentation 웹과인터넷활용및실습 (Web & Internet) Suan Lee - 웹과인터넷활용및실습 (Web & Internet) - 04. CSS3 스타일속성기본 1 04. CSS3 스타일속성 04. CSS3 Style Properties - 웹과인터넷활용및실습 (Web & Internet) - 04. CSS3 스타일속성기본 2 CSS3 단위 1 CSS 는각각의스타일속성에다양한값을입력

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 HTML5 웹프로그래밍입문 5 장. 고급표현을위한 CSS3 활용 1 목차 5.1 박스모델설정하기 5.2 레이아웃설정하기 5.3 다양한효과설정하기 5.4 움직임설정하기 2 5.1 박스모델설정하기 5.1.1 영역설정을위한박스모델 5.1.2 박스모델유형의지정 3 영역설정을위한박스모델 배경영역 , , : 해당하는줄만큼배경 ,

More information

Week8-Extra

Week8-Extra Week 08 Extra HTML & CSS Joonhwan Lee human-computer interaction + design lab. HTML CSS HTML, HTML 5 1. HTML HTML HTML HTML (elements) (attributes), (arguments). HTML (tag), DTD (Document Type Definition).!4

More information

Javascript

Javascript 1. HTML 이란? HTML 은 Hyper Text Mark Up Language 의약자로예약되어있는각종태그라는명령어를이용하여웹페이지를작성할때사용하는언어입니다. 2. HTML 의기본구조 < 태그 > 내용 < 태그속성 = 변수 > 내용

More information

e-비즈니스 전략 수립

e-비즈니스 전략 수립 CSS3 속성 HTML5 웹프로그래밍입문 ( 개정판 ) Contents 학습목표 CSS3가지원하는스타일속성과스타일값을활용할수있습니다. CSS3를사용해레이아웃을잡을수있습니다. 내용 CSS3 단위 박스속성 display 속성 배경속성 글자속성 위치속성 float 속성 그림자속성 그레이디언트 2/85 1. CSS3 단위 키워드단위 W3C에서미리정의한단어 키워드를입력하면키워드에해당하는스타일이자동으로적용

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 Html 은웹에서 text, images, movie 등다양한정보의요소를 담을수있는문서형식이다. 정보 (txt, imges) 전송 = 동일한어플리케이션 = 정보 (txt, imges) 정보 (txt, imges Movie, 동작 ) 정보 (txt, imges movie) 어플리케이션 웹브라우저 HTML5 는기존 HTML 에차별화된특징을가진 최신버전의웹표준언어.

More information

쉽게 풀어쓴 C 프로그래밍

쉽게 풀어쓴 C 프로그래밍 CHAPTER 5. CSS 박스모델과응용 박스모델 HTML 요소들을박스 ( 사각형 ) 형태로그리는것 박스는배치, 색상, 경계등의속성을가진다. 박스모델의속성 배경색과배경이미지 HTML 요소에배경색과배경이미지가설정되어있는경우에, 패딩은투명하므로배경이미지와배경색이보이게된다 ( 그림출처 : Jon Hicks) 경계선스타일

More information

INDEX 들어가기 고민하기 HTML(TABLE/FORM) CSS JS

INDEX 들어가기 고민하기 HTML(TABLE/FORM) CSS JS 개발자에게넘겨주기편한 TABLE&FORM 마크업 김남용 INDEX 들어가기 고민하기 HTML(TABLE/FORM) CSS JS 들어가기 이제는 ~ 서로간의이슈웹표준 & 웹접근성왜웹표준으로해야할까요? 모든웹페이지는 ~ 퍼블리싱순서 이제는 ~ 디자이너 디자이너 퍼블리셔 Front-end (UI 개발자 ) 퍼블리셔 Front-end (UI 개발자 ) 서버개발자 서버개발자

More information

예스폼 프리미엄 템플릿

예스폼 프리미엄 템플릿 HTML 과 CSS 를활용한개별디자인 D4 강사김준일 01. HTML, CSS 그리고메이크샵 1 2 쇼핑몰의구조와기능 이미지, 문구등내용을 담당하는언어 쇼핑몰 쇼핑몰이어떻게보여질지 표현 ( 디자인 ) 을담당하는언어 3 4 쇼핑몰의 UI 및배너등을 표현하며유효성검사등을 담당하는개발언어 쇼핑몰의핵심기능을담당하는 쇼핑몰프로그램으로 HTML,CSS,Javascript

More information

WEB HTML CSS Overview

WEB HTML CSS Overview WEB HTML CSS Overview 2017 spring seminar bloo 오늘의수업은 실습 오늘의수업은 이상 : 12:40 목표 : 1:00 밤샘 SPARCS 실습 오늘의수업은 근데숙제는많음 화이팅 WEB 2017 spring seminar bloo WEB WEB 의원시적형태 WEB 의원시적형태 질문 못받음 ㅈㅅ HTML 2017 spring seminar

More information

02 장. 글꼴문단지정하기 이번장에서는스타일시트속성중에서글꼴과관련한속성과문단에관련된속성을살펴보도록하자.

02 장. 글꼴문단지정하기 이번장에서는스타일시트속성중에서글꼴과관련한속성과문단에관련된속성을살펴보도록하자. 02 장. 글꼴문단지정하기 이번장에서는스타일시트속성중에서글꼴과관련한속성과문단에관련된속성을살펴보도록하자. 이장에서다룰내용 1 2 3 4 5 글꼴꾸밈관련스타일시트텍스트관련스타일시트배경관련스타일시트목록관련스타일시트하이퍼링크관련스타일시트 2 01. 글꼴꾸밈관련스타일시트 v 글자에관련된스타일시트는크기, 스타일, 모양등에관련된 font 속성이가장많이사용 속성값설명 color

More information

PowerPoint Presentation

PowerPoint Presentation WordPress 를이용한웹사이트만들기 2015 년 한지웅 WordPress 를이용한웹사이트만들기 Day 1 Day 2 Day 3 Day 4 Day 5 1. 웹사이트제작기초 HTLM 기본 CSS 기본 WordPress 개론 ( 웹사이트구축툴 ) 2. 웹호스팅 / 웹사이트구축 웹호스팅업체선택 cpanel 설정 WordPress 설치 3. WordPress 기초활용

More information

제이쿼리 (JQuery) 정의 자바스크립트함수를쉽게사용하기위해만든자바스크립트라이브러리. 웹페이지를즉석에서변경하는기능에특화된자바스크립트라이브러리. 사용법 $( 제이쿼리객체 ) 혹은 $( 엘리먼트 ) 참고 ) $() 이기호를제이쿼리래퍼라고한다. 즉, 제이쿼리를호출하는기호

제이쿼리 (JQuery) 정의 자바스크립트함수를쉽게사용하기위해만든자바스크립트라이브러리. 웹페이지를즉석에서변경하는기능에특화된자바스크립트라이브러리. 사용법 $( 제이쿼리객체 ) 혹은 $( 엘리먼트 ) 참고 ) $() 이기호를제이쿼리래퍼라고한다. 즉, 제이쿼리를호출하는기호 제이쿼리 () 정의 자바스크립트함수를쉽게사용하기위해만든자바스크립트라이브러리. 웹페이지를즉석에서변경하는기능에특화된자바스크립트라이브러리. 사용법 $( 제이쿼리객체 ) 혹은 $( 엘리먼트 ) 참고 ) $() 이기호를제이쿼리래퍼라고한다. 즉, 제이쿼리를호출하는기호 CSS와마찬가지로, 문서에존재하는여러엘리먼트를접근할수있다. 엘리먼트접근방법 $( 엘리먼트 ) : 일반적인접근방법

More information

C스토어 사용자 매뉴얼

C스토어 사용자 매뉴얼 쪽지 APP 디자인적용가이드 I. 쪽지 APP 소개 2 I. 쪽지 APP 소개 쪽지 APP 을통해쇼핑몰의특정회원또는특정등급의회원그룹에게 알림메시지나마케팅을위한쪽지를발송하실수있습니다. 쪽지 APP의주요기능 1. 전체회원, 특정ID, 특정회원그룹별로쪽지발송가능 2. 발송예약기능 3. 발송한쪽지에대해수신및열람내역조회가능 4. 쇼핑몰페이지에서쪽지함과쪽지알림창제공 3

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 HTML5 웹프로그래밍입문 2 장.HTML5 문서의기본 목차 2.1 기본문서만들기 2.2 단락과텍스트꾸미기 2.3 목록및표작성하기 2.4 문서구조화하기 소스코드실행사이트 주소 : http://webclass.me/html5_2e 폴더 ch02/ ~ ch13/ 에각장의예제가있어서실행결과확인및소스보기가가능합니다. 2 HTML5 문서의기본 2.1 기본문서만들기 2.1.1

More information

Ext JS À¥¾ÖÇø®ÄÉÀ̼ǰ³¹ß-³¹Àå.PDF

Ext JS À¥¾ÖÇø®ÄÉÀ̼ǰ³¹ß-³¹Àå.PDF CHAPTER 2 (interaction) Ext JS., HTML, onready, MessageBox get.. Ext JS HTML CSS Ext JS.1. Ext JS. Ext.Msg: : Ext Ext.get: DOM 22 CHAPTER 2 (config). Ext JS.... var test = new TestFunction( 'three', 'fixed',

More information

<3036B0AD D4C5F584D4C5FC0CEC5CDB3DDBAB8C3E6C7D0BDC0C0DAB7E12E687770>

<3036B0AD D4C5F584D4C5FC0CEC5CDB3DDBAB8C3E6C7D0BDC0C0DAB7E12E687770> HTML/XML 인터넷보충학습자료 - 1 - (1) 글자색상 : color 속성사용 - 태그의 color 속성과같은역할을한다. (2) 배경지정 : background-color 속성사용. - HTML의 bgcolor 속성과같은역할. bgcolor 속성은일정한태그에만한정되어있지만 background-color 속성은어떤태그에서도모두적용된다.

More information

Microsoft PowerPoint - web-part01-ch10-문서객체모델.pptx

Microsoft PowerPoint - web-part01-ch10-문서객체모델.pptx 과목명 : 웹프로그래밍응용교재 : 모던웹을위한 JavaScript Jquery 입문, 한빛미디어 Part1. JavaScript / Ch10. 문서객체모델 2014년 1학기 Professor Seung-Hoon Choi 10 문서객체모델 문서객체모델 (Document Object Model, DOM) 웹브라우저가 HTML 페이지를인식하는방식 document

More information

Microsoft PowerPoint - aj-lecture1-HTML-CSS-JS.ppt [호환 모드]

Microsoft PowerPoint - aj-lecture1-HTML-CSS-JS.ppt [호환 모드] Web Technology Stack HTML, CSS, JS Basics HTML Tutorial https://www.w3schools.com/html/default.asp CSS Tutorial https://www.w3schools.com/css/default.asp JS Tutorial 524730-1 2019 년봄학기 3/11/2019 박경신 https://www.w3schools.com/html/default.asp

More information

PowerPoint Template

PowerPoint Template JavaScript 회원정보 입력양식만들기 HTML & JavaScript Contents 1. Form 객체 2. 일반적인입력양식 3. 선택입력양식 4. 회원정보입력양식만들기 2 Form 객체 Form 객체 입력양식의틀이되는 태그에접근할수있도록지원 Document 객체의하위에위치 속성들은모두 태그의속성들의정보에관련된것

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 How to produce table XHTML 임정희 M2community 1 Table of Contents 1. XHTML - XHTML 과 HTML 2. Table XHTML - Table의이해 - Table 링크연결 - Table 작성 2 15 th KCSE Editor s Workshop, Seoul 2015 XHTML XHTML 기존에사용되던 HTML

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 05 장 CSS3 선택자 1. 선택자개요 2. 기본선택자 3. 속성선택자 4. 후손선택자와자손선택자 5. 반응 / 상태 / 구조선택자 CSS 블록을생성할수있다. 선택자를이해하고적절한선택자를활용할수있다. 1 선택자개요 CSS3 선택자 특정한 HTML 태그를선택할때사용하는기능 선택한태그에원하는스타일이나스크립트적용가능 그림 5-1 CSS 블록 CSS 블록 style

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 : 준비학습 2: 학습내용 11장. 12장. 이미지, 목록, 하이퍼링크스타일 13장. 테두리, 폼양식관련스타일과레이어 14장. 필터효과와 활용하기 : 11 장. 학습내용 개요와삽입법 선택자 글꼴 / 문단관련스타일 개요 Cascading Style Sheets 의약자 계단형스타일시트 라고한다. 의표준화작업과신기술및팁을제공하는 W3C 에서 1996 년 레벨 1

More information

미쓰리 파워포인트

미쓰리 파워포인트 computer & internet 07. FRAME TAG FRAME? 프레임이란? : 웹페이지를수직이나수평으로여러개영역으로나누어다른웹문서가들어갈수있도록구성할수있음. 이때나누어진각각의창을프레임이라고함. 2 FRAME 문서의구조 HTML 문서에서 태그기능을 프레임문서구조에서는 이대신함 일반웹페이지구조 ..

More information

PHP & ASP

PHP & ASP 단어장프로젝트 프로젝트2 단어장 select * from address where address like '% 경기도 %' td,li,input{font-size:9pt}

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 기본과활용 목차 1. HTML와 CSS 시작 2. HTML 기본문서작성 3. 텍스트, 목록, 하이퍼링크 4. 박스, 표 5. 이미지와멀티미디어 6. 입력폼양식 웹개발환경 웹브라우저종류 익스플로러, 크롬, 파이어폭스, 사파리, 오페라 웹개발편집기 메모장 (Notepad) 노트패드 ++(Notepad++) 아크로에디트 (AcroEdit) 드림위버 (Dreamweaver)

More information

html5_04.indd

html5_04.indd 4 장쇼핑몰사이트제작 에서는 HTML5와 CSS3를이용하여쇼핑몰사이트를제작해보겠습니다. 2장과 3장에서는 @font-face의활용을높이기위해영문으로사이트를제작했습니다. 하지만 에서는한글로된사이트를제작할예정입니다. 영문폰트를무료로제공하는사이트는많이존재하지만, 한글폰트는대부분상용입니다. 따라서함부로폰트를웹용으로변환하여사용하는것은저작권에위배될수도있습니다. 다행히요즘에는네이버같은포털사이트에서무료로폰트를배포하고있으며,

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 명품웹프로그래밍 1 2 강의목표 1. CSS3로 HTML 태그가출력되는위치를조절할수있다. 2. CSS3로리스트를예쁘게꾸밀수있다. 3. CSS3로표를예쁘게꾸밀수있다. 4. CSS3로폼을꾸미고사용자의입력에반응하게할수있다. 5. CSS3로애니메이션, 전환 (transition), 변환 (transform) 효과를만들수있다. 배치 3 배치 CSS3 로 HTML 태그가출력되는위치지정

More information

슬라이드 1

슬라이드 1 웹프로그래밍 HTML, 자바스크립트, ASP 를중심으로 제 3 장고급 HTML 작성 목차 제 3 장고급 HTML 작성 2.1 기본태그 2.2 LINK 태그 2.3 Image 2.4 TABLE 2.5 FRAME 2.6 INPUT 양식 2 3 장고급 HTML 작성 멀티미디어파일다루기 스타일시트 레이어 3 3.1 멀티미디어 최근인터넷사용자가급증하면서기업 / 개인용홈페이지가급증하였고다양한홈페이지를만들기위해많은기술들이생겨나고있음

More information

1 CSS 개요 1.1 DHTML(CSS) 란? Dynamic Hyper Text Markup Language 의약자이다. 홈페이지를좀더다이나믹하게만들고자고안해낸방법중하나이다. Nevigator 의 DHTML 은 JSS 라불리고 Explorer 의 DHTML 은 CSS

1 CSS 개요 1.1 DHTML(CSS) 란? Dynamic Hyper Text Markup Language 의약자이다. 홈페이지를좀더다이나믹하게만들고자고안해낸방법중하나이다. Nevigator 의 DHTML 은 JSS 라불리고 Explorer 의 DHTML 은 CSS jtc 와함께하는수월한 DHTML(CSS) http://www.jobtc.kr 훈련교사박원기 1 CSS 개요 1.1 DHTML(CSS) 란? Dynamic Hyper Text Markup Language 의약자이다. 홈페이지를좀더다이나믹하게만들고자고안해낸방법중하나이다. Nevigator 의 DHTML 은 JSS 라불리고 Explorer 의 DHTML 은 CSS

More information

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

웹디자이너를 위한 쎄지오4 웹디자이너를위한쎄지오 4.x CMS 템플릿제작가이드라인 본문서는쎄지오 4.0 기반의 CMS 템플릿제작방법에대한안내서이다. 쎄지오 CMS 로운영될홈페이지의레이아웃코딩기법부터표준화에맞춘 css 클래스네임설명, 플래시쇼의주요기능과규격화사이즈등템플릿시안하나를만들기위한전체실무적인요소들을알기쉽게설명하여웹디자이너라면누구나템플릿제작을쉽게따라할수있도록구성되어있다. 안내서는웹표준및웹접근성을준수할수있도록하였다.

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 HTML5 웹프로그래밍입문 4 장. CSS3 스타일시트기초 1 목차 4.1 CSS3 시작하기 4.2 CSS 기본사용법 4.3 문자와색상지정하기 4.4 목록과표장식하기 2 4.1 CSS3 시작하기 4.1.1 스타일시트와 CSS3 기본개념 4.1.2 CSS 속성선언 4.1.3 문서일부분에 CSS 속성설정 3 스타일시트와 CSS3 기본개념 스타일시트란? 웹문서의출력될외형스타일

More information

NHN 코딩 컨벤션

NHN 코딩 컨벤션 NHN Coding Convention for Markup Languages (HTML/CSS) NTS UIT 개발실 일반 저작권 Copyright 2006~2012 NHN Corp. All Rights Reserved. 이문서는 NHN 의지적재산이므로어떠한경우에도 NHN 의공식적인허가없이이문서의일부또는전체를복제, 전송, 배포하거나변경하여사용할수없습니다. 이문서는정보제공의목적으로만제공됩니다.

More information

하둡을이용한파일분산시스템 보안관리체제구현

하둡을이용한파일분산시스템 보안관리체제구현 하둡을이용한파일분산시스템 보안관리체제구현 목 차 - 1 - - 2 - - 3 - - 4 - - 5 - - 6 - - 7 - - 8 - 1. 사용자가웹서버에로그인하여다양한서비스 ( 파일업 / 다운로드, 폴더생성 / 삭제 ) 를활용 2. 웹서버와연동된하둡서버에서업 / 다운로드된파일을분산저장. ( 자료송수신은 SSH 활용 ) - 9 - - 10 - - 11 -

More information

슬라이드 1

슬라이드 1 Index 1. 광고상품요약 2. 공통가이드 3. 상품별제작시주의사항 4. 플래시배너액션가이드 5. DM제작가이드 6. 모바일광고제작가이드 7. Contact Us 1. 광고상품요약 상품명사이즈용량 CPM( 원 ) A.CTR 특이사항태그가능여부 CF 480*270 15 초이내 10,000 CTR 1.6% 동영상 wmv 파일 X I-Cover 1000*630

More information

쉽게 풀어쓴 C 프로그래밍

쉽게 풀어쓴 C 프로그래밍 CHAPTER 4. CSS 스타일시트기초 CSS 의개념 문서의구조 -> HTML 문서의스타일 ->? CSS 의역할 만약 CSS 가없다면 CSS CSS(Cascading Style Sheets): 문서의스타일을지정한다. CSS 의장점 거대하고복잡한사이트를관리할때에필요 모든페이지들이동일한 CSS 를공유 CSS 에서어떤요소의스타일을변경하면관련되는전체페이지의내용이한꺼번에변경

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 03 장 HTML5 기본태그 1. 글자태그 2. 목록태그 3. 테이블태그 4. 이미지태그 5. 공간분할태그 HTML5 에서지원하는기본태그를사용할수있다. 공간분할태그와시맨틱태그의용도를이해하고사용할수있다. 1. 글자태그 가장많은비중을차지하는태그 그림 3-1 글자태그중심의웹페이지 1.1 제목글자태그 제목글자태그 문서의제목을표현할때사용 h : Heading을의미 표

More information

C H A P T E R 2

C H A P T E R 2 C H A P T E R 2 Foundations of Ajax Chapter 2 1 32 var xmlhttp; function createxmlhttprequest() { if(window.activexobject) { xmlhttp = new ActiveXObject( Micr else if(window.xmlhttprequest) { xmlhttp =

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 휴대폰인증서비스 사용자매뉴얼 목차 1. 서비스소개및신청 1) 휴대폰인증서비스란? 2) 휴대폰인증서비스장점 3) 서비스신청하기 1) 회원가입페이지에적용 2) 아이디, 비밀번호찾기페이지에적용 3) 14세미만비회원구매제한팝업에적용 4) 성인인증페이지에적용 2 1. 서비스소개및신청 1) 휴대폰인증서비스란? 휴대폰인증서비스는본인명의의휴대폰을사용하여본인확인을가능하게해주는서비스로써,

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 바로가기마케팅서비스 사용자매뉴얼 최종업데이트 2013-08-02 문서버전 1.2 목차 1. 서비스소개및신청 1) 바로가기마케팅서비스란? 2) 서비스신청및적용 3) 서비스활용 2. 디자인설정 ( 구 ) 디자인 1) 바로가기아이콘소개페이지적용 2) 바로가기접속상태아이콘노출 3) 바로가기접속주문혜택노출 3. 디자인설정 - 스마트디자인 1) 바로가기아이콘서비스소개페이지적용

More information

슬라이드 1

슬라이드 1 웹프로그래밍소개 류관희 충북대학교 강사소개 충북대학교소프트웨어학과 khyoo@chungbuk.ac.kr 컴퓨터그래픽스및콘텐츠연구실 http://cgac.chungbuk.ac.kr 강의교재 한번에배우는 HTML5+ 자바스크립트, 지닌마이어 ( 김지원옮김 ), 한빛미디어, 2011 HyperText 1965, Nelson HyperCard 1987 Apple 4

More information

NATE CP 가이드 1. WML 페이지에서줄바꿈문제 개요 WML 페이지에서줄바꿈은명시적으로 <br/> 태그를사용하여야한다. 설명그림 2 의의도로제작된페이지에서 Card Styles 텍스트와 Select 박스사이에명시적인 <br/> 태그가없어, 그림 1 과같이줄바꿈이되

NATE CP 가이드 1. WML 페이지에서줄바꿈문제 개요 WML 페이지에서줄바꿈은명시적으로 <br/> 태그를사용하여야한다. 설명그림 2 의의도로제작된페이지에서 Card Styles 텍스트와 Select 박스사이에명시적인 <br/> 태그가없어, 그림 1 과같이줄바꿈이되 NATE CP 가이드 1. WML 페이지에서줄바꿈문제 WML 페이지에서줄바꿈은명시적으로 태그를사용하여야한다. 그림 2 의의도로제작된페이지에서 Card Styles 텍스트와 Select 박스사이에명시적인 태그가없어, 그림 1 과같이줄바꿈이되지않고한줄로보여짐. [ 그림 1] 비정상 [ 그림 2] 정상

More information

이번장에서는본격적으로사이트를제작하도록하겠습니다. 우선사이트제작에앞서몇가지준비사항및주의점이있습니다. 1. 예제를실행하기위해선 WAMP 또는 MAMP 서버가필요합니다. WAMP 서버설치방법은부록을참고하기바랍니다. 1 사이트준비작업 2. 포토샵을이용해서만들어진사이트디자인레이

이번장에서는본격적으로사이트를제작하도록하겠습니다. 우선사이트제작에앞서몇가지준비사항및주의점이있습니다. 1. 예제를실행하기위해선 WAMP 또는 MAMP 서버가필요합니다. WAMP 서버설치방법은부록을참고하기바랍니다. 1 사이트준비작업 2. 포토샵을이용해서만들어진사이트디자인레이 chapter 14 사이트제작전 준비작업및 프론트페이지제작 14장에서는사이트제작에들어가기에앞서, 필요한사항을먼저점검하도록하겠습니다. 사이트를제작하기위해선먼저준비해야하는사항이몇가지있는데, 실제서버와같이동작하게해주는개인용웹서버가준비되어있어야하고, 사이트의디렉토리또한구성되어야합니다. 또한사이트를제작하려면, 포토샵과같은그래픽저작도구를이용해서레이아웃을구성해야함은물론이고,

More information

Eclipse 와 Firefox 를이용한 Javascript 개발 발표자 : 문경대 11 년 10 월 26 일수요일

Eclipse 와 Firefox 를이용한 Javascript 개발 발표자 : 문경대 11 년 10 월 26 일수요일 Eclipse 와 Firefox 를이용한 Javascript 개발 발표자 : 문경대 Introduce Me!!! Job Jeju National University Student Ubuntu Korean Jeju Community Owner E-Mail: ned3y2k@hanmail.net Blog: http://ned3y2k.wo.tc Facebook: http://www.facebook.com/gyeongdae

More information

슬라이드 1

슬라이드 1 Best Practice of HTML5 Semantic Markup Toby Yun Blog E-mail http://tobyyun.com tobyyun@gmail.com Index 용어정리 시맨틱마크업이란 시맨틱마크업을통해얻을수있는이점 좋은마크업을위한방법들 HTML5의시맨틱요소 HTML5의컨텐츠모델 HTML5 마크업의실제적용 시맨틱웹의과제 용어정리 Element

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 How to construct XSL and/or CSS for style sheet of XML files based on the data type definition 조윤상 ( 과편협기획운영위원 ) 1 Table of Contents 1. XML, XSL and CSS? 2. What is XSL? XSLT? XPath? XSL-FO? 3. What is

More information

ePapyrus PDF Document

ePapyrus PDF Document 처음부터다시배우는 HTML5&CSS3: 실전웹표준사이트제작까지 3 부 실전웹표준사이트구축 에서는 1부와 2부에서배운내용을기반으로실제웹사이트를만드는방법을소개합니다. 기존책들과다르게실무에서사용하는방법을바탕으로한실제웹사이트제작기법을단계별로학습해볼수있습니다. 특히디렉토리나하부사이트구조는어떻게구성하는지, 실제웹페이지가만들어지는방법이그대로나오기때문에, 에서배운내용은향후실제웹사이트를만들때많은도움을받을수있습니다.

More information

쉽게 풀어쓴 C 프로그래밍

쉽게 풀어쓴 C 프로그래밍 CHAPTER 13. HTML5 위치정보와드래그앤드롭 SVG SVG(Scalable Vector Graphics) 는 XML- 기반의벡터이미지포맷 웹에서벡터 - 기반의그래픽을정의하는데사용 1999 년부터 W3C 에의하여표준 SVG 의장점 SVG 그래픽은확대되거나크기가변경되어도품질이손상되지않는다. SVG 파일에서모든요소와속성은애니메이션이가능하다. SVG 이미지는어떤텍스트에디터로도생성하고편집할수있다.

More information

1

1 7차시. 이즐리와 택시도를 활용한 인포그래픽 제작 1. 이즐리 사이트에 대해 알아보고 사용자 메뉴 익히기 01. 이즐리(www.easel.ly) 사이트 접속하기 인포그래픽 제작을 위한 이즐리 사이트는 무료로 제공되는 템플릿을 이용하여 간편하게 인포그래 픽을 만들 수 있는 사이트입니 이즐리는 유료, 무료 구분이 없는 장점이 있으며 다른 인포그래픽 제작 사이트보다

More information

슬라이드 1

슬라이드 1 BUSINESS DATA What DATA Disconnection SCOPE CONTEXTUAL Planner ENTERPRISE MODEL CONCEPTUAL List of Things Important to the Business ENTITY = Class of Business Thing e.g. Semantic Model Owner SYSTEM MODEL

More information

XE 스킨 제작 가이드

XE 스킨 제작 가이드 XE 스킨제작가이드 NHN 오픈 UI 기술팀정찬명 목 차 1. XE 스킨의개요 2. XE 스킨의종류 3. XE 스킨의구성요소 4. XE 스킨제작시고려사항 5. XE 스킨파일구조 6. skin.xml 문법 7. XHTML 문법 8. CSS 활용 9. XE 템플릿문법 XE 스킨의개요 스킨이란? 웹페이지또는 웹페이지의구성요소에대한 사용자인터페이스. 이런것아닙니다.

More information

쉽게 풀어쓴 C 프로그래밍

쉽게 풀어쓴 C 프로그래밍 CHAPTER 11. 자바스크립트와캔버스로게임 만들기 캔버스 캔버스는 요소로생성 캔버스는 HTML 페이지상에서사각형태의영역 실제그림은자바스크립트를통하여코드로그려야한다. 컨텍스트객체 컨텍스트 (context) 객체 : 자바스크립트에서물감과붓의역할을한다. var canvas = document.getelementbyid("mycanvas"); var

More information

네트워크 명령 실습

네트워크 명령 실습 HTML 실습 Contents 1. WWW, HTTP, HTML 개요 2. HTML 기본구조 3. HTML 기본태그 1. 글자관련 2. 서식관련 3. 표관련 4. 하이퍼링크관련 5. 프레임관련 6. 멀티미디어관련 7. 배경등꾸미기관련 8. 아이템화관련 1. HTML 개요 1. HTML(Hyper Text Markup Language) A. 웹문서를표현하는기술

More information

PHP & ASP

PHP & ASP PHP 의시작과끝 echo ; Echo 구문 HTML과 PHP의 echo 비교 HTML과 PHP의 echo를비교해볼까요

More information

SIGIL 완벽입문

SIGIL 완벽입문 누구나 만드는 전자책 SIGIL 을 이용해 전자책을 만들기 EPUB 전자책이 가지는 단점 EPUB이라는 포맷과 제일 많이 비교되는 포맷은 PDF라는 포맷 입니다. EPUB이 나오기 전까지 전 세계에서 가장 많이 사용되던 전자책 포맷이고, 아직도 많이 사 용되기 때문이기도 한며, 또한 PDF는 종이책 출력을 위해서도 사용되기 때문에 종이책 VS

More information

HTML Basic & Advanced

HTML Basic & Advanced HTML Basic & Advanced Agenda - Markup에대한기본개념이해 - (X)HTML의구조및문법습득 - 실습예제및과제수행을통해실무에필요한스킬향상 Contents I. Markup의기본개념 II. HTML 구조및문법 III. 시멘틱마크업 IV. Tool 소개 V. 실습과제 2 Markup 의기본개념 HTML BASIC 3 Markup 이란? 문서의일부를

More information

세르게이의 HTML5&CSS3-내지_ indd

세르게이의 HTML5&CSS3-내지_ indd HTML CSS CHAPTER_2 HTML 문법 HTML 문서 HTML 문서기초요소와태그태그중첩빈요소특성불리언특성 XHTML5 여러버전을지원하는 HTML 문서 XHTML5 정의 문서타입과구조 MIME 타입일반적인 MIME 타입문서객체모델의미적요소 문법요약일반문법규칙 (X)HTML5 빈태그문법선택적태그를사용하는 HTML5 요소요소의타입브라우저호환성을위한스크립팅

More information

AMP는 어떻게 빠른 성능을 내나.key

AMP는 어떻게 빠른 성능을 내나.key AMP는 어떻게 빠른 성능을 내나? AU개발 김태훈 kishu@navercorp.com AMP 란무엇인가? AMP 방식으로 HTML을 만들고 AMP JS를 로딩하고 AMP 컴포넌트만 사용하면 웹페이지의 빠른 렌더링을 보장 + 구글 검색 결과에서 즉시 로딩(빠르고 멋있게) AMPs are just Web Pages! AMPs are just Web Pages!

More information

<3035B0AD D4C5F584D4C5FC0CEC5CDB3DDBAB8C3E6C7D0BDC0C0DAB7E12E687770>

<3035B0AD D4C5F584D4C5FC0CEC5CDB3DDBAB8C3E6C7D0BDC0C0DAB7E12E687770> HTML/XML 인터넷보충학습자료 - 1 - - Cascading Style Sheets - HTML의단점을보완하기위해사용하는것으로, 웹문서에스타일 ( 예 ; 글꼴, 색상, 여백등 ) 을추가하는간단한메카니즘 1 다양한기능의확장 : HTML의단순한기능을확장 ( 추가, 변경 ) 시킴 2 통일된문서양식제공 : 한번의속성정의로여러문서에동시에적용가능 3 독립적인문서제작환경가능

More information

슬라이드 1

슬라이드 1 GS 에너지백오피스 ( 국문 ) HTML 등록가이드 Version 1.0 Produced By e-motion 프로젝트 단위업무 GS 에너지홈페이지구축프로젝트 화면설계 _ 백오피스 HTML 등록가이드 작성자조정아작성일 2012-07-10-1- 목록 페이지 메뉴명 등록항목 3 Company > GS에너지소개 4 Company > CEO 메시지 5 Company

More information

HTML5

HTML5 행맨 류관희 충북대학교 2 3 4 5 사전준비 단어목록읽기 단어빈칸보여주기 인터페이스를통해알파벳선택하면알파벳사라지기 단어에선택한알파벳이있으면표시하기 없으면선이나타원으로사람형태그리기 게임종료조건 : 모든맞추는경우 모두틀린경우 ( 행맨 ) 6 단어목록배열에저장 words.js var words = [ "muon", "blight","kerfuffle","qat"

More information

2009년 상반기 사업계획

2009년 상반기 사업계획 웹 (WWW) 쉽게배우는데이터통신과컴퓨터네트워크 학습목표 웹서비스를위한클라이언트 - 서버구조를살펴본다. 웹서비스를지원하는 APM(Apache, PHP, MySQL) 의연동방식을이해한다. HTML 이지원하는기본태그명령어와프레임구조를이해한다. HTTP 의요청 / 응답메시지의구조와동작원리를이해한다. CGI 의원리를이해하고 FORM 태그로사용자입력을처리하는방식을알아본다.

More information

Microsoft PowerPoint - web-part02-ch15-문서객체조작.pptx

Microsoft PowerPoint - web-part02-ch15-문서객체조작.pptx 과목명 : 웹프로그래밍응용교재 : 모던웹을위한 JavaScript Jquery 입문, 한빛미디어 Part2. jquery Ch15. 문서객체조작 2014년 1학기 Professor Seung-Hoon Choi 15 문서객체조작 문서객체조작 자바스크립트만으로문서객체모델을다루려면복잡함 jquery를이용하면쉽게다룰수있다. 이책에서가장중요한부분 15.1 문서객체의클래스속성추가

More information

제1장 HTML 문서의 작성

제1장 HTML 문서의 작성 웹프로그래밍 제 2 장 CSS 생능출판사 Copyright 2013 Lee, Kim & Park, Life & Power Press 2. CSS 교재 p.113 2.1 CSS 기초 2.2 스타일정의방법 2.3 CSS3 접두어 2.4 CSS3 미디어질의 2.5 CSS 속성 2.6 CSS3 변형 2.7 CSS3 전환 2.8 CSS3 애니메이션 Copyright

More information

What Is CSS? Stands for Cascading Style Sheets. Is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents. Styles define h

What Is CSS? Stands for Cascading Style Sheets. Is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents. Styles define h What is CSS? Bok, Jong Soon jongsoon.bok@gmail.com www.javaexpert.co.kr What Is CSS? Stands for Cascading Style Sheets. Is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents.

More information

HTML5

HTML5 퀴즈 류관희 게임규칙 동적으로 HTML 요소생성 생성된 HTML 요소의화면배치및위치옮기기 퀴즈게임 국가명과수도명의짝맞추기 배열 ( 국가명, 수도명 ) 짝모두맞추면 => 동영상플레이 2 퀴즈게임 3 4 5 6 주요특징 배열 : 국가명과수도명저장 피드백 : 색상변경, 동영상재생 플레이 20쌍중에 4 쌍무작위로선택 글자 : 국가명과수도명 => 그림으로대치 7 사전준비항목

More information

다른 JSP 페이지호출 forward() 메서드 - 하나의 JSP 페이지실행이끝나고다른 JSP 페이지를호출할때사용한다. 예 ) <% RequestDispatcher dispatcher = request.getrequestdispatcher(" 실행할페이지.jsp");

다른 JSP 페이지호출 forward() 메서드 - 하나의 JSP 페이지실행이끝나고다른 JSP 페이지를호출할때사용한다. 예 ) <% RequestDispatcher dispatcher = request.getrequestdispatcher( 실행할페이지.jsp); 다른 JSP 페이지호출 forward() 메서드 - 하나의 JSP 페이지실행이끝나고다른 JSP 페이지를호출할때사용한다. 예 ) RequestDispatcher dispatcher = request.getrequestdispatcher(" 실행할페이지.jsp"); dispatcher.forward(request, response); - 위의예에서와같이 RequestDispatcher

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 육아상식 STYLE GUIDE Design Style Guide 0 Navigation 메뉴검색알람슈퍼맘맘스맘쇼핑맘이벤트 Icon 출석체크내프로필내포인트참여한이벤트 : 문의로그아웃 뒤로가기공유하기더보기글쓰기유튜브좋아요 _on 좋아요 _off 알리기공지사항 FAQ 설정 댓글공유하기이동하기뒤로가기닫기내프로필사진수정 카테고리프로필 _ 포인트내포인트자녀 Q A N

More information

Prototype 분석 - Element 오브젝트 메서드

Prototype 분석 - Element 오브젝트 메서드 Created by Firejune at 2006/09/05 Prototype 분석 - Element 오브젝트 메서드 이 문서는 Backstage of theater.js에서 발췌한 것 입니다. 프로토타입 라이브러리의 엘리먼트 오브젝트 메서드에 대한 내용을 다루는 일부분입니다. 사용성과 편리성에 포커스를 두지 않고 prototype.js 그대로를 분석하여 접근하고

More information

Lab10

Lab10 Lab 10: Map Visualization 2015 Fall human-computer interaction + design lab. Joonhwan Lee Map Visualization Shape Shape (.shp): ESRI shp http://sgis.kostat.go.kr/html/index.html 3 d3.js SVG, GeoJSON, TopoJSON

More information

Microsoft PowerPoint - 강의노트 2.ppt

Microsoft PowerPoint - 강의노트 2.ppt CSS 개요 DHTML+ 자바스크립트프로그래밍 제 2 장스타일시트 (CSS: Cascading Style Sheet) 를이용한화려한 HTML 문서 All right reserved. N part f this lecture nte may be reprduced, in any frm r by any means, withut permissin in writing

More information

Building Mobile AR Web Applications in HTML5 - Google IO 2012

Building Mobile AR Web Applications in HTML5 - Google IO 2012 Building Mobile AR Web Applications in HTML5 HTML5 -, KIST -, UST HCI & Robotics Agenda Insight: AR Web Browser S.M.AR.T: AR CMS HTML5 HTML5 AR - Hello world! - Transform - - AR Events 3/33 - - - (Simplicity)

More information

리포트_23.PDF

리포트_23.PDF Working Paper No 23 e-business Integrator From Strategy to Technology To remove the gap between e-biz strategy and implementation (eeyus@e-bizgroupcom) Creative Design 2001 04 24 e-business Integrator

More information

Microsoft PowerPoint - 3ÀÏ°_º¯¼ö¿Í »ó¼ö.ppt

Microsoft PowerPoint - 3ÀÏ°_º¯¼ö¿Í »ó¼ö.ppt 변수와상수 1 변수란무엇인가? 변수 : 정보 (data) 를저장하는컴퓨터내의특정위치 ( 임시저장공간 ) 메모리, register 메모리주소 101 번지 102 번지 변수의크기에따라 주로 byte 단위 메모리 2 기본적인변수형및변수의크기 변수의크기 해당컴퓨터에서는항상일정 컴퓨터마다다를수있음 short

More information

Microsoft PowerPoint HTML.ppt

Microsoft PowerPoint HTML.ppt 웹프로그래밍 () HTML () 2006 년봄학기 문양세강원대학교컴퓨터과학과 웹페이지제작단계및환경 주제와주제와내용선정 어떤어떤내용을내용을담을담을것인지것인지,, 어떤어떤단계로단계로제작할제작할것인지것인지결정결정 디자인디자인 웹페이지페이지구조구조 저작권저작권확인확인 로고로고, 아이콘, 아이콘또는또는멀티미디어멀티미디어등다양한다양한소재를소재를어떻게어떻게꾸밀꾸밀것인지것인지구성구성

More information

Grouping Selectors To minimize the code, you can group selectors.

Grouping Selectors To minimize the code, you can group selectors. CSS Advanced Bok, Jong Soon jongsoon.bok@gmail.com www.javaexpert.co.kr Grouping Selectors To minimize the code, you can group selectors. Nesting Selectors It is possible to apply a style for a selector

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 바로가기마케팅서비스 사용자매뉴얼 최종업데이트 2017-05-04 문서버전 1.4 목차 1. 서비스소개및신청 1) 바로가기마케팅서비스란? 2) 서비스신청및적용 3) 서비스활용 2. 디자인설정 ( 구 ) 디자인 1) 바로가기아이콘소개페이지적용 2) 바로가기접속상태아이콘노출 3) 바로가기접속주문혜택노출 3. 디자인설정 - 스마트디자인 1) 바로가기아이콘서비스소개페이지적용

More information

슬라이드 1

슬라이드 1 웹접근성향상을위한 UI 개발표준화가이드 UI 개발팀최재성, 유순 웹접근성향상을위한 UI 개발표준화가이드 intro 웹접근성? IWA TFT 웹접근성준수실태 웹접근성? 웹표준? 웹사용성? 기대효과 웹접근성향상을위한가이드라인 웹표준화실무적용방법 웹접근성실무적용방법 웹사용성실무적용방법 앞으로 준수의당위성 IWA TFT (Improve Web Accessibility

More information

Javascript

Javascript 1. 이벤트와이벤트핸들러의이해 이벤트 (Event) 는웹브라우저에서발생하는다양한사건을말합니다. 예를들면, 버튼을마우스로을했다거나브라우저를닫았다거나 Enter 키를눌렀다거나등등아주다양한사건들이있습니다. 그렇다면이벤트핸들러 (Event Handler) 는무엇일까요? 이다양한이벤트들을핸들링 ( 처리 ) 해주는것입니다. 예를들면, 어떤버튼을했을때메시지창이뜨게하는등을말합니다.

More information

Microsoft PowerPoint 세션.ppt

Microsoft PowerPoint 세션.ppt 웹프로그래밍 () 2006 년봄학기 문양세강원대학교컴퓨터과학과 세션변수 (Session Variable) (1/2) 쇼핑몰장바구니 장바구니에서는사용자가페이지를이동하더라도장바구니의구매물품리스트의내용을유지하고있어야함 PHP 에서사용하는일반적인변수는스크립트의수행이끝나면모두없어지기때문에페이지이동시변수의값을유지할수없음 이러한문제점을해결하기위해서 PHP 에서는세션 (session)

More information

PowerPoint Presentation

PowerPoint Presentation Class - Property Jo, Heeseung 목차 section 1 클래스의일반구조 section 2 클래스선언 section 3 객체의생성 section 4 멤버변수 4-1 객체변수 4-2 클래스변수 4-3 종단 (final) 변수 4-4 멤버변수접근방법 section 5 멤버변수접근한정자 5-1 public 5-2 private 5-3 한정자없음

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 실습문제 Chapter 05 데이터베이스시스템... 오라클로배우는데이터베이스개론과실습 1. 실습문제 1 (5 장심화문제 : 각 3 점 ) 6. [ 마당서점데이터베이스 ] 다음프로그램을 PL/SQL 저장프로시져로작성하고실행해 보시오. (1) ~ (2) 7. [ 마당서점데이터베이스 ] 다음프로그램을 PL/SQL 저장프로시져로작성하고실행해 보시오. (1) ~ (5)

More information

Cookie Spoofing.hwp

Cookie Spoofing.hwp Cookie Spoofing&Sniffing By Maxoverpro[max]( 장상근) maxoverpro@empal.com http://www.maxoverpro.org 1. 서론 이문서는 Cookie Spoofing 과 Sniffing 에대해정석적인방법을이야기하도록하며또 한어느특정곳의취약점을설명하지않고직접제작한예제를가지고 Cookie Spoofing 과

More information

PART 1 CHAPTER 1 Chapter 1 Note 4 Part 1 5 Chapter 1 AcctNum = Table ("Customer").Cells("AccountNumber") AcctNum = Customer.AccountNumber Note 6 RecordSet RecordSet Part 1 Note 7 Chapter 1 01:

More information

슬라이드 1

슬라이드 1 Mobile Web Manual INTERNETNAYANA COPYRIGHT (C) INTERNETNAYANA CORP. RIGHT RESERVED MobileWeb Manual, Nayana 1. 계정확인하기 - FTP 접속및소스파일확인및다운로드 - 스킨에서수정해야될부분확인 2. 소스수정하기 - 인덱스수정하기 - 회사소개서브페이지수정 - 주요서비스서브페이지수정

More information

Microsoft PowerPoint - chap02-C프로그램시작하기.pptx

Microsoft PowerPoint - chap02-C프로그램시작하기.pptx #include int main(void) { int num; printf( Please enter an integer "); scanf("%d", &num); if ( num < 0 ) printf("is negative.\n"); printf("num = %d\n", num); return 0; } 1 학습목표 을 작성하면서 C 프로그램의

More information

0. 들어가기 전

0. 들어가기 전 컴퓨터네트워크 14 장. 웹 (WWW) (3) - HTTP 1 이번시간의학습목표 HTTP 의요청 / 응답메시지의구조와동작원리이해 2 요청과응답 (1) HTTP (HyperText Transfer Protocol) 웹브라우저는 URL 을이용원하는자원표현 HTTP 메소드 (method) 를이용하여데이터를요청 (GET) 하거나, 회신 (POST) 요청과응답 요청

More information

BY-FDP-4-70.hwp

BY-FDP-4-70.hwp RS-232, RS485 FND Display Module BY-FDP-4-70-XX (Rev 1.0) - 1 - 1. 개요. 본 Display Module은 RS-232, RS-485 겸용입니다. Power : DC24V, DC12V( 주문사양). Max Current : 0.6A 숫자크기 : 58mm(FND Size : 70x47mm 4 개) RS-232,

More information

- 이벤트의처리 <input type= button id= button1 value= 확인 /> <input type= button id= button2 value= 확인 /> 자바스크립트인경우 : document.getelementbyid( button1 ).oncl

- 이벤트의처리 <input type= button id= button1 value= 확인 /> <input type= button id= button2 value= 확인 /> 자바스크립트인경우 : document.getelementbyid( button1 ).oncl 제이쿼리 (JQuery) - 제이쿼리는자바스크립트함수를쉽게사용하기위해만든자바스크립트라이브러리이다. - 따라서, 제이쿼리를사용하기위해서는자바스크립트라이브러리를사용해야한다. - 제이쿼리사용법 $( 제이쿼리객체 ) 혹은 $( 엘리먼트 ) - 참고 ) $() 이기호를제이쿼리래퍼라고한다. 즉, 제이쿼리를호출하는기호를말함. - 사용예 )

More information

웹의 뼈대 HTML의 이해 개요 및 텍스트 태그

웹의 뼈대 HTML의 이해 개요 및 텍스트 태그 HTML 의이해 - 개요및텍스트태그 최현종 ( 서원대학교 ) HTML 의개요 웹문서란무엇인가? 인터넷에올려진문서 HTML : 다양한멀티미디어요소까지다룰수있는인터넷표준웹문서 웹브라우저란무엇인가? 웹문서를보기위한프로그램 대표적인웹브라우저 - 인터넷익스플로러 - 넷스케이프내비게이터 - 오페라 그림 1. 인터넷익스플로러 HTML 의정의 - Hyper Text Markup

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 실습 1 배효철 th1g@nate.com 1 목차 조건문 반복문 System.out 구구단 모양만들기 Up & Down 2 조건문 조건문의종류 If, switch If 문 조건식결과따라중괄호 { 블록을실행할지여부결정할때사용 조건식 true 또는 false값을산출할수있는연산식 boolean 변수 조건식이 true이면블록실행하고 false 이면블록실행하지않음 3

More information

네트워크 명령 실습

네트워크 명령 실습 HTML 실습 Contents 1. HTML 개요 2. HTML 기본구조 3. HTML 기본태그 1. 글자관련 2. 서식관련 3. 표관련 4. 하이퍼링크관련 5. 프레임관련 6. 멀티미디어관련 7. 배경등꾸미기관련 8. 아이템화관련 3.4 하이퍼링크태그 1. 하이퍼링크란윈도우의도움말같은형태로문서안에특정문자열이나이미지를마우스로클릭했을때관련된다른문서, 그림, 음악,

More information