HTML 완벽 가이드 : for Beginners

개요

이 문서에서는 HTML의 전반적인 것에 대해 다룹니다. 웹 프론트엔드 개발에 대한 공부를 시작하시는 분들을 중점으로 기술하였습니다. 참조 바랍니다.

웹(Web)을 구성하는 언어(또는 요소)는 크게 세가지로 나눕니다. 개발직군이 붐을 일으키고 있는 가운데 HTML, CSS, JavaScript를 한 번쯤은 들어보셨을 것입니다. 각각은 기초(골격)를 구성하는 HTML, 그리고 이를 멋있게 꾸며주는 CSS, 이러한 컨텐츠와 사용자의 반응을 상호작용하게 하는 JavaScript입니다.
우리는 HTML, CSS, JavaScript를 단순히 공부하는 것에서 멈추지 않고, 웹과 모바일이라는 서비스를 이용하면서 꾸준히 살펴보아야 할 이해의 대상으로 보아야 할 것입니다.

지능정보화가 비약적으로 이루어지고 있는 가운데 비전공자에게도 개발에 대한 경험을 요구하는 기업체가 늘고 있으며 우리는 이러한 움직임에 절망적이고 비관적인 태도를 취하기 보다는 낙관적이고 수용적인 태도로 변해야 할 것입니다. 반드시 그렇게 해야할 것이고 그렇게 되어가고 있습니다.

아는 것이 힘이고 알면 보입니다.

강한 마음가짐으로 함께 시작해주셨으면 좋겠습니다.

어려운 부분이 있다면 과감하게 건너 뛰시고 나중에 한 번 더 보시거나 검색을 통해 더욱 알아간다면 어렵지 않게 이해하실 수 있을 것입니다.

프론트엔드의 시작: HTML, CSS, JavaScript

HTML은 Hyper Text Markup Langauge의 약어입니다. Hyper Text 하이퍼텍스트는 문서 안의 다른 자료나 데이터 베이스에 연결하여 사용자에게 어떤 정보를 보여주기 위한 텍스트입니다. 이것을 Markup 마크업, 즉 다른 요소와 연결해주는 의미입니다. 이러한 일을 하는 Language 언어를 뜻합니다.
페이지의 제목이나 문단, 이미지, 표, 입력상자 등을 정의해주고, 또한 페이지의 구조나 의미를 부여해주는 역할도 담당합니다. 이렇듯 HTML은 웹 페이지의 전체적인 형태를 잡아주는 것입니다. 움직임이 없이 화면에 나타나기만 하기 때문에 정적언어로 분류합니다.

CSS는 Cascading Style Sheets, 말 그대로 스타일시트입니다. 건물을 지을 때 기둥만 세우고 끝낼 수는 없으니 외관을 도색하고 내부에 벽지와 장판을 바르는 원리로 보시면 됩니다. HTML로 기둥을 세웠다면 CSS로 도배를 해주게 되는 것입니다.
HTML로 화면에 표시되는 방법(글자크기, 색상, 배경 등)을 지정하고 HTML로 작성한 컨텐츠들을 꾸며주는 시각적 효과를 담당하는 정적 언어입니다.

그 다음은 JavaScript입니다. HTML 컨텐츠의 내용을 바꿔주고 동적인 움직임을 제어할 수 있게 해주는 언어로 동적 언어입니다. HTML과 CSS로 컨텐츠를 배치하고 꾸며주었다면 JavaScript로 멈춰있으나 움직여야 하는 요소들을 움직이게 할 수 있습니다. 물론 HTML과 CSS만으로도 동적인 효과를 만들 수는 있지만 극히 제한적이고 성능면에서 좋지 못할 수 있기 때문에 동적인 것은 JavaScript로 처리해주게 됩니다.

