1. 하이퍼링크(HyperLink)
하이퍼텍스트는 텍스트에 인터넷 주소를 연결(링크)해 클릭시 해당 웹 사이트로 이동할 수 있게 해주는 기능이다.
<a>태그를 이용하고 속성은href(HyperText Reference)를 사용합니다. 추가로 새 탭에 여는 속성target = "_blank"를 추가해본다.
<a href="https://www.w3.org/TR/html5/", target="_blank"> HyperText Makeup Language (HTML)</a> 2. 웹사이트(Web Site) 만들기
여러개의 웹 페이지 그룹을 웹 사이트(Web Site)라고 한다.
Index.html, 1_HTML.html, 2_CSS.html, 3_JS.html 파일 4개를 만든다.
그리고 저장경로가 같은 곳에 저장한다. 코드는 아래와 같이 작성해본다.
<!---- file : Index.html ---->
<!doctype html>
<html>
<head>
<title>WEB1 - Home</title>
<meta charset="utf-8">
</head>
<body>
<h1><a href="index.html">Home</a></h1>
<ol>
<li><a href="1_HTML.html">HTML</a></li>
<li><a href="2_CSS.html">CSS</a></li>
<li><a href="3_JS.html">JavaScript</a></li>
</ol>
<h2>HOME</h2>
<p>홈페이지에 오신것을 환영합니다!!</p>
</body>
</html><!---- file : 1_HTML.html ---->
<!doctype html>
<html>
<head>
<title>WEB1 - Home</title>
<meta charset="utf-8">
</head>
<body>
<h1><a href="index.html">Home</a></h1>
<ol>
<li><a href="1_HTML.html">HTML</a></li>
<li><a href="2_CSS.html">CSS</a></li>
<li><a href="3_JS.html">JavaScript</a></li>
</ol>
<h2>HTML</h2>
<p><a href="https://www.w3.org/TR/html5/" target="_blank">Hypertext Markup Language (HTML)</p>
</body>
</html><!---- 2_CSS.html ---->
<!doctype html>
<html>
<head>
<title>WEB1 - Home</title>
<meta charset="utf-8">
</head>
<body>
<h1><a href="index.html">Home</a></h1>
<ol>
<li><a href="1_HTML.html">HTML</a></li>
<li><a href="2_CSS.html">CSS</a></li>
<li><a href="3_JS.html">JavaScript</a></li>
</ol>
<h2>CSS</h2>
<p><a href="https://ko.wikipedia.org/wiki/%EC%A2%85%EC%86%8D%ED%98%95_%EC%8B%9C%ED%8A%B8"
target="_blank"> CSS위키백과</a></p>
</body>
</html><!---- 3_JS.html ---->
<!doctype html>
<html>
<head>
<title>WEB1 - Home</title>
<meta charset="utf-8">
</head>
<body>
<h1><a href="index.html">Home</a></h1>
<ol>
<li><a href="1_HTML.html">HTML</a></li>
<li><a href="2_CSS.html">CSS</a></li>
<li><a href="3_JS.html">JavaScript</a></li>
</ol>
<h2>JavaScript</h2>
<p><a href="https://ko.wikipedia.org/wiki/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8"
target="_blank">JavaScript위키백과</a></p>
</body>
</html>새로운 것을 배운다는게 시작하기 항상 두려웠는데, 막상 시작하고 보면 새로운 것을 배우고 블로그에 정리 요약해서 글을 쓸 수록 재미가 있네요!
두려워하지 마세요! 할 수 있습니다! 자기 자신을 믿으세요 ^^
프론트엔드 개발자