웹페이지에서 웹사이트로

<a> 태그와 하이퍼링크(hyperlink)

저번시간에 이어, <a> 태그에 대해 얘기해보겠습니다.

<a> 태그는 웹페이지들을 서로 '연결'해주는 역할을 하는데요.
저번 시간엔 이 기술이 '하이퍼링크'라고 언급을 했습니다.

이름만 들어도 어렵다는 생각이 드시나요? ㅎㅎ
하이퍼링크를 구현한 기술은 어려울지 모르겠습니다.
하지만, <a> 태그는 다른 HTML 태그들처럼 사용법이 매우 간단한데요.

이번 장에서는 <a> 태그로 웹페이지를 연결해 웹사이트를 만들어보도록 하겠습니다.

<a> 태그를 사용해봅시다

웹페이지를 서로 연결하려면 2가지 이상의 웹페이지가 있어야 하는데요.
<a> 태그의 사용법을 배울 수 있는 간단한 예제를 살펴볼까요? :D

예제로 사용할 2개의 html 문서입니다.
각 HTML 파일이 어떻게 연결되어있는지 코드와 함께 보시죠.

'index.html'의 코드는 다음과 같습니다.

예제 코드_1(index.html)

<!DOCTYPE html>
<html>
  <head>
    <title>index</title>
  </head>

  <body>
    <!-- 'nextPage.html'과 연결 -->
    <a href="nextPage.html">'nextPage'로 이동</a>
  </body>
</html>

위 코드를 보면, <a> 태그 내부에 'href'라는 속성이 있습니다.
href는 'hyperlink reference(하이퍼링크 참조)'라는 의미인데요.
href=""의 큰따옴표("") 안에 연결할 웹페이지의 주소를 적어주면 됩니다.

여기서는 'index.html'과 'nextPage.html'을 연결할 것이기 때문에,
'nextPage.html'의 주소, 즉 html 파일의 경로를 적어주시면 됩니다.

서로 같은 폴더에 저장되어있으니, '상대 경로'로 적어주었습니다.

아래는 'nextPage.html'의 코드입니다.

예제 코드_2(nextPage.html)

<!DOCTYPE html>
<html>
  <head>
    <title>index</title>
  </head>

  <body>
    <!-- 'index.html'과 연결 -->
    <a href="index.html">'index'로 이동</a>
  </body>
</html>

여기서도 마찬가지로 다시 'index.html'과 연결이 생기도록 해당 경로를 적어주었습니다.
웹브라우저에서 실행한 결과를 볼까요?

실행 결과

<a> 태그를 이용한 웹사이트 만들기

<a>태그의 사용법을 알아보았는데요.
위의 예제만으로는 뭔가 부족한 느낌이 드시나요? ㅎㅎ

그렇다면, 지금까지 배워온 지식을 활용해 웹사이트를 만들어보겠습니다.
스스로 표현하고 싶은 주제를 정해서 실습해본다면 공부에 도움이 될 거에요.

저는 다음과 같은 연결 구조를 갖는 웹사이트를 만들어 보았습니다.

예제 웹사이트의 구조

그럼, 위와 같은 구조를 가진 웹사이트를 봐야겠죠? :D

지금까지의 내용을 잘 따라오셨다면 이해하는데 어려움이 없을 것 같아서 설명은 생략했습니다.
코드가 궁금하신 분들을 위해 코드를 접어두었습니다.
(예제 코드는 코드 버튼을 클릭하시면 나오니, 확인해보세요!)

index.html 실행 결과

index.html 코드

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="web, HTML, tag">
    <title>Main Page</title>
  </head>

  <body>
  <img src="index_image.jpg" width="50%">

  <ol>
    <li><a href="web.html">Web</a></li>
    <li><a href="html editor.html">html editor</a></li>
    <li><a href="html tag.html">html tag</a></li>
  </ol>

  <h1>Web 초보가 알려주는 HTML 튜토리얼!</h1>
  <h2>Hello Blog!</h2>
  <p>
    안녕하세요~ kwiskey입니다.<br>
    공부한 내용을 정리하고 복습을 해볼 겸 블로그를 시작하게 되었습니다.^^<br>
    <br>
    이번에 이고잉(egoing)님의 '생활코딩'을 통해 배우고 있는 웹과 HTML을 주제로 업로드할 예정인데요.<br>
    제가 생활코딩을 통해 배웠던 것 처럼 강의 형식으로 재구성해서 진행해볼 생각입니다.
  </p>
  </body>
</html>

web.html 실행 결과

web.html 코드

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="web, definition, Berners-Lee">
    <title>Web</title>
  </head>

  <body>
    <h1><a href="index.html">Main Page</a></h1>
    <h1>웹(Web)이란?</h1>
    <img src="web_image.jpg" width="50%">
    <h2>웹의 정의</h2>
    <p>
      1960년 인터넷이 세상에 등장한 이후, 20년이 지난 1980년. <br>
      <strong>'팀 버너스 리(Tim Berners-Lee)'</strong>라는 영국의 소프트웨어 공학자에 의해 만들어진 <strong>'웹'</strong>은,<br>
      <strong>인터넷에 연결된 컴퓨터를 통해 사람들이 정보를 공유할 수 있게 고안된 전 세계적인 정보 공간</strong>을 말합니다.<br>
      거미줄처럼 엮인 공간이라는 뜻의 월드 와이드 웹(World Wide Web)을 줄여서 웹(Web)이라고 부르죠.
    </p>
  </body>