집을 짓거나 물건을 만들 때 모든 공정을 혼자서 다하는 경우는 드뭅니다. 효율적인 업무 분담을 위해 각자가 역할을 나누어 갖고 그 역할에 맞게 최선을 다하는 과정 통해 높은 품질로 생산할 수 있는 것입니다. 이렇듯 개발의 과정에서도 각자가 맡은 분야가 있고 효율적인 분업을 했을 때 고품질의 결과물이 나오는 법입니다.
그러기 위해서는 각 영역에서 기능이 정상적으로 수행되도록 기능적인면, 구조적인면에서 코드를 최적화 해야할 것입니다. 현재 우리는 웹이라는 서비스를 이용하면서 확장성, 생산성 등 다양한 측면에서 수많은 기능을 요구하고 있습니다. 이러한 관점에서 볼 때 앞으로 서비스를 개발해 나갈 것이라면 앞서 말한 사항을 충분히 숙지해야 할 것입니다.
이는 학습의 과정에서도 충분히 이루어져야 할 것이며 관련 직무에 뛰어들게 된다면 더더욱 유념해야 할 것입니다.

그러나 지금은 초기단계이기에 너무 어려워하지 않으셔도 될 것 같습니다. 자신감을 갖고 문을 두드리시기를 바랍니다.

웹 표준과 기술들

웹 표준?

보통 웹 표준(Web Standard)이라고 하면 W3C에서 내놓은 권고안에 의거하여 사용되는 기술들을 의미합니다. 이 표준기술을 바탕으로 웹 브라우저가 만들어지게 됩니다. 브라우저를 만드는 업체(Google, Apple, Microsoft)에서 이 표준기술을 어떻게 해석하고 적용하는지에 따라 차이가 생길 수 있고, 새로운 기술이 나온다면 반영되는데 있어 각자 다르게 보일 수 있습니다.
대표적으로 우리가 Internet Explorer(이하 IE)를 생각해보았을 때, 당시에 Windows를 사용했다면 기본으로 설치되어 어떤 기능을 이용하고자 할 때 Active X를 설치해야 했습니다. Windows 사용자가 압도적으로 많았기 때문에 IE의 독점적 생태계가 구축되었고 불필요한 프로그램을 설치하여야 하는 경우가 다반사였습니다.
그러나 시대의 흐름을 타고 스마트폰이 보급되면서 웹 브라우저를 컴퓨터에서만 사용한다는 개념이 전무해지고 스마트폰에서도 사용할 수 있는 간단하고 빠른 웹을 요구하는 목소리가 커졌습니다. 이에 따라 새로운 웹 표준이 등장하였고 이것이 현재 우리가 사용하고 있는 HTML5입니다.

접근성

요즘 스마트폰을 보면 iPhone을 기준으로 '손 쉬운 사용'이라는 메뉴에 다양한 기능들이 있는 것을 알 수 있습니다. 이것은 기기 사용자 중 신체적으로 불편한 사람을 위해 그들이 기기를 더욱 쉽게 사용할 수 있도록 어떤 기능적인 것을 조작하는 것입니다.
웹 접근성이라는 것도 마찬가지 입니다. 일반 사용자를 포함하여 고령자나 장애인 등 신체적 조건에 제한이 있는 사용자 등 모든 사용자가 동등한 위치에서 사용할 수 있는 웹 컨텐츠 제작 기법 중 하나입니다.
귀가 불편하신 분들을 위해 자막을 삽입하거나 눈이 불편하신 분들을 위해 소리를 넣는 일, 확대모드를 넣는 일 등이 이에 해당합니다. 이미지에 대체 텍스트를 삽입하는 것도 이에 해당할 수 있습니다.

크로스 브라우징

