HTML

프로젝트 생성

이제 웹사이트를 만들 준비가 되었습니다.

방금 설치한 Visual Studio Code를 열어보겠습니다. 열고 나면 다음 같은 화면이 보일겁니다.

VSCode에서 프로젝트 생성 스크린샷

Visual Studio Code는 코드를 보고 쓸 수 있는 도구입니다.

Visual Studio Code에서 프로젝트를 생성해보겠습니다. Mac에서는 File -> Open 을 누르면 '새 폴더' 버튼이 보일겁니다.

Windows에서는 File -> ... 에 보입니다.

이제 GatsbyWorkshop 라는 이름으로 디렉토리를 만들고 이 안에서 코드를 작성해보겠습니다.

첫번째 HTML 파일

첫번째로 index.html 파일을 만들어 보겠습니다. VS Code의 왼쪽에 방금 만든 폴더명이 보일겁니다.

이 화면을 통해 새로운 폴더나 파일을 만들 수 있습니다. 먼저

그 메뉴를 펼쳐 오른쪽 버튼을 누르면 New File 버튼이 보입니다. 이 버튼을 눌러줍니다. 그리고 파일명으로 index.html을 입력합니다.

스크린샷

그리고 안에 내용을 다음 처럼 넣고 저장 합니다.

<h1>안녕!</h1>

그리고 이 파일을 웹브라우저에서 열어봅니다. 파일명에 오른쪽 버튼을 누르면 맥에서는 Open in Finder, 윈도우즈에서는 ... 가 보일겁니다.

스크린샷

방금 우리는 대제목(h1) 태그를 사용하여 HTML 문서를 만들었습니다.

태그 구조

HTML문서는 여러개의 태그로 이루어져 있습니다. 태그는 아래의 구조를 가지고 있습니다.

<이름>값</이름>

여는 태그와 닫는 태그 쌍으로 이루어져 있습니다. 닫는 태그는 이름 앞에 / 가 붙습니다.

index.html 파일에 아래 내용을 넣고 다시 저장합니다.

<h1>안녕</h1>
<h2>HTML 문서는 여러개의 태그를 가질 수 있어요</h2>
<p>이제부터 재미있게 만들어봐요</p>

h1, h2, h3, h4, h5 태그는 제목(Header)을 나타내는데 사용합니다. p 태그는 문단(Paragraph)을 나타내는데 사용합니다.

알아야 하는 태그는 얼마나 있나요?

전체를 모두 외우고 사용할 수는 없습니다. 오래된 개발자들도 모두 외워서 사용하고 있지는 않습니다. 아래 링크에 가면 태그의 전체 목록을 볼 수 있습니다. 우리는 그때그때 필요한 것들을 찾아서 사용하면 됩니다.

HTML Elements Reference

많이 사용하는 태그를 모아놓은 페이지도 있습니다. 대부분의 웹사이트는 이 태그 안에서 개발하게 됩니다.

태그의 계층

어떤 태그들은 다른 태그 안에 들어올 수 있습니다.

<p>중간에 <strong>강조</strong> 하고 싶으면 strong 태그를 사용합니다.</p>

b vs strong

b 라는 태드는 bold의 약자로 strong과 마찬가지로 내용을 강조해줍니다.

둘 중에는 가급적 strong을 사용하는것이 좋습니다. 강조를 하는 데에는 글자의 굵기를 굵게 하는 것 말고도 색상이나 크기의 차이를 이용하는 방법도 존재합니다.

코드는 최대한 의미에 맞게 작성하는게 좋습니다. HTML코드는 '어떻게 보여지는지' 보다 '이게 무엇인지'를 생각하며 작성하는것이 좋습니다.

속성 - attribute

어떤 태그들은 속성들을 가질 수 있습니다. 대표적으로 속성을 가지고 있는 태그로 img 태그가 있습니다.

이미지를 저장해서 index.html 파일과 같은 위치로 옮겨줍니다. 그리고 아래 내용을 index.html 파일에 추가해 줍니다.

