brunch

You can make anything
by writing

C.S.Lewis

by 루크의 IT이야기 Jul 03. 2020

HTML 태그의 핵심, A 태그

이제 홈페이지의 첫 번째 페이지를 만들었으니 홈페이지를 방문하는 유저들이 자료를 다운로드 받을 수 있게 해주는 기능을 만들어야 한다. 이렇게 유저들이 자료를 다운로드 받을 수 있게 해주는 기능이 HTML 의 핵심 기능인 A 태그이다.

<a href="링크주소">링크명</a>

자 그럼 바로 실전 투입, 다시 메모장을 열어보자.

<html>
<head>
<meta charset=”utf-8”>
<title>게임세상</title>
</head>
<body>
게임의 모든것 게임세상

<a href="스타크래프트매뉴얼.zip">스타크래프트 매뉴얼</a>
<a href="디아블로매뉴얼,zip">디아블로 매뉴얼 </a>

</body>
</html>

위와 같은 HTML 태그를 이용하여 HTML 문서를 만들고 해당 문서를 웹브라우저를 통해 열면 아래와 같은 화면이 보이게 되고 유저들은 해당 링크를 클릭하게 되면 자료 를 다운로드 받게 된다.

만들어진 문서를 다시 웹 서버에 FTP를 이용하여업로드하고 브라우저에서 해당 계정 의 도메인을 입력하게 되면 아래와 같이 같은 내용의 누구나 접속할수 있는 화면이 보 이게 된다

단, 몇 개의 태그만을 이용해서 이렇게 홈페이지를 만들었다. 이게 바로 홈페이지다. 너무 부족하다고 생각되는가? 하지만 게임세상은 이렇게 몇개의 태그만으로 시작되었다.

A 태그를 활용한 홈페이지 용량 늘리기

자료가 많다보면 무료 홈페이지에서 아무리 많은 공간을 제공한다고 해도 항상 공간의 부족함을 경험하게 된다. 이러한 문제점을 해결하기 위해 별도의 비용없이 HTML 태그 만을 이용하여 공간을 조금 더 확보해 보도록 하자. 다행스럽게도 국내의 모든 사이트 들은 회원관리를 통합하여 운영하지 않기 때문에 각 무료 계정 서비스에서 자신의 계정들을 만들수 있다.

그럼 우리가 기존에 가입한 무료 호스팅 서비스를 서로 연결해보자

내가 가입한 무료 계정의 전체 제공되는 용량을 합쳐보면 약 2,100Mbyte의 용량이 된 다. 용량 확보를 위해 모든 무료 계정사이트에 가입하자. 자 그럼, 이렇게 생성된 계정을 통해 어떻게 용량을 늘리게 되는 걸까?

일단 각각의 계정에 자료를 모두 업로드 하게 되면 해당 파일명에 대한 절대 경로는 아래처럼 될 것이다.

자료 1의 URL: http://gamess.woobi.co.kr/자료1.zip
자료 2의 URL: http://gamess.besaba.com/자료2.zip

각 계정에 업로드된 자료를 A 태그를 이용하여 적용하면 아래와 같은 HTML 코드가 된다.

<a href="http://gamess.woobi.co.kr/자료1.zip">자료1</a>
<a href="http://gamess.besaba.com/ 자료2.zip">자료2</a>

자 그럼 기존에 만들어 놓은 코드를 추가해보자. 다시 메모장을 열고 아래와 같은 코드 를 입력해보자

<html>
<head>
<title>게임세상</title>
</head>
<body>
게임의 모든것 게임세상

<a href="스타크래프트매뉴얼.zip">스타크래프트 매뉴얼</a>
<a href="디아블로매뉴얼,zip">디아블로 매뉴얼 </a>


<a href="http://gamess.woobi.co.kr/자료1.zip">자료1</a>
<a href="http://gamess.besaba.com/자료2.zip">자료2</a>

</body>
</html>

위의 내용을 HTML로 변환해서 서버에 업로드를 하면 아래와 보이게 된다.

실제 자료는 gamess.woobi.co.kr에 존재하나 사용자는 gamess.besabo.com에서 다운 로드 받는것처럼 느끼게 된다. 홈페이지를 오픈하게 되면 메인이 되는 무료 홈페이지만을 노출하고 (게임세상의 경우 최초 홈페이지 도메인은 http://my.netian.com/~hahoo ) 나머지 자료 제공을 위한 무 료 홈페이지의 공간은 메인 홈페이지를 위한 자료실로만 이용을 하는 것이다. 유저들은 my.netain.com/~hahoo를 통해 홈페이지를 처음 방문하게 되지만 실제 자료들은 타 무료 홈페이지내에 존재하게 되고 이를 다운로드 받게 되는 방식이다. 이렇게 메인 홈페이지를 두고 서브 홈페이지를 자료실로만 사용하게 되면 유저들은 하 나의 홈페이지를 통해 자료를 제공받는 것처럼 느끼게 된다.

실제 동작되는 내용을 좀더 풀어보자면 스타크래프트 매뉴얼과 디아블로의 매뉴얼은 메인이 되는무료 홈페이지에 존재하게 되고 자료 1~4의 실제 자료는 내가 새롭게 가입 한 무료 홈페이지 1~4의 서버에 자료가 존재하게 된다.

실제로 홈페이지를 구성하는 자료는 5개의 서비스에 존재하게 되지만 유저들은 하나의 홈페이지에서 모든 자료가 제 공되는 것처럼 보이게 된다. 이와 같이 A 태그를 활용하여 자료를 연결하는 방법은 각각의 자료들을 다른 계정의 웹 사이트에 업데이트를 한 후 각 자료를 A 태그를 이용하여 하나로 묶게 되고, 다양한 무 료 계정을 통해 사이트의 전체적인 용량을 증대시키는 방법이다.

필자의 경우도 과거 개인 홈페이지 계정의 용량이 부족하여 여러 개의 무료 홈페이지 내 자료를 업로드 하고 이를 통해 어느 정도 용량을 확보하여 이를 유저들에게 제공하 였다. 이러한 방법의 가장 큰 단점은 각 무료 계정 사이트에 대한 용량 및 일일 제한 전송량 등을 각 무료 홈페이지의 운영 정책을 맞춰 일일이 관리해 줘야 한다는 단점이 있다. 하지만 가장 큰 장점은 바로 무료로 홈페이지 용량을 늘릴 수 있다는 것이다.

keyword