크로스 브라우징은 브라우저마다 다른 개성을 무시하고 어떤 브라우저에서든 동일한 컨텐츠 체험을 할 수 있도록 하는 것입니다. 네이버 화면을 본다고 가정했을 때 크롬이나 사파리나 파이어폭스 등 모든 브라우저에서 똑같은 화면을 제공합니다. 브라우저가 다르다고 해서 다른 화면을 제공하지는 않는 다는 것이지요.
대부분의 브라우저는 웹표준에 근거하여 만들어져 위와 같은 문제가 발생하는 경우는 매우 적겠지만 아직 IE를 사용하고 계신다면 해당 브라우저는 웹 표준을 따르지 않고 MS의 입맛에 골라 만들어졌기 때문에 다양한 측면에서 표준화되기 쉽지 않습니다. 따라서 IE에서도 정상적으로 작동하도록 만들어 주는 것이 크로스 브라우징이라고 보면 좋을 것 같습니다.

웹 개발을 위한 코드 에디터 / IDE(통합개발환경)

다양한 에디터가 있지만 저는 세가지 정도 소개해보려고 합니다. 무료 에디터 두개와 유료 에디터 한개인데 어떤 것들이 있는지 살펴볼까요?

VSCode(Visual Studio Code)

VSCode는 Microsoft에서 제공하는 무료 코드 에디터입니다.
가볍고 빠르기 때문에 많은 사람들이 사용하고 있으며 실제 현업에서도 많이 사용됩니다.
여기를 눌러 다운로드 받으실 수 있습니다.

파란색 다운로드 버튼을 눌러 설치 프로그램을 다운로드 받아 주시고 다음...다음...을 계속 눌러 추가적인 옵션을 건들지 않고 진행해주시면 됩니다.

설치 완료, 그리고 창을 열어보시면 아래와 같이 멋있는 창이 뜨게 됩니다.
(저는 한국어패치가 설치되어 있어 한국어로 나오는데 처음 설치하신 경우 모든것이 영어로 나옵니다. 하단의 VSCode 세팅하기에서 한국어 패치 설치방법을 확인해주세요)

가장 좌측에 있는 메뉴 모음이 각각 어떤 기능인지 보겠습니다.

Atom

Atom은 GitHub에서 개발한 코드 에디터입니다. 이 또한 무료로 서비스를 제공하고 있으며 VSCode와 마찬가지로 가볍고 빠릅니다.
여기를 눌러 다운로드 받으실 수 있습니다.

다운로드 버튼을 눌러서 다운로드를 진행하시고 설치해주시면 됩니다.

어떤 에디터를 사용하시든 사용자의 마음입니다! 사용자가 보기에 편한 에디터를 쓰면 됩니다.

WebStorm

WebStorm은 JetBrain에서 개발한 IDE(통합개발환경)이며, 유료입니다.
유료인 이유... 무료 에디터와 달리 많은 기능들이 내장되어 있어 별도의 확장기능을 사용하지 않아도 됩니다.
유료이지만 학생 라이선스를 획득하여 무료로 사용할 수 있으며, 30일정도 무료 체험기능도 제공하고 있으니 여유가 된다면 한 번 써보시는 것도 좋을 것 같습니다.

여기를 눌러 다운받으실 수 있습니다.

저는 개인적으로 VSCode와 WebStorm을 같이 쓰고 있습니다.

VSCode 환경 세팅하기

한국어 패치 설치하기

자, 우선 VSCode를 사용하기 위해 기본적인 환경을 만들어보겠습니다.
처음 VSCode를 설치하시면 모든게 영어로 나와서 매우 당황스러운(?) 상황이 연출되는데요, 그러기 위해서 먼저 한국어 패치를 설치해보겠습니다.

좌측 메뉴모음에서 테트리스 처럼 생긴 아이콘(5번째)을 눌러줍니다.
그다음 검색창에 "Korean"이라고 검색하면 첫번째 보이시는 한국어 패치가 나올 것입니다.

Microsoft에서 제공하는 한국어 패치(첫번째)를 클릭해주시면 아래와 같은 녀석이 바로 옆에 뜨는 것을 보실 수 있을것입니다.

Install 버튼을 눌러 설치하신 후 VSCode를 재실행해주세요.