<img src="logo.jpg">

위 코드에서 src가 속성 이름, logo.jpg가 속성 값 입니다. img 태그는 이미지를 보여주는 태그입니다. src 속성에 들어있는 주소(파일 이름)로 파일을 찾아 이미지를 보여줍니다.

하나의 태그는 여러 속성을 가질 수 있습니다.

<img src="logo.jpg" alt="로고">

alt는 이미지를 사용할 수 없는 경우에 이미지 대신 보여지는 텍스트를 지정하는 속성입니다.

이미지에 alt 속성을 넣어주면 시간장애인이 사용하는 스크린리더 같은 프로그램에서도 웹사이트를 더 사용하기 쉽게 만들어줍니다.

HTML 전체 구조

지금까지 우리가 작성한 파일은 이렇게 생겼을거에요.

<h1>안녕</h1>
<h2>HTML 문서는 여러개의 태그를 가질 수 있어요</h2>
<p>이제부터 재미있게 만들어봐요</p>
<p>중간에 <strong>강조</strong> 하고 싶으면 strong 태그를 사용합니다.</p>
<img src="logo.jpg" alt="로고">

이 파일에는 생략된 부분이 있습니다. 이를 웹브라우저에서는 다음 처럼 해석합니다.

<html>
<head>
</head>
<body>
    <h1>안녕</h1>
    <h2>HTML 문서는 여러개의 태그를 가질 수 있어요</h2>
    <p>이제부터 재미있게 만들어봐요</p>
    <p>중간에 <strong>강조</strong> 하고 싶으면 strong 태그를 사용합니다.</p>
    <img src="logo.jpg">
</body>

웹 브라우저에서 오른쪽 버튼을 눌러 검사하기 메뉴를 열어 봅니다. 그러면 우리가 작성하지 않은 html, head, body 태그도 존재하는것을 알 수 있습니다.

생략된 부분 전체를 넣어주는게 좋은 습관입니다.

body 태그 안에는 방금 우리가 작성한것과 같은 페이지에서 보여질 부분이 들어갑니다. head 태그 안에는 제목, 캐릭터 셋 같은 페이지 내용은 아니지만 페이지에 대한 내용이 들어갑니다.

<html>
<head>
    <title>내 사이트</title>
    <meta charset="utf-8">
</head>
<body>
    ...
</body>
</html>

head 태그 안에 웹사이트의 제목을 지정하는 title태그를 추가하고 meta 태그를 사용하여 캐릭터셋을 UTF-8으로 지정 했습니다.

캐릭터 셋이요?

캐릭터 셋 이란 글자를 저장하는 방법입니다. 지금은 세계의 다양한 글자를 저장할 수 있는 UTF-8 이라는 저장 방법이 가장 널리 쓰이고 있습니다.

여러분들 중 몇몇 분들은 캐릭터셋을 지정하기 전에는 한글이 깨져있는 경우가 있었을 거에요. 파일을 저장할때와 브라우저가 해석할때 캐릭터셋을 동일하게 맞춰주면 글자는 더 이상 깨져 보이지 않을겁니다.

인코딩 깨진 스크린샷

문서의 형식 Doctype

그리고 이 파일 최상단에 문서 형식을 추가하면 온전하게 형식을 갖춘 HTML 파일이 됩니다. 문서의 형식은 작성한 HTML의 버전을 브라우저에게 알려줍니다.

버전명 없이 간단하게 html 이라고 적으면 HTML 5라는 뜻입니다. 현재는 HTML5를 가장 많이 사용하고 있습니다.

<!doctype html>
<html>
<head>
    <title>내 사이트</title>
    <meta charset="utf-8">
</head>
<body>
    <h1>안녕</h1>
    <h2>HTML 문서는 여러개의 태그를 가질 수 있어요</h2>
    <p>이제부터 재미있게 만들어봐요</p>
    <p>중간에 <strong>강조</strong> 하고 싶으면 strong 태그를 사용합니다.</p>
    <img src="logo.jpg">
</body>
</html>