</html>

html editor.html 실행 결과

html editor.html 코드

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="HTML, editor, GitHub, Atom, IDE">
    <title>HTML Editor</title>
  </head>

  <body>
    <h1><a href="index.html">Main Page</a></h1>
    <h1>HTML을 배우기 전에 해야 할 일</h1>
    <img src="html editor_image.png" width="20%">
    <h2>HTML 에디터 설치하기</h2>
    <p>
      우리는 GitHub에서 개발하고 무료로 배포하고 있는 'Atom 에디터'를 사용해볼 건데요.<br>
      <br>
      HTML 편집기능을 제공하는 IDE(통합 개발 환경)은 여러 종류가 있으니,<br>
      본인이 선호하는 HTML 에디터가 있다면 기호에 맞는 에디터를 사용하셔도 무방합니다.
    </p>
  </body>
</html>

html tag.html 실행 결과

html tag.html 코드

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="HTML, tag">
    <title>HTML Tag</title>
  </head>

  <body>
    <h1><a href="index.html">Main Page</a></h1>
    <h1>HTML의 Tag에 대해 배워봅시다</h1>
    <img src="html tag_image.jpg" width="30%">
    <h2>HTML 태그란 무엇인가? </h2>
    <p>
      태그는 일반적으로 <strong>시작태그(opening tag)</strong>와 <strong>종료태그(closing tag)</strong>의 한 쌍으로 <strong>"< >"</strong>, <strong>"</>"</strong>의 형식을 취합니다.<br>
      <br>
      HTML 태그는 <strong>1. 태그 사이에 오는 문자열의 디자인이나 기능에 변화를 주는 역할</strong>을 하구요.<br>
      HTML 태그는 <strong>2. 웹페이지가 특정한 기능을 사용할 수 있게 도와주는 역할</strong>을 합니다.
    </p>
  </body>
</html>

어떤가요, 웹사이트 만들기 어렵진 않았나요? ㅎㅎ
우리가 일상적으로 방문하는 웹사이트들은 이와 같은 하이퍼링크로 연결되어 있습니다.
물론 지금보다 더 다양한 연결이 존재하겠죠.

인터넷 연결이 필요해

아쉽게도, 이렇게 만들어진 웹사이트를 웹사이트라고 부르기에는 아직 부족한 점이 있는데요.
바로, 이 웹사이트를 타인에게 보여줄 수 없다는 것입니다.

브라우저에서 지금까지 만들어온 웹사이트의 주소창을 한번 살펴보시죠.

'https://'로 시작하는 것이 아닌 'file:///'로 시작하는 것을 볼 수 있습니다.

이건 현재 웹사이트가 인터넷에 연결되어있는 것이 아닌,
컴퓨터의 특정 경로에 있는 웹 문서(HTML)를 단순히 불러와서 출력했다는 걸 의미합니다.
쉽게 말해서, 현재 컴퓨터 내에서만 볼 수 있는 사이트라는 거죠.
기억하시나요? 웹은 인터넷을 이용하는 하나의 서비스 입니다.
진짜 '웹'사이트라고 한다면 인터넷에 연결되어 타인에게 제공될 수 있어야 하겠죠.

이런 인터넷 연결을 도와주는 것이 바로 '서버(server)'인데요.
다음시간에는 웹사이트를 지탱해주는 서버에 대해서 알아보도록 하겠습니다.

이번에도 다음 시간으로 넘어가기 전에 필요한 준비물이 있는데요.
여기까지 배운 지식을 이용해 나만의 웹사이트를 만들어 보는 것입니다. ㅎㅎ 서버를 배우면서 유용하게 사용할 수 있을 거에요.

파이팅입니다. ^^

피드백은 언제나 환영합니다.
감사합니다.

kwiskey

저작자표시 비영리 동일조건

'WEB > HTML' 카테고리의 다른 글

[8장_] GitHub로 웹 호스팅 이용하기 (0)	2019.12.17
[7장_] 서버와 클라이언트 (0)	2019.12.16
[5장_] 자주 사용되는 HTML 태그_2 (0)	2019.12.14
[4장_] 자주사용되는 HTML 태그_1 (0)	2019.12.13
[3장_] HTML 태그들에 대해 알아봅시다 (0)	2019.12.12

Kwiskey's Home

[6장_] 웹페이지에서 웹사이트가 되는 법

웹페이지에서 웹사이트로

<a> 태그와 하이퍼링크(hyperlink)

<a> 태그를 사용해봅시다

<a> 태그를 이용한 웹사이트 만들기

인터넷 연결이 필요해

'WEB > HTML' 카테고리의 다른 글

티스토리툴바

[6장_] 웹페이지에서 웹사이트가 되는 법

웹페이지에서 웹사이트로

<a> 태그와 하이퍼링크(hyperlink)

<a> 태그를 사용해봅시다

<a> 태그를 이용한 웹사이트 만들기

인터넷 연결이 필요해

'WEB > HTML' 카테고리의 다른 글

'WEB/HTML' Related Articles

티스토리툴바