자 그러면 이렇게 한국어 패치가 적용된 것을 볼 수 있습니다.

코드를 멋있게 다듬어 주는 Prettier 설치하기

마찬가지로 확장도구 메뉴로 들어가서 Prettier를 검색해주세요.

저는 설치가 되어있어 사용안함, 제거가 나오지만 저 녀석을 선택하신 후 설치를 눌러주시면 됩니다.

코드를 사람이 보기 쉽게 자동으로 고쳐주는 확장도구입니다. 이렇게만 설명하면 왜 쓰는건지 감이 잘 안오실 것입니다. 왜 설치해야 하는지, 어떤 느낌인지 맛만 살짝 볼게요.

우선 우리가 코드를 멋있게 작성하고 컴퓨터에서 실행시킬 때 컴퓨터는 어떤 방식으로 코드를 정리하냐면

function myFunction() { console.log("Hello World"); console.log("My name is Paul"); };

위 처럼 한줄로 정리해서 실행하게 됩니다. 그러나 우리가 이렇게 맞춰서 작성하다보면 결국에 코드가 길어졌을 때 문제를 파악하거나 유지보수하기 매우 어려울 것입니다.

Prettier를 사용하면 이렇게 정리해줍니다.

function myFunction() {
  console.log("Hello World!");
  console.log("My name is Paul");
}

이런식으로 보기 쉽게 정리해 줄 것입니다. 물론 우리가 애초에 코드를 작성할 때 저런식으로 우리가 보기 쉽게 나눠서 작성할 것이지만 작성을 하다보면 어디에선가 코드가 꼬이거나 괄호를 개수에 맞지 않게 입력하거나 할 수 있습니다. 그러한 경우 Prettier가 자동으로 정리해 줄 것입니다.

당장은 예시로만 설명드려서 확 와닿지 않을 수 있지만 실습을 통해서 자세하게 살펴보도록 하겠습니다.

Live-Server 설치하기

우리가 코드를 작성하면서 별도의 조작없이 실시간으로 그 결과를 볼 수 있다면 더 편하겠죠? 그러기 위해서 Live-Server라는 도구를 설치해 주면 좋습니다.

도구모음에 live 또는 live server를 검색하시고 아래 녀석과 같은 것을 설치해주세요!

이 도구모음은 우리가 HTML, CSS, JavaScript로 웹페이지를 만들 때 어떻게 구성되고 있는지 실시간으로 보여줍니다.

원래는 우리가 작성하고 있는 문서를 웹브라우저로 열어서 편집을 할 때마다 새로고침 버튼을 눌러줘가며 결과를 봐야하지만 Live Server를 사용하면 별도의 조작없이 바로바로 확인할 수 있어 편리합니다.

자, 그러면 이쯤하고 본격적으로 HTML에 대해서 살펴보겠습니다!

HTML 문법

태그? TAG?

태그는 HTML의 기본이 되는 문법입니다. 제목을 삽입하거나, 단순한 텍스트 그리고 입력양식 등등 모든 것이 태그를 기반으로 입력됩니다. 심지어 영역을 나누는 것도 모두 태그가 담당합니다. 그렇다면 태그가 무엇일까요?

<TAG>CONTENTS</TAG>
<태그>컨텐츠</태그>

<h1>안녕하세요</h1>
<제목>안녕하세요</제목>

이처럼 컨텐츠를 입력하기 위한 약속이라고 생각하시면 쉬울 것 같습니다.
위에서 보이는 것처럼 태그는 열리는 태그(<TAG>)와 닫히는 태그(</TAG>)로 이루어져 있으며 한 쌍을 이룹니다. 열리는 태그와 닫히는 태그를 입력하고 그 사이에 내용을 입력하면, 내가 입력한 내용이 어떤 역할을 하는지 명시해주는 것이고 다른 개발자들도 쉽게 이해할 수 있습니다.

