GitHub - Suby201/Html5_CSS3_JS_app

Branches Tags
Name		Name	Last commit message	Last commit date
Latest commit History 5 Commits
ch02		ch02
ch03		ch03
ch04		ch04
ch05		ch05
ch06		ch06
ch07		ch07
ch07_bookstore		ch07_bookstore
ch08		ch08
ch09		ch09
ch10		ch10
ch11		ch11
ch12		ch12
ch13_bookstore		ch13_bookstore
res		res
student_book_client		student_book_client
README.html		README.html
index.html		index.html
Repository files navigation

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>README</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
/* GitHub stylesheet for MarkdownPad */
/* Author: Nicolas Hery - http://nicolashery.com */
/* Version: d5e7ce436666e7d4a2eeb12e7f8261dacceb3565 */
/* Source: https://github.com/nicolahery/markdownpad-github */

/* RESET
=============================================================================*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
}

/* BODY
=============================================================================*/

body {
  font-family: Helvetica, arial, freesans, clean, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: #333;
  background-color: #fff;
  padding: 20px;
  max-width: 960px;
  margin: 0 auto;
}

body>*:first-child {
  margin-top: 0 !important;
}

body>*:last-child {
  margin-bottom: 0 !important;
}

/* BLOCKS
=============================================================================*/

p, blockquote, ul, ol, dl, table, pre {
  margin: 15px 0;
}

/* HEADERS
=============================================================================*/

h1, h2, h3, h4, h5, h6 {
  margin: 20px 0 10px;
  padding: 0;
  font-weight: bold;
  -webkit-font-smoothing: antialiased;
}

h1 tt, h1 code, h2 tt, h2 code, h3 tt, h3 code, h4 tt, h4 code, h5 tt, h5 code, h6 tt, h6 code {
  font-size: inherit;
}

h1 {
  font-size: 28px;
  color: #000;
}

h2 {
  font-size: 24px;
  border-bottom: 1px solid #ccc;
  color: #000;
}

h3 {
  font-size: 18px;
}

h4 {
  font-size: 16px;
}

h5 {
  font-size: 14px;
}

h6 {
  color: #777;
  font-size: 14px;
}

body>h2:first-child, body>h1:first-child, body>h1:first-child+h2, body>h3:first-child, body>h4:first-child, body>h5:first-child, body>h6:first-child {
  margin-top: 0;
  padding-top: 0;
}

a:first-child h1, a:first-child h2, a:first-child h3, a:first-child h4, a:first-child h5, a:first-child h6 {
  margin-top: 0;
  padding-top: 0;
}

h1+p, h2+p, h3+p, h4+p, h5+p, h6+p {
  margin-top: 10px;
}

/* LINKS
=============================================================================*/

