개발의3단계
- 2. 시작
순서도
0 단계: 준비운동
1 단계: 선 긋기
2 단계: 채우기
3 단계: 제어하기
종료
- 5. 0단계: 준비 운동
구조를 만든다
계층, 서열, 타입 …
모양을 만든다
위치, 크기, 배경 …
움직임을 만든다
데이터, 속성, 화면전환 …
- 8. 1단계: 선 긋기
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>EYES TEST</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
Index.html <script type="text/javascript" language="javascript" src="main.js"></script>
</body>
</html>
style.css
main.js
- 9. 1단계: 선 긋기
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>EYES TEST</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
Index.html <script type="text/javascript" language="javascript" src="main.js"></script>
</body>
</html>
style.css
main.js
- 10. 1단계: 선 긋기
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>EYES TEST</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
Index.html <script type="text/javascript" language="javascript" src="main.js"></script>
</body>
</html>
style.css
main.js
- 11. 1단계: 선 긋기
Tag
<HTML></HTML>
<여는태그 속성="값"></닫는태그>
• HTML의 요소
• 열고 닫기가 중요
- 12. 1단계: 선 긋기
<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>EYES TEST</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<script type="text/javascript" language="javascript"
src="main.js"></script>
</body>
</html>
- 13. 1단계: 선 긋기
<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>EYES TEST</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<script type="text/javascript" language="javascript"
src="main.js"></script>
</body>
</html>
- 14. 1단계: 선 긋기
<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>EYES TEST</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<script type="text/javascript" language="javascript"
src="main.js"></script>
</body>
</html>
- 16. 1단계: 선 긋기
<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>EYES TEST</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="scene_main">
<ul class="menu">
<li><a href="#" class="test">EYE TEST</a></li>
Index.html <li><a href="#" class="training">EYE TRAINING</a></li>
<li><a href="#" class="info">EYE INFO</a></li>
</ul>
<h2><a href="#" class="handler_dev">information</a></h2>
<div class="pointer"><span></span></div>
<div class="preview"></div>
</div>
<script type="text/javascript" language="javascript" src="main.js "></script>
</body>
</html>
style.css main.js
- 17. 1단계: 선 긋기
<div Id="scene_main">
<ul class="menu">
<li><a href="#" class="test">EYE TEST</a></li>
<li><a href="#" class="training" >EYE TRAINING</a></li>
<li><a href="#" class="info">EYE INFO</a></li>
</ul>
<h2><a href="#" class="handler_dev">infomation</a></h2>
<div class="pointer"><span></span></div>
<div class="preview"></div>
</div>
- 18. 1단계: 선 긋기
<div Id="scene_main">
<ul class="menu">
<li><a href="#" class="test">EYE TEST</a></li>
<li><a href="#" class="training" >EYE TRAINING</a></li>
<li><a href="#" class="info">EYE INFO</a></li>
</ul>
<h2><a href="#" class="handler_dev">infomation</a></h2>
<div class="pointer"><span></span></div>
<div class="preview"></div>
</div>
- 19. 1단계: 선 긋기
<div Id="scene_main">
<ul class="menu">
<li><a href="#" class="test">EYE TEST</a></li>
<li><a href="#" class="training" >EYE TRAINING</a></li>
<li><a href="#" class="info">EYE INFO</a></li>
</ul>
<h2><a href="#" class="handler_dev">infomation</a></h2>
<div class="pointer"><span></span></div>
<div class="preview"></div>
</div>
- 20. 1단계: 선 긋기
<div Id="scene_main">
<ul class="menu">
<li><a href="#" class="test">EYE TEST</a></li>
<li><a href="#" class="training" >EYE TRAINING</a></li>
<li><a href="#" class="info">EYE INFO</a></li>
</ul>
<h2><a href="#" class="handler_dev">infomation</a></h2>
<div class="pointer"><span></span></div>
<div class="preview"></div>
</div>
- 23. 2단계: 채우기
Index.html ……
#scene_main { background: url(../images/en/main/bg_main.jpg) no-repeat; }
#scene_main > h2 > a { position: absolute; left: 184px; top: 546px; display: block; width: 68px;
height: 72px; text-indent: -9999px; background-image: url(../images/btn_info.png);
background-repeat: no-repeat;}
#scene_main > h2 > a.focus { background-position: 0 -72px; }
#scene_main > ul { position: absolute; left: 83px; top: 267px; width: 272px; height: 275px; }
#scene_main > ul > li { width: 250px; height: 64px; margin-top: 12px; background:
url(../images/btn.png) no-repeat; padding: 10px 11px 9px; }
#scene_main > ul > li.focus { background-position: 0 -83px; }
#scene_main > ul > li:first-child { margin-top: 0; }
#scene_main > ul > li > a { position: absolute; width: 250px; height: 64px; background-repeat:
no-repeat; text-indent: -9999px; }
style.css #scene_main > ul > li > a.test { background-image: url(../images/en/main/menu_1.png); }
#scene_main > ul > li > a.training { background-image: url(../images/en/main/menu_2.png); }
#scene_main > ul > li > a.info { background-image: url(../images/en/main/menu_3.png); }
#scene_main > ul > li > a.focus { background-position: 0 -64px; }
#scene_main > div.pointer { position: absolute; left: 406px; top: 292px; width: 24px; height:
208px; }
#scene_main > div.pointer > span { position: absolute; display: block; width: 24px; height: 30px;
background: url(../images/img_arrow.png) no-repeat; }
#scene_main > div.preview { position: absolute; left: 509px; top: 60px; width: 770px; height:
659px; }
main.js
- 24. 2단계: 채우기
Cascading Style Sheet
*.HTML <tag style="속성: 값"></tag>
*.CSS 선택자 { 속성: 값; }
• 엘리먼트(태그)의 스타일을 지정
• 순서가 중요
- 25. 2단계: 채우기
<div Id="scene_main">
<ul class="menu">
<li><a href="#" class="test">EYE TEST</a></li>
<li><a href="#" class="training" >EYE TRAINING</a></li>
<li><a href="#" class="info">EYE INFO</a></li>
#scene_main { background: url(bg_main.jpg) no-repeat; }
</ul>
<h2><a href="#" class="handler_dev">infomation</a></h2>
<div class="pointer"><span></span></div>
<div class="preview"></div>
</div>
- 26. 2단계: 채우기
<div Id="scene_main">
<ul class="menu">
<li><a href="#" class="test">EYE TEST</a></li>
#scene_main > div.preview {
<li><a href="#" class="training" >EYE TRAINING</a></li>
<li><aposition:class="info">EYE INFO</a></li> 60px;
href="#" absolute; left: 509px; top:
</ul> width: 770px; height: 659px; }
<h2><a href="#" class="handler_dev">infomation</a></h2>
<div class="pointer"><span></span></div>
<div class="preview"></div>
</div>
- 27. 2단계: 채우기
<div Id="scene_main">
<ul class="menu">
<li><a href="#" class="test">EYE TEST</a></li>
<li><a href="#" class="training" >EYE TRAINING</a></li>
<li><a href="#" class="info">EYE INFO</a></li>
</ul>
<h2><a href="#" class="handler_dev">infomation</a></h2>
<div class="pointer"><span></span></div>
<div class="preview"></div>
</div>
a.test { font-size: 10px; }
a.test { font-size: 12px; }
- 28. 2단계: 채우기
<div Id="scene_main">
<ul class="menu">
<li><a href="#" class="test">EYE TEST</a></li>
<li><a href="#" class="training" >EYE TRAINING</a></li>
<li><a href="#" class="info">EYE INFO</a></li>
</ul>
<h2><a href="#" class="handler_dev">infomation</a></h2>
<div class="pointer"><span></span></div>
<div class="preview"></div>
</div>
li > a.test { font-size: 10px; }
a.test { font-size: 12px; }
- 29. 2단계: 채우기
<div Id="scene_main">
<ul class="menu">
<li><a href="#" class="test" style="font-size: 14px;">EYE
TEST</a></li>
<li><a href="#" class="training" >EYE TRAINING</a></li>
<li><a href="#" class="info">EYE INFO</a></li>
</ul>
<h2><a href="#" class="handler_dev">infomation</a></h2>
<div class="pointer"><span></span></div>
<div class="preview"></div>
</div>
li > a.test { font-size: 10px; }
a.test { font-size: 12px; }
- 30. 2단계: 채우기
<div Id="scene_main">
<ul class="menu">
<li><a href="#" class="test" EYE TEST</a></li>
<li><a href="#" class="training" >EYE TRAINING</a></li>
<li><a href="#" class="info">EYE INFO</a></li>
</ul>
<h2><a href="#" class="handler_dev">infomation</a></h2>
<div class="pointer"><span></span></div>
<div class="preview"></div>
</div>
a.test { }
a.test.focus {background-position: bottom; }
- 31. 2단계: 채우기
<div Id="scene_main">
<ul class="menu">
<li><a href="#" class="test focus" EYE TEST</a></li>
<li><a href="#" class="training" >EYE TRAINING</a></li>
<li><a href="#" class="info">EYE INFO</a></li>
</ul>
<h2><a href="#" class="handler_dev">infomation</a></h2>
<div class="pointer"><span></span></div>
<div class="preview"></div>
</div>
a.test { }
a.test.focus {background-position: bottom; }