여기에서 주의할 점은 닫히는 태그의 앞에는 슬래시(/)가 들어간다는 것입니다. 절대 잊지마세요!

스스로 닫히는 태그가 있다?

앞에서 살펴본 HTML의 태그의 특징은 열리는 태그(<TAG>)와 닫히는 태그(</TAG>)로 구성된다는 사실이었습니다. 그렇지만 모든 태그가 열리는 태그와 닫히는 태그의 쌍으로 이루어져 있는 것은 아닙니다.
앞에서 예시를 든 태그 중 제목태그는 어디서부터 어디까지가 제목에 해당되는 태그라는 사실을 알려주기 위해 열리는 태그와 닫히는 태그를 사용했습니다.

예를 들어 아래와 같이 닫히는 태그를 입력하지 않으면 어디까지가 제목인지 알기 어렵습니다.

<제목>안녕하세요.
저는 조던 입니다.

그렇지만 꼭 닫히는 태그를 입력하지 않더라도 어디까지가 그 컨텐츠의 범위가 되는지 알 수있는 것들이 있습니다. 예를 들면 이미지를 삽입하는 태그가 있다고 가정했을 때, 이미지는 텍스트와 다르게 어디서부터 어디까지가 이미지인지 구분이 되기 때문에 굳이 닫히는 태그를 쓸 필요가 없다는 것입니다.

예를 들어서,

<제목>안녕하세요</제목>
<이미지>
<문단>저는 조던입니다.</문단>

이렇게 이미지는 닫히는 태그가 없더라도 문단과 이미지가 확연하게 구분되기 때문에 닫히는 태그를 넣지 않았습니다.
이렇게 닫히는 태그를 쓰지 않는 것을 self-closing tag라고 하고 쉽게 '빈 태그'라고 말합니다.

<이미지>
<이미지/>
<이미지 />

빈태그는 위처럼 세가지 방법으로 입력할 수 있고 어떤 방법으로 입력하든 상관없습니다.
우리가 사용할 HTML5에서는 저 세개의 방식을 모두 지원하지만 낮은 버전의 HTML에서는 두번째나 세번째 방법처럼 /를 붙여서 태그를 닫는다는 의미를 부여해야 하는 경우도 있으니 참조하세요!

이 문서에서는 빈태그에도 슬래시를 붙여 태그를 닫아주겠습니다(세번째 방법).

속성과 값

모든 문서를 태그 자체로만 작성하게 되면 모든 기능을 충분히 활용할 수 없습니다. 그래서 태그에 옵션을 붙여줄 수 있는데 다음과 같이 사용할 수 있습니다.

<이미지 경로="이미지.jpg" 대체설명="나의 이미지" />
<입력 타입="text" 별명="나의 입력" />

<img src="이미지.jpg" alt="나의 이미지" />
<input type="text" name="나의 입력" />

<img />는 이미지를 입력하는 태그입니다. 첨부하고 싶은 이미지가 어디에 있는지 경로를 지정해주는 src 속성과 이미지가 표시될 수 없는 환경이거나 앞을 볼 수 없는 분들을 위해 음성으로 웹 페이지를 읽어줄 때 이미지를 텍스트로 설명해 줄 수 있는 alt 속성이 있습니다.

<input />은 양식과 관련된 태그입니다. 텍스트 입력 상자를 만들거나 버튼, 체크박스 등을 만들어 줄 수 있는데 형태를 지정해주는type 속성과 별명을 지정해주는 name 속성을 적어주었습니다.

각각의 속성에는 따옴표로 속성에 대한 값을 지정해주었습니다. 이미지의 경로가 어디이며 대체텍스트가 무엇인지, 그리고 어떤 타입을 입력받을 것인지 별명이 무엇인지 속성에 대해 같다라는 =등호를 사용하여 속성=무엇이다라는 형태로 선언해줍니다.

HTML 문서의 구조

기본 구조

