커뮤니티

고용노동부, 산업인력공단과 함께하는 강원도 유일한 기업중심 IT전문교육기관 ICT융합캠퍼스만의 특별한교육입니다.
공인 IT숙련기술인의 다양한 접근방법으로 전문가다운 실무교육을 받을 수 있습니다.

Category

교육강좌

WEB 웹 애플리케이션 만들기 - HTML 실습

페이지 정보

작성자 관리자 댓글 0건 조회 6,978회 작성일 20-06-08 11:37

본문

HTML 실습

모델링을 HTML로 만들기

의미론적인 웹

 사이트 완성

실습환경으로 codeanywhere를 이용하고 계신 분은 링크가 작동하지 않는 문제가 있을 수 있습니다. 다음 영상을 참고하시면 문제를 해결할 수 있습니다. https://youtu.be/A67-fpyujzQ

index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<header>
<h1><a href="http://localhost/">JavaScript</a></h1>
</header>
<nav>
<ol>
<li><a href="http://localhost/page_html.html">JavaScript란?</a></li>
<li><a href="http://localhost/page_vc.html">변수와 상수</a></li>
<li><a href="http://localhost/page_op.html">연산자</a></li>
</ol>
</nav>
</body>
</html>
만약 포트 번호가 8080이라면 (접속 할 때 localhost:8080으로 접속한다면) 링크를 아래와 같이 작성하셔야 합니다. 
1
2
3
<li><a href="http://localhost:8080/page_html.html">JavaScript란?</a></li>
<li><a href="http://localhost:8080/page_vc.html">변수와 상수</a></li>
<li><a href="http://localhost:8080/page_op.html">연산자</a></li>

page_html.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<header>
<h1><a href="http://localhost/">JavaScript</a></h1>
</header>
<nav>
<ol>
<li><a href="http://localhost/page_html.html">JavaScript란?</a></li>
<li><a href="http://localhost/page_vc.html">변수와 상수</a></li>
<li><a href="http://localhost/page_op.html">연산자</a></li>
</ol>
</nav>
<article>
<h2>JavaScript란?</h2>
JavaScript는 웹페이지를 프로그래밍적으로 제어하는 언어입니다.
</article>
</body>
</html>

page_vc.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<header>
<h1><a href="http://localhost/">JavaScript</a></h1>
</header>
<nav>
<ol>
<li><a href="http://localhost/page_html.html">JavaScript란?</a></li>
<li><a href="http://localhost/page_vc.html">변수와 상수</a></li>
<li><a href="http://localhost/page_op.html">연산자</a></li>
</ol>
</nav>
<article>
<h2>변수와 상수</h2>
변수는 바뀔 수 있는 값이고, 상수는 바뀌지 않는 값입니다.
</article>
</body>
</html>

page_op.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<header>
<h1><a href="http://localhost/">JavaScript</a></h1>
</header>
<nav>
<ol>
<li><a href="http://localhost/page_html.html">JavaScript란?</a></li>
<li><a href="http://localhost/page_vc.html">변수와 상수</a></li>
<li><a href="http://localhost/page_op.html">연산자</a></li>
</ol>
</nav>
<article>
<h2>연산자</h2>
계산을 할 때 사용되는 것입니다.
</article>
</body>
</html>

Sound of coding 

복습 하실 수 있게 뮤직 비디오로 예제를 만들었습니다. 멍 때리고 싶은 때 틀어놓고 보셔요~ 전체 뮤직 비디오 보러가기

쉬어가기

소스코드

 github

참고

여기까지 공부한 분들께 드리는 편지 (코딩야학 2기에게 보낸 편지)

  • 트위터로 보내기
  • 페이스북으로 보내기
  • 구글플러스로 보내기

답변목록

등록된 답변이 없습니다.