Web 1.0과 HTML <a> Element

1. World Wide Web 1.0

---

웹이 탄생한 1990년부터 웹 2.0이 유행하기 전인 약 2004년까지의 구간을 웹 1.0이라고 말합니다.

 

• Web 1.0은 Read Only 즉, 읽기 전용이었습니다.
• 제작자(저자)가 문서를 작성하면 소비자(독자)는 그냥 문서를 보는 정도의 역할이 전부였습니다.
• 즉 독자의 input에 따른 저자의 ouput -> 상호작용이 불가능했습니다. -> 이후에 JavaScript의 등장으로 상호작용이 가능해졌습니다.

---

2. <a> 태그

그렇다면 Web 1.0과 a 태그가 무슨 상관이 있을까요? Web 1.0은 읽기 전용이라고 서론에서 언급했었는데요. 그렇다면, 신문의 경우 종이를 넘기면 되고, 책의 경우에도 종이를 넘기면 되지만, 웹 브라우저로서의 문서는 페이지를 어떻게 이동했을까요? 스크롤을 무한대로 내렸을까요?.. 아닙니다 예상하신 대로 페이지의 이동을 하이퍼텍스트라는 링크 형태의 텍스트를 만들어 클릭하면 문서가 변경되게 구현하였습니다. 이러한 기능을 HTML로 구현하고자 할 때 a 태그를 사용하였습니다.

 

3. 사용 예시

<a href="https://www.naver.com">네이버</a>

 

 

아래의 예시와 같이 통신 프로토콜인 http://(https://)를 붙여주지 않으면 동작하지 않습니다.

<a href="www.naver.com">네이버</a>

 

 

 

a 태그는 https:// 등 통신 프로토콜을 통한 연결이 아니더라도, 기본적으로 해당 컨텐츠로 이동합니다. 

(./ 는 현재 위치의 디렉터리를 의미하고 free.jpeg, text.txt는 현재 웹서버에 보관되어 있는 파일입니다.)

<a href="./free.jpeg">무료 이미지</a>
<a href="./text.txt">테스트 텍스트</a>

 

 

download 속성을 사용하면, a 태그를 클릭 시 해당 컨텐츠로 이동하는 것이 아닌, 다운로드를 할 수 있고, 파일명을 지정할 수 있고, 파일의 확장자를 지정할 수 있으며 지정하지 않을 시 원본 확장자를 따라갑니다.

<a href="./free.jpeg" download="무료 이미지.png">무료 이미지</a>
<a href="./text.txt" download="테스트 글">테스트 텍스트</a>
<a href="./my.html" download="my.html">내가 만든 html</a>

다운로드 된 파일들 (정상 작동)

 

 

이때 중요한 점은 해당 파일을 가지고 있는 경우 (./ ../ 등으로 위치 지정한 경우)에만 해당 파일이 다운로드되고 https://... 과 같은 주소로 href를 연결한다면 여전히 파일 이동으로 동작합니다. 즉 a 태그를 무분별하게 사용하여 자료를 다운로드하지는 못합니다.

<a href="https://slp-statics.astockcdn.net/static_assets/staging/22spring/free/browse-vector-categories-collections/Card4_399895799.jpg?width=580" download="무료 이미지.png">무료 이미지</a>
<a href="https://www.naver.com" download="my.html">네이버의 html?</a>