HTML 문서는 우리가 사용하는 웹 페이지의 기초를 담당해줍니다. 그래서 다양한 정보들을 담고 있으며 각 구역마다 이 페이지에서 어떤 역할을 하고 있다는 것을 명시해 주어야 합니다. 그렇다면 HTML 문서의 기본 구조는 어떻게 될까요?

자료 1

<!DOCTYPE html>
<html>
  <head>
    HTML 문서의 기본 정보들
  </head>
  <body>
    화면에 보여줄 컨텐츠 영역
  </body>
</html>

자료 2

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="author" content="홍길동">
    <meta name="description" content="홍길동이 만든 웹 페이지">
    <title>여기는 홍길동의 웹 페이지</title>
    <link rel="stylesheet" href="./css/style.css">
    <script src="script.js">
  </head>
  <body>
    <header>
      <h1>제목</h1>
    </header>
    <section>
      <article>주요 컨텐츠</article>
      <article>주요 컨텐츠</article>
    </section>
    <footer>연락처, 주소 등등</footer>
  </body>
</html>

자료 1은 html의 기본적인 구성을 아주 간단하게 도식화 해 놓은 것입니다.
그리고 자료 2는 자료 1의 세부적인 사용에 대해 나열해 놓은 것입니다. 우선은 자료 2를 기준으로 각 태그가 어떤 역할을 하는 지 살펴보도록 할게요.

<!DOCTYPE html> DTD, 버전을 지정

위에서 부터 살펴보면 가장 먼저 눈에 들어오는 것이 <!DOCTYPE html>입니다. 이것은 우리가 이 html문서를 html 버전 5로 작성하겠다고 선언하는 것입니다.

구버전 같은 경우에는 다음과 같이 작성했습니다.

<!--XHTML 1.0 Transitional-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

두 번째 줄을 참고해서 보시면 됩니다. 첫번째 줄에 제가 <!-- 어찌구 저찌구 -->로 써 놓은 것은 주석이라고 불리는데, 주석은 문서에 설명이나 메모같은 것을 하기 위한 것으로 주석처리를 하게 되면 그 부분은 컴퓨터가 실제로 번역하지 않으며 웹 페이지에 드러나지도 않습니다.

macOS 사용자 분들께서는 command키와 /를 누르시면 됩니다. Windows 사용자 분들 께서는 Ctrl키와 /를 눌러보세요!

<html></html>, 전체적 범위

html 태그는 태그 사이에 있는 모든 내용이 html 문서임을 알려주는 것입니다.
다시 말해서 <html>이 안에 들어있는 모든 것이 html 이에요!</html>라는 의미가 됩니다.

<head></head>, 정보를 담는 그릇

head 태그는 html 문서의 정보를 담아줍니다. 위에서 제시한 자료 2를 다시 가져와 보겠습니다.

<head>
  <meta charset="utf-8" />
  <meta name="author" content="홍길동" />
  <meta name="description" content="홍길동이 만든 웹 페이지" />
  <title>여기는 홍길동의 웹 페이지</title>
  <link rel="stylesheet" href="./css/style.css" />
  <script src="script.js" />
</head>

안에 보시면 <meta> 태그가 보이실겁니다. meta 태그 안에 다양한 속성과 값을 부여해서 이 사이트의 author(저자), description(설명)을 넣어주었습니다.
<title></title>태그는 우리가 웹 브라우저를 사용할 때 탭에 보이는 제목입니다.
<link> 태그로 외부 스타일 시트를 넣어주었고, <script> 태그로 이 페이지에서 쓰일 자바스크립트를 호출해 줍니다.

뒤에서 조금 더 자세하게 살펴보겠습니다!

<body></body>, 페이지에 실제로 보여줄 컨텐츠들

body 태그에는 페이지에 실제로 보여줄 컨텐츠들을 삽입해 줍니다. 예를 들어 페이지의 제목을 브라우저 화면에 보여주길 원한다면 다음과 같이 작성할 수 있습니다.