a {
  color: #4183C4;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* LISTS
=============================================================================*/

ul, ol {
  padding-left: 30px;
}

ul li > :first-child, 
ol li > :first-child, 
ul li ul:first-of-type, 
ol li ol:first-of-type, 
ul li ol:first-of-type, 
ol li ul:first-of-type {
  margin-top: 0px;
}

ul ul, ul ol, ol ol, ol ul {
  margin-bottom: 0;
}

dl {
  padding: 0;
}

dl dt {
  font-size: 14px;
  font-weight: bold;
  font-style: italic;
  padding: 0;
  margin: 15px 0 5px;
}

dl dt:first-child {
  padding: 0;
}

dl dt>:first-child {
  margin-top: 0px;
}

dl dt>:last-child {
  margin-bottom: 0px;
}

dl dd {
  margin: 0 0 15px;
  padding: 0 15px;
}

dl dd>:first-child {
  margin-top: 0px;
}

dl dd>:last-child {
  margin-bottom: 0px;
}

/* CODE
=============================================================================*/

pre, code, tt {
  font-size: 12px;
  font-family: Consolas, "Liberation Mono", Courier, monospace;
}

code, tt {
  margin: 0 0px;
  padding: 0px 0px;
  white-space: nowrap;
  border: 1px solid #eaeaea;
  background-color: #f8f8f8;
  border-radius: 3px;
}

pre>code {
  margin: 0;
  padding: 0;
  white-space: pre;
  border: none;
  background: transparent;
}

pre {
  background-color: #f8f8f8;
  border: 1px solid #ccc;
  font-size: 13px;
  line-height: 19px;
  overflow: auto;
  padding: 6px 10px;
  border-radius: 3px;
}

pre code, pre tt {
  background-color: transparent;
  border: none;
}

/* QUOTES
=============================================================================*/

blockquote {
  border-left: 4px solid #DDD;
  padding: 0 15px;
  color: #777;
}

blockquote>:first-child {
  margin-top: 0px;
}

blockquote>:last-child {
  margin-bottom: 0px;
}

/* HORIZONTAL RULES
=============================================================================*/

hr {
  clear: both;
  margin: 15px 0;
  height: 0px;
  overflow: hidden;
  border: none;
  background: transparent;
  border-bottom: 4px solid #ddd;
  padding: 0;
}

/* TABLES
=============================================================================*/

table th {
  font-weight: bold;
}

table th, table td {
  border: 1px solid #ccc;
  padding: 6px 13px;
}

table tr {
  border-top: 1px solid #ccc;
  background-color: #fff;
}

table tr:nth-child(2n) {
  background-color: #f8f8f8;
}

/* IMAGES
=============================================================================*/

.markdown-body img {
  max-width: 100%
}
</style>
</head>
<body>
<h1>예제</h1>
<h2>2장</h2>
<ol>
<li><a href="ch02/ex201_html5_basic.html">HTML 기본구조</a></li>
<li><a href="ch02/ex202_heading.html">단락제목</a></li>
<li><a href="ch02/ex203_paragraph.html">단락과 줄</a></li>
<li><a href="ch02/ex204_text.html">다양한 텍스트 표현</a></li>
<li><a href="ch02/ex205_list.html">목록</a></li>
<li><a href="ch02/ex206_table.html">테이블</a></li>
<li><a href="ch02/ex207_table_cell.html">테이블의 장식</a></li>
<li><a href="ch02/ex208_table_advanced.html">테이블 고급</a></li>
<li><a href="ch02/ex209_div_span.html">div와 span</a></li>
<li><a href="ch02/ex210_doc_struct.html">문서구조화</a></li>
</ol>
<h2>3장</h2>
<ol>
<li><a href="ch03/ex300_start.html">ex300_start.html</a></li>
<li><a href="ch03/ex301_external.html">ex301_external</a></li>
<li><a href="ch03/ex302_internal.html">ex302_internal</a></li>
<li><a href="ch03/ex303_iframe.html">ex303_iframe</a></li>
<li><a href="ch03/ex304_images.html">ex304_images</a></li>
<li><a href="ch03/ex305_audio1.html">ex305_audio1</a></li>
<li><a href="ch03/ex306_audio2.html">ex306_audio2</a></li>
<li><a href="ch03/ex307_video1.html">ex307_video1</a></li>
<li><a href="ch03/ex308_video2.html">ex308_video2</a></li>
</ol>
<h2>4장</h2>
<ol>
<li><a href="ch04/ex401_start.html">ex401_start</a></li>
<li><a href="ch04/ex402_text.html">ex402_text</a></li>
<li><a href="ch04/ex403_button.html">ex403_button</a></li>
<li><a href="ch04/ex403_choice.html">ex403_choice</a></li>
<li><a href="ch04/ex404_file.html">ex404_file</a></li>
<li><a href="ch04/ex404_group.html">ex404_group</a></li>
<li><a href="ch04/ex404_label.html">ex404_label</a></li>
<li><a href="ch04/ex405_adv-text.html">ex405_adv-text</a></li>
<li><a href="ch04/ex405_date.html">ex405_date</a></li>
<li><a href="ch04/ex405_dtime.html">ex405_dtime</a></li>
<li><a href="ch04/ex405_reserve.html">ex405_reserve</a></li>
<li><a href="ch04/ex406_color.html">ex406_color</a></li>
<li><a href="ch04/ex406_datalist.html">ex406_datalist</a></li>
<li><a href="ch04/ex406_purchase.html">ex406_purchase</a></li>
</ol>
<h2>5장</h2>
<ol>
<li><a href="ch05/ex501_start1.html">ex501_start1</a></li>
<li><a href="ch05/ex502_start2.html">ex502_start2</a></li>
<li><a href="ch05/ex503_cascading.html">ex503_cascading</a></li>
<li><a href="ch05/ex504_internal.html">ex504_internal</a></li>
<li><a href="ch05/ex505_external.html">ex505_external</a></li>
<li><a href="ch05/ex506_inline.html">ex506_inline</a></li>
<li><a href="ch05/ex507_classID.html">ex507_classID</a></li>
<li><a href="ch05/ex508_pseudo.html">ex508_pseudo</a></li>
<li><a href="ch05/ex509_context.html">ex509_context</a></li>
<li><a href="ch05/ex510_font.html">ex510_font</a></li>
<li><a href="ch05/ex511_text.html">ex511_text</a></li>
<li><a href="ch05/ex512_background.html">ex512_background</a></li>
<li><a href="ch05/ex513_box.html">ex513_box</a></li>
<li><a href="ch05/ex514_border.html">ex514_border</a></li>
<li><a href="ch05/ex514a_bordertype.html">ex514a_bordertype</a></li>
<li><a href="ch05/ex515_display.html">ex515_display</a></li>
</ol>
<h2>6장</h2>
<ol>
<li><a href="ch06/ex611_list_style.html">ex611<em>list</em>style</a></li>
<li><a href="ch06/ex612_list_pos.html">ex612<em>list</em>pos</a></li>
<li><a href="ch06/ex613_table_layout.html">ex613<em>table</em>layout</a></li>
<li><a href="ch06/ex613_table_layout(2).html">ex613<em>table</em>layout(2)</a></li>
<li><a href="ch06/ex614_table_border(a).html">ex614<em>table</em>border(a)</a></li>
<li><a href="ch06/ex614_table_border(b).html">ex614<em>table</em>border(b)</a></li>
<li><a href="ch06/ex614_table_caption.html">ex614<em>table</em>caption</a></li>
<li><a href="ch06/ex620_layout.html">ex620_layout</a></li>
<li><a href="ch06/ex621_position.html">ex621_position</a></li>
<li><a href="ch06/ex622_zindex.html">ex622_zindex</a></li>
<li><a href="ch06/ex623_float.html">ex623_float</a></li>
<li><a href="ch06/ex624_size.html">ex624_size</a></li>
<li><a href="ch06/ex625_overflow.html">ex625_overflow</a></li>
<li><a href="ch06/ex631_border.html">ex631_border</a></li>
<li><a href="ch06/ex632_boxshadow.html">ex632_boxshadow</a></li>
<li><a href="ch06/ex633_opacity.html">ex633_opacity</a></li>
<li><a href="ch06/ex641_transition0.html">ex641_transition0</a></li>
<li><a href="ch06/ex641_transition1.html">ex641_transition1</a></li>
<li><a href="ch06/ex642_transform.html">ex642_transform</a></li>
<li><a href="ch06/ex643_animation.html">ex643_animation</a></li>
</ol>
<h2>7장</h2>
<ol>
<li><a href="ch07/main.html">예제</a></li>
</ol>
<h2>8장</h2>
<ol>
<li><a href="ch08/ex0801_welcomejavascript.html">ex0801_welcomejavascript</a></li>
<li><a href="ch08/ex0802_variable.html">ex0802_variable</a></li>
<li><a href="ch08/ex0803_typeconv.html">ex0803_typeconv</a></li>
<li><a href="ch08/ex0804_screenoutput.html">ex0804_screenoutput</a></li>
<li><a href="ch08/ex0805_alert.html">ex0805_alert</a></li>
<li><a href="ch08/ex0806_confirm.html">ex0806_confirm</a></li>
<li><a href="ch08/ex0807_prompt.html">ex0807_prompt</a></li>
<li><a href="ch08/ex0808_ifloop.html">ex0808_ifloop</a></li>
<li><a href="ch08/ex0809_switch.html">ex0809_switch</a></li>
<li><a href="ch08/ex0810_datemath.html">ex0810_datemath</a></li>
<li><a href="ch08/ex0811_array.html">ex0811_array</a></li>
<li><a href="ch08/ex0812_arraymethod.html">ex0812_arraymethod</a></li>
<li><a href="ch08/ex0813_object.html">ex0813_object</a></li>
<li><a href="ch08/builtin.html">builtin</a></li>
<li><a href="ch08/method.html">method</a> </li>
</ol>
<h2>9장</h2>
<ol>
<li><a href="ch09/ex0901_domtree.html">ex0901_domtree</a></li>
<li><a href="ch09/ex0902_domaccess.html">ex0902_domacess</a></li>
<li><a href="ch09/ex0903_window.html">ex0903_window</a></li>
<li><a href="ch09/ex0904_navigator.html">ex0904_navigator</a></li>
<li><a href="ch09/ex0905_eventhandling.html">ex0905_eventhandling</a></li>
<li><a href="ch09/ex0906_formhandling.html">ex0906_formhandling</a></li>
<li><a href="ch09/ex0907_changecontents.html">ex0907_changecontents</a></li>
<li><a href="ch09/ex0908_cssaccess.html">ex0908_cssaccess</a></li>
<li><a href="ch09/ex0909_changebackground.html">ex0909_changebackground</a></li>
<li><a href="ch09/ex0910_changeposition.html">ex0910_changeposition</a></li>
<li><a href="ch09/ex0911_changevisibility.html">ex0911_changevisibility</a></li>
</ol>
<h2>10장</h2>
<ol>
<li><a href="ch10/ex1001_lineto.html">ex1001_lineto</a></li>
<li><a href="ch10/ex1002_rect.html">ex1002_rect</a></li>
<li><a href="ch10/ex1003_arc.html">ex1003_arc</a></li>
<li><a href="ch10/ex1004_curve.html">ex1004_curve</a></li>
<li><a href="ch10/ex1005_linedeco.html">ex1005_linedeco</a></li>
<li><a href="ch10/ex1006_shapedeco.html">ex1006_shapedeco</a></li>
<li><a href="ch10/ex1007_image.html">ex1007_image</a></li>
<li><a href="ch10/ex1008_text.html">ex1008_text</a></li>
<li><a href="ch10/ex1009_composite.html">ex1009_composite</a></li>
<li><a href="ch10/ex1010_transform.html">ex1010_transform</a></li>
<li><a href="ch10/ex1011_dataURL.html">ex1011_dataURL</a></li>
</ol>
<h2>11장</h2>
<ol>
<li><a href="ch11/ex1101_geolocation.html">위치정보 가져오기</a></li>
<li><a href="ch11/ex1102_geolocation_track.html">위치정보 추적하기</a> </li>
<li><a href="ch11/ex1103_multimedia_control.html">비디오/오디오 제어하기</a> </li>
<li><a href="ch11/ex1104_drag.html">요소 드래그하기</a> </li>
<li><a href="ch11/ex1105_drop.html">요소 드롭하기</a> </li>
<li><a href="ch11/ex1106_drag_drop.html">드래그앤드롭 사용하기</a> </li>
</ol>
<h2>12장</h2>
<ol>
<li><a href="ch12/ex1201_localstorage.html">로컬스토리지 사용하기</a></li>
<li><a href="ch12/ex1202_sessionstorage.html">세션스토리지 사용하기</a></li>
<li><a href="ch12/ex1203_storage_event.html">스토리지 이벤트</a></li>
<li><a href="ch12/ex1204_file_info.html">파일정보 가져오기</a></li>
<li><a href="ch12/ex1205_file_read.html">파일 읽기</a></li>
</ol>
<h2>13장</h2>
<ol>
<li><a href="ch13/main.html">예제</a></li>
</ol>
<h1>예제 실행하기</h1>
<ul>
<li>예제 중 일부는 보안 문제로 웹 서버 필요. 웹 서버 실행하기 항목을 실행 후 결과를 확인하면 됨.</li>
</ul>
<h2>웹 서버 실행하기</h2>
<h3>Window</h3>
<ul>
<li><a href="http://code.google.com/p/mongoose/">mongoose</a></li>
<li>
실행하기
<ol>
<li>프로그램 다운로드</li>
<li>실행파일 실행</li>
<li>웹 브라우저에서 http://localhost:8080 접근</li>
</ol>
</li>
<li>만약 컴퓨터의 다른 프로그램이 8080 포트를 사용하고 있는 경우에는 프로그램 설정에서 포트 번호 변경</li>
</ul>
<h3>Linux / Mac</h3>
<ul>
<li>
<p>다음 명령어 실행(python 필요)</p>
<blockquote>
<p>python -m SimpleHTTPServer</p>
</blockquote>
</li>
<li>
<p>포트 기본값은 8000임</p>
</li>
<li>
<p>만약 다른 포트로 변경하고자 하는 경우는 다음 명령어 실행 (예제는 8080 포트)</p>
<blockquote>
<p>python -m SimpleHTTPServer 8080</p>
</blockquote>
</li>
</ul>

</body>
</html>
<!-- This document was created with MarkdownPad, the Markdown editor for Windows (http://markdownpad.com) -->
About

No description, website, or topics provided.
Readme
Activity
0 stars
1 watching
0 forks
Report repository
Navigation Menu

Repository files navigation

About

Releases

Packages

Contributors

Languages

Folders and files

Latest commit

History

Repository files navigation

About

Resources

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages
