HTML5 기초 | 문서의 구조, 앵커 태그 a

HTML5 문서의 구조

HTML5의 문서의 구조를 살펴보자.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5 튜토리얼</title>
</head>
<body>
    
</body>
</html>

말 그대로 Head는 머리 Body는 몸통이라 생각하면 된다. Body는 사용자가 보는 컨텐츠의 구조를 만들고, Head는 Body라는 컨텐츠에 대한 메타 정보가 들어간다.

* HTML5 문서의 구조

태그	내용
<!DOCTYPE html>	이 문서는 HTML5임을 웹브라우저에게 알린다.
<html lang="ko">	구글같은 검색엔진이 이 웹페이지를 탐색할 때 언어를 인식한다. 'ko' 는 한국이고 'en'은 미국이다. 아무래도 국가 코드가 인식된 나라에서 검색될 활률이 높다. head 태그와 body 태그가 포함된다.
<head>	<head> 태그에는 문서에 대한 여러가지 메타 정보가 들어간다. 사용자에게는 보여지지 않는 부분이나 중요한 CSS나 JS 스크립트가 들어간다.
<body>	<body>는 사용자가 보는 콘텐츠를 구성한다. 여기에는 원본 텍스트와 마크업 태그 (h1 태그 같은 것들)가 들어간다.

* head의 내부 태그

태그	내용
meta	메타 태그는 웹페이지에 대한 여러 정보를 담아서 전송한다. 문자 인코딩, meta description, 모바일기기 인식 등 다양한 역할을 한다.
title	웹페이지의 제목. 브라우저의 타이틀바에 출력되는 문자열
script	JS같은 스크립트를 추가한다.
style	CSS 스타일시트를 추가한다.

이 외에도 다양한 태그를 넣을 수 있다.

VSC 코드로 html:5 로 문서를 생성하면 아래와 같은 HTML 파일이 만들어진다. UTF-8은 유니코드를 말한다. 최근엔 UTF-8로 한글이 잘 나오기 때문에 변경할 필요없다.

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5 튜토리얼</title>
</head>

viewport는 모바일 기기 설정에 관련된 태그인데 이 포스트에서는 다루지 않는다. 모바일 화면 디자인에 구글 검색을 활용한다.

title 은 웹페이지의 내용에 따라 변경할 수 있다.

*앵커태그<a>

앵커 태그는 HTML 문서의 본질적인 태그다. 앵커는 Anchor 닻이라는 뜻이 있다. 왜 닻이냐면 초기 인터넷을 개발하고 이용하던 사람들은 흔히 인터넷을 정보의 바다에 비유했다. 손만 뻗치면 정보를 얻을 수 있기 때문이다.

HTML을 이용하는 사용자는 마치 거친 바다의 선장같이 느껴진다. 닻을 올려라~! 는 구호처럼 앵커태그는 사용자를 미지의 세계,,, 인 목적지로 데려다 준다. 이때 목적지에 대한 정보를 담았다고 해서 링크라고도 부른다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5 튜토리얼</title>
</head>
<body>
    <h1>하이퍼텍스트의 항해를 출발하다</h1>
    <a href ="https://www.naver.com"> 네이버로 출발한다! 닻을 올려라!</a><br/><hr/>
    <a href ="https://www.daum.net"> 다음으로 출발한다! 닻을 올려라!</a>
</body>
</html>

망망대해를 표류하는 것 같지만 이렇게 앵커 태그를 설정해놓으면 무언가 구심점이 생기는 기분이 든다. 하이퍼 텍스트(Hyper Text)라는 말의 뜻은 심오하다. 스타트랙 같은 영화에서 Hyper Jump 를 하며 갑자기 먼거리를 점프하는 것과 같은 기능. 즉 순간이동,워프기능 이 Hyper Text의 핵심이다.

기존의 책은 Hyper Text가 아니었다. 그 책을 읽기 위해서는 내가 그 차를 타고 언덕을 넘어서 직접 가야했다. Hyper Text는 아니다. 순간이동한다. 이것이 인류의 정보혁명을 이끌고 있다. 인터넷이 없었다면 오늘날 IT글로벌 기업들은 존재하지 않았다. 구글,페이스북,아마존,넥플릭스 한국에는 카카오, 엔씨소프트, 네이버 모두 동일하다.

인터넷으로 비즈니스를 해서 돈을 번건 그들이지만 사람들은 자발적으로 인터넷 커뮤니티에 참여했다. 하이퍼 텍스트 때문이다. 그렇기에 인터넷의 주인은 여전히 커뮤니티에 참여한 사람들이라고 믿는다.

요새 구글이 인공지능으로 세상을 지배한다고 말이 많다. 구글의 빅데이터에는 미국 FBI 보다 많은 정보가 들어있다고 한다.

앵커 Anchor 태그에는 그 흔적이 고스란히 담겨있다.

 <a href="destination 목적지">링크</a>

a는 anchor 의 줄인 단어다. 화끈하게 한글자로 줄였다.

href는 hypertext reference 의 줄임으로 '하이퍼텍스트 참조' 로 해석할 수 있다. 찾아가겠다는 말이다.

수십년동안 a 태그는 수백 수천억번 클릭되며 인터넷을 돌아다녔을 것이다.

과거에는 웹상에서 click bait (미끼를 던지듯이 링크 클릭을 유도하는 것)이 많이 이루어 졌는데 지금은 어느정도 정화된 것 같다. 근데 최근에는 Youtuber들의 click bait로 바뀐 것 같다. 소위 어그로라고 하는데, 개인적으로 좋게 보지는 않지만 상업적인 유튜브를 운영하는 것이라면 이해할 수 있다. 다만 지나친 click bait 경쟁이 시청자들에게 어떤 영향을 미칠지는 생각해 볼 필요가 있다.

*내부 이동하는 앵커

앵커를 사용하여 내부에 이동을 시킬수가 있다.

<body>
    <h1>내부 문서로 이동하는 앵커</h1>
    <a href ="#a2"> Anchor 2</a><br/><hr/>
    <a href ="#a3"> Anchor 3</a>
    
    <h2 id="a2">Anchor 2</h2>
    
    <h2 id="a3">Anchor 3</h2>
    
</body>

h2 태그에 id 속성을 주면 일종의 주소가 된다. Anchor 태그에게 이 주소는 #아이디 의 형식으로 주면 된다.

이렇게 외부 뿐만 아니라 내부에서도 이동할 수 있다. 이것으로 전자 책처럼 하이퍼 인덱스를 만들 수 있다.

자신이 자주 가는 웹사이트를 목적지로 앵커 태그를 작성해 보자. 그러면 빠르게 이해된다.

*W3school 의 HTML 튜토리얼 링크

https://www.w3schools.com/html/html_intro.asp

Introduction to HTML

HTML Introduction HTML is the standard markup language for creating Web pages. What is HTML? HTML stands for Hyper Text Markup Language HTML is the standard markup language for creating Web pages HTML describes the structure of a Web page HTML consists of

www.w3schools.com