<body>
  <h1>웹 페이지의 제목입니다!</h1>
</body>

여기에 들어갈 수 있는 다양한 태그들은 뒤에서 다뤄보겠습니다!

HEAD 태그에 들어가는 다양한 정보들

<meta> 웹 페이지의 정보

앞서 head 태그에는 웹 페이지의 정보가 들어간다고 했습니다. 다양한 정보들을 head 태그에 넣어줄 수 있는데 여기에 넣는 모든 정보들은 브라우저 화면에 나타나지는 않습니다. 다만 브라우저가 html 문서를 해석할 때 필요한 정보들이니 충분히 입력해 주는 것이 좋겠습니다.

<head>
  <meta charset="utf-8">
  <meta name="author" content="홍길동">
  <meta name="description" content="홍길동이 만든 웹 페이지">
</head>

모든 정보는 meta 태그에 넣어줍니다. 여기에서 charset은 페이지 문자의 인코딩 방식에 대해 알려줍니다. html 자체가 영어로 개발되어 영어로 작성되는 페이지는 굳이 지정해주지 않아도 상관없지만, 영어 이외의 문자에는 uft-8을 선언하여 웹페이지에 인코딩되는 문자가 깨지지 않도록 해줍니다.

그 다음 name은 어떤 정보를 넣어 줄 것인지 선언하는 것이고, 그에 대해 content 속성으로 표기해줍니다. 여기에서는 저자와 설명에 대해서 작성해주었습니다.

조금 쉽게 풀어보면,

<head>
  <meta 문자열종류="utf-8">
  <meta 정보의_종류="author" 정보에_대한_설명="홍길동">
  <meta 정보의_종류="description" 정보에_대한_설명="홍길동이 만든 웹페이지">
</head>

이렇게 생각하면 조금 더 쉽게 접근할 수 있겠지요?
각 속성들에 대해 조금 더 정리해보겠습니다.

또 한가지 중요한 사실은, <meta>는 보시는 것처럼 빈 태그이고 반드시 head 안에 들어있어야 합니다.

<title> 웹 브라우저 탭의 제목

head 태그 안에 넣어주는 <title>은 브라우저에서 보여 줄 탭의 제목을 지정하는 곳입니다.

<head>
  <title>웹 브라우저에서 보여 줄 탭의 제목</title>
</head>

이렇게 우리가 작성할 웹 문서를 탭에서 어떤 제목으로 보여줄 지 작성할 수 있습니다.

이렇게 보이게 하고 싶다면, 아래와 같이 하면 됩니다!!

<head>
  <title>Twitch</title>
</head>

아이콘까지 바꾸는 방법은 나중에 html 문서를 작성해보면서 살펴보겠습니다.

<link> CSS, 외부 스타일 시트를 불러오는 방법

link 태그는 외부 문서를 불러올 때 사용합니다. 우리는 주로 외부에서 작성된 스타일 시트를 불러올 때 사용할 것이고, 스타일 시트는 html을 꾸며주는 요소를 담은 파일입니다. 보통 css라고 하죠!

사용하는 방법은 이렇습니다. 두개의 속성을 부여해줍니다.

<link rel="stylesheet" href="./css/style.css">

이렇게 rel과 href라는 속성을 부여했는데 각각의 속성은 다음과 같은 의미를 갖습니다.

(번외) 스타일 작성하는 법

스타일의 경우 외부에서 css 파일을 작성하여 link 태그로 넣어줄 수 있지만 html 문서 내에서 직접 넣는 방법도 있습니다.

<head>
  <style>
    img {
      width: 100px;
      height: 100px;
    }
    div {
      background-color: #ff0000;
    }
  </style>
</head>

이렇게 head 태그 안에 style 태그를 넣어 작성할 수 있는데 의미는 이렇습니다.

<head>
  <스타일_정의>
    이미지태그 {
      너비: 100픽셀;
      높이: 100픽셀;
    }
    div태그 {
      배경색: 빨간색;
    }
  </스타일_정의>
