지금까지 HTML의 개념, 문법, 구조에 대해 전부 알아보았다.
그러나 앞선 웹 기초 공부 #1에서
HTML이 HyperText Markup Language일뿐 HyperText가 무엇인지 알아보진 않았다.
이번 글에서는 HTML에서 가장 중요한 HyperText가 무엇이고 어떻게 쓰는지 알아볼것이다.
───────────────────────────────────
HyperText
───────────────────────────────────
HyperText는 일반적인 텍스트와는 달리 단어, 문장등이 링크를 통하여 한 문서에서
다른 문서 즉시 접근이 가능하도록 하는 텍스트를 말한다.
예를 들면 다음과 같다.
이러한 HyperText는 여기저기서 쉽게 볼 수 있다.
이때 우리는 이러한 HyperText를 우리의 웹페이지에 적용하고 싶다는 충동을 느껴야 한다.
HTML의 태그 중 HyperText를 사용할 수 있도록 해주는 태그는 다음과 같다.
<a>
<a> 태그는 Anchor의 줄임말로 닻이라는 뜻을 가진다.
드넓은 바다와 같은 웹에서 사용자라는 배가 정박할 수 있도록 좌표를 가리키기 위한 태그
그것이 바로 <a> 태그이다.
그럼 <a> 태그는 어떻게 사용할까?
예시로 함께 알아보자.
나는 다음과 같은 주소를 링크로 걸어 볼 것이다.
https://lluvia-secu-study.tistory.com/
내 블로그의 메인 주소이다.
우선 검색을 한번 해보자
나는 다음과 같이 검색 했다.
"HTML anchor link"
그럼 이러한 결과를 찾을 수 있다.
<a href="#example">Example headline</a>
<a> 태그에 href라는 태그를 사용하는 것이 보이는데
이때 href 태그는 HyperText Reference의 약자이다.
예시를 따라 적용시켜 보자.
<!DOCTYPE html>
<html>
<head>
<title>WEB - main</title>
<meta charset="utf-8">
</head>
<body>
<ol>
<li>WEB</li>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
<a href="https://lluvia-secu-study.tistory.com/">내 블로그</a>
<h1>WEB</h1>
<img src="sample.jpg" width="500">
...
</body>
</html>
"내 블로그" 라는 텍스트에 링크가 걸린 모습을 확인 할 수 있다.
<a>태그의 속성에는 href말고 targrt이나 title 속성이 존재한다.
target 속성
target 성은 값이 따라 어떠한 방식으로 웹 페이지에 접근할 지를 결정한다.
| _self : 링크를 클릭한 해당 창에서 연다. |
| _blank : 링크를 새 창에서 연다. |
| _parent : 부모 창에서 연다. |
| _top : 전체 브라우저 창에서 가장 최상위 창으로 연다. |
title 속성
title 속성은 링크에 마우스 커서를 올려두었을때 도움말 설명을 다룬다.
<a title="#example">Example headline</a>
위와 같은 방식으로 사용한다.
이제 웹 페이지를 만드는 방법을 전부 알아보았다.
또한 웹 페이지끼리 서로 연결하는 방법 또한 알아보았다.
그럼 계획했던 프로젝트를 완성 시켜 보자.
<!DOCTYPE html>
<html>
<head>
<title>WEB - main</title>
<meta charset="utf-8">
</head>
<body>
<h1>WEB</h1>
<ol>
<li><a href="index.html">WEB</a></li>
<li><a href="HTML.html">HTML</a></li>
<li><a href="CSS.html">CSS</a></li>
<li><a href="JavaScript.html">JavaScript</a></li>
</ol>
<img src="sample.jpg" width="500">
<p>
<h3>웹이란?</h3>
월드 와이드 웹<strong>(World Wide Web)</strong>, 통칭 <u>웹</u>이나 <u>WWW</u>, <u>W3</u>라고 불리는 것은 인터넷을 사용하는 사용자들이 서로의 정보를 공유 할 수 있는 공간을 의미한다.
<br>이는 주로 인터넷과 같은 의미로 사용되는 경우가 대부분이지만 웹의 경우 인터넷에 존재하는 수많은 서비스 중 하나일 뿐이다.
<br>다만 앞서 말했듯 인터넷과 웹의 의미가 혼용되어 사용될 만큼 인터넷의 가장 큰 부분을 차지하는 서비스이다.
</p>
<p>
<h3>웹의 특징</h3>
웹은 인터넷 상에서 텍스트나 그림, 영상등과 같은 멀티미디어 정보를 하이퍼텍스트 방식으로 연결하여 제공한다.
<br><u>하이퍼텍스트<strong>(Hypertext)</strong></u>란 문서 내부에 또 다른 문서로 연결되는 참조를 넣어 웹 상에 존재하는 여러 문서끼리 서로 참조 할 수 있는 기술을 말한다.
이때 문서 내부에서 다른 문서로 연결되는 참조를 <u>하이퍼링크<strong>(HyperLink)</strong></u>라고 한다.
<br>이러한 하이퍼 텍스트 문서를 제작하는 가장 보편적인 언어를 HTML이라고 하며 누구나 사용가능하다. 또한 이렇게 작성된 웹 상의 문서에는 HTTP라는 프로토콜을 사용하여 접근 가능하다.
</p>
<p>
<h3>웹의 구성</h3>
웹에서는 위에서 언급한 HTML이라는 언어로 작성한 하이퍼텍스트 문서를 <u>웹 페이지<strong>(Web Page)</strong></u>라고 부른다.
<br>이러한 웹 페이지의 집합을 <u>웹 사이트<strong>(Web Site)</strong></u>라고 정의한다. 웹은 이렇게 하이퍼링크를 통해 연결되어있다.
<br>사용자가 웹 페이지에 참조된 하이퍼링크로 다른 웹 페이지에 이동하는 행위를 <u>웹 서핑<strong>(Web surfing)</strong></u>이라고 부르며,
<br>이때 사용자가 웹 페이지를 이용할때는 Chrome, Microsoft Edge, FireFox 등등의 <u>웹 브라우저<strong>(Web Browser)</strong></u>를 사용한다.
</p>
</body>
</html>index.html이라는 기준으로 각각의 페이지로 이동가능하게 구성하고
각각 HTML, CSS, JavaScript를 설명하는 HTML문서를 만들어보자.
이렇게 하면 완벽하게 동작하는 웹 사이트가 만들어진다.
https://lluvia030.github.io/Web-development_basic_study/
아직 CSS나 다른 것들을 배우지 않아 투박하고 별 기능이 없는 웹 사이트지만
앞서 말했듯 HTML은 몸, CSS는 외형, JavaScript등은 기능을 나타내기에
웹 사이트에서 HTML이라는 뼈대를 세울수 있게되었다고 생각한다.
다음에 올라올 2개정도의 글은 주제가 정해져있지 않다.
웹에 대한 내용이지만 공부 한대로 올릴예정이다.
긴글 읽어 주셔서 감사합니다.
<정보 출처>
생활코딩_WEB_WEB1:HTML 태그의 제왕
https://opentutorials.org/course/3084/18418
생활코딩_WEB_WEB1:웹사이트 완성
'보안 > 웹 해킹' 카테고리의 다른 글
| 웹 기초 공부 #6 - Node.js (0) | 2023.09.22 |
|---|---|
| 웹 기초 공부 #5 (0) | 2023.09.18 |
| 웹 기초 공부 #3 (0) | 2023.09.11 |
| 웹 기초 공부 #2 (0) | 2023.09.11 |
| 웹 기초 공부 #1 (0) | 2023.09.11 |