</head>

스타일에 대해서는 나중에 더 자세하게 살펴보겠습니다!

(번외) 절대 경로와 상대 경로

파일의 경로를 입력할 때 href="./css/style.css"로 입력한 것을 보셨을겁니다.
보통 우리가 파일의 경로를 입력할 때 C:\Desktop\발표자료.pptx 처럼 정확히 어디에 위치했는지 그 파일의 주소를 입력해주는 방법이 있습니다. 이것을 절대적인 위치라는 개념에서 절대 경로라고 합니다.

그리고 만약 다음과 같은 파일트리가 있다고 가정해봅시다.

|- index.html
|- style.css
|_ icon
   |- favicon.svg
   |_ icon.png

최상위 폴더에 index.html, style.css의 두개 파일이 있고 icon이라는 폴더가 있습니다.
icon 폴더 안에는 favicon.svg와 icon.png라는 두개의 이미지 파일이 있습니다.

그럼 index.html의 입장에서 favicon.svg를 찾으려면 어떻게 해야할까요?

index.html 입장에서 favicon.svg는 같은 위치의 icon 폴더 내에 있는 파일이기 때문에 같은 폴더 안에 있는 icon 폴더 안에서 찾아줘! 라는 부탁을 해줘야겠죠?

그러기 위해서 ./icon이라고 우선 표기해줘야 합니다. ./의 의미가 같은 위치에서 찾아달라는 부탁이 되는 것이죠!

그 곳에 있는 icon 폴더를 선택하는 것이므로 icon을 명시해주고, 그 폴더 안에 있는 favicon을 찾아야하기 때문에 ./icon/favicon.svg를 입력해주시면 됩니다.

그렇다면 반대로 favicon.svg 입장에서 index.html 파일은 어떻게 찾아줘야 할까요?

./를 쓰게 된다면 favicon.svg 입장에서는 자신과 icon.png 밖에는 찾을 수 없을 것입니다. 그렇기 위해서는 폴더를 나가서 찾아줘야 하는데 상위 폴더에서 찾아줘! 라는 명령을 해주기 위해 ../를 먼저 선언해줍니다.

../은 자신의 위치 밖으로 한 단계 나가서 바로 상위폴더까지 찾을 수 있게 해주는 것입니다. 이러한 경로 표기 방법의 개념을 상대 경로라고 합니다.

그러므로 favicon.svg의 입장에서 index.html을 찾기 위해서는 ../index.html이라고 써주시면 되겠습니다!

참고적으로 ./는 생략하셔도 무방합니다!

<script> 자바스크립트를 입력하거나 불러오는 태그

script 태그를 통해 외부 자바스크립트 문서를 불러오거나 html 문서 내에 자바스크립트를 입력할 수 있습니다.

외부 자바스크립트를 불러오기 위해서는

<head>
  <script src="./script.js" />
</head>

처럼 입력해주면 됩니다. link 태그에서는 href를 통해 파일을 불러왔지만 script 태그에서는 src를 통해 불러온다는 차이점을 잊지 마시기 바랍니다!

아래처럼 html 문서 내부에 자바스크립트를 작성할 수도 있습니다!

<head>
  <script>
    function onClickViewAlert() {
      alert("Hello World!");
    }
    window.addEventListner('click', onClickViewAlert);
  </script>
</head>

이처럼 script 태그에는 src 속성을 추가하여 외부에서 자바스크립트를 불러올 수 있고, 태그 안에 직접 자바스크립트를 작성할 수 있습니다.

웹 개발에 대한 공부을 시작하시려는 분, 특히 프론트엔드에 입문하시려는 분을 위한 HTML의 기초에 대해 살펴보았습니다.

다음 포스팅에서는 본격적으로 body안에 들어갈 다양한 태그들에 대해 집중적으로 살펴보겠습니다!!