HTML과의 첫 만남
HTML이란 무엇일까?
- 웹 사이트에서 사용되는 문서는 웹에 맞는 형식인 html 파일이다.
- 웹 문서는 다른 일반 문서와 달리 문서를 작성하는 프로그램과 그 내용을 보는 프로그램이 서로 다르다. 웹 문서 작성 프로그램을 웹 편집기라고 하고, 웹 문서를 보는 프로그램을 웹 브라우저라고 한다.
- HTML(HyperText Markup Language) : 웹에서 자유롭게 오갈 수 있는 웹 문서를 만드는 언어
- HyperText : 웹사이트에서 링크를 클릭해 다른 문서나 사이트로 즉시 이동할 수 있는 기능
- Markup : 태그(tag)를 이용해 문서에서 어느 부분이 제목이고 본문인지, 어느 부분이 사진이고 링크인지 표시하는 기능
웹 표준이란 무엇일까?
- 웹 표준이 필요한 이유는 어떤 브라우저에서도 웹 사이트가 동일하게 구현되기 위해서이다. 웹 표준을 준수하여 사이트를 제작하면 일반 사용자는 장소나 브라우저와 상관없이 쉽게 웹 사이트를 볼 수 있으며, 웹 개발자와 디자이너는 브라우저에 따라 사이트를 각각 만들 필요가 없어진다.
왜 HTML5와 CSS3를 공부해야 할까?
- 어떤 웹 브라우저에서도 똑같이 사이트가 구현될 수 있도록 하려면 웹 표준을 따라야하는데, 웹 표준의 가장 기본이 되는 것이 HTML5이다.
- CSS3를 배우면, 접속하는 기기에 따라 자동으로 레이아웃이 바뀌는 반응형 웹 디자인도 가능하다.
- HTML5와 CSS3는 앱 화면을 디자인하기 위한 기초가 된다. IOS나 안드로이드 같은 운영체제별로 앱을 개발하기도 하고(네이티브 앱), HTML5의 API를 사용해 모바일 운영체제와 상관없이 웹앱을 만들 수 있다. 네이티브앱이든 웹앱이든 화면은 최신 웹 표준인 HTML5와 CSS3를 사용해 디자인한다.
- 웹 페이지의 소스를 이해하면 사이트의 형태를 원하는 대로 수정할 수가 있다. 특히 사이트나 블로그가 브라우저에서 화면에 보이는 모습을 바꾸고 싶다면 반드시 CSS를 알아야 한다.
HTML을 HTML5라고 부르는 이유?
HTML5는 원래 이전에 사용하던 HTML4에 이어 다양한 기능이 추가되었으므로 다음 숫자인 5을 붙였으나, 대부분의 웹 브라우저에서 HTML5를 지원하면서 HTML5라는 이름에서 숫자가 빠지고 HTML 이라고 부르게 되었다.
HTML의 역사와 HTML5의 등장
인터넷 초창기의 HTML은 텍스트와 이미지를 한 줄씩 웹 브라우저 화면에 표시하는 정도였다. 웹 사용자가 늘고 웹 브라우저들이 하나 둘 등장하면서 표준이 필요해졌고, 팀 버너스 리가 'W3C'를 설립하여 HTML2.0, HTML3.2, HTML4.0을 차례로 발표했다. 주요 브라우저 업체들은 기존 HTML을 확장하기 위해 WHATWG를 구성하여 이것이 추후에 HTML5라는 이름으로 불렸다. 몇 년동안의 논의 과정을 거쳐 2014년 11월 공식 표준이 발표되었는데, 이때부터 HTML5을 HTML라는 이름으로 사용하고 있다.
예전에는 W3C에서 표준안을 내놓아도 브라우저에서도 적극적으로 수용하지 않았으나, HTML5 표준안부터는 웹 브라우저 업체들이 함께 참여하고 있어 표준안이 업그레이드 될 때마다 웹 브라우저에서 발빠르게 수용하고 지원하고 있다.
웹 브라우저와 웹 편집기
웹 브라우저 종류와 HTML5 지원 정도
- 웹 브라우저는 웹 사이트를 둘러볼 때 사용하는 프로그램이면서 웹 편집기로 작성한 웹 문서를 화면에 표시해주는 프로그램이다.
- 각 브라우저들의 HTML의 지원 정도는 모두 상이하며, https://HTML5test.com/ 여기에 접속하면 555점을 만점으로 하였을 떄 현재 웹 브라우저의 지원 정도를 점수로 표현해준다.
웹 편집기의 종류
- 웹 문서를 만들 때 HTML 태그를 입력하는 프로그램을 웹 편집기라고 한다. 웹 편집기에 HTML 소스를 입력하면 그 내용을 웹 브라우저로 읽는데 이 웹 편집기는 텍스트를 입력할 수 잇는 프로그램이면 모두 가능하다.
| 편집기 종류 |
특징 |
| 텍스트 편집기 |
작성은 가능하나 HTML 태그를 일일이 입력해야 한다. |
| 웹 편집기 |
웹 전용 편집기로, 태그와 속성, 일반 텍스트를 서로 다른 색으로 표시해준다. 또한 태그나 속성의 일부만 입력해도 전체를 완성하므로 오타를 줄일 수 있다. |
| 통합 개발 환경(IDE) |
HTML뿐만 아니라, 자바 스크립트나 ASP.NET, PHP, node.js 등 여러 언어를 함께 사용할 수 있도록 사용자에게 필요한 개발 환경을 한번에 제공한다. |
| 웹 기반 코드 편집기 |
웹 기반 코드 편집기는 웹 상에서 소스 코드를 입력하면 결과를 바로 확인할 수 있는 편집기이다. 별도의 프로그램 없이 브라우저 화면에 코드를 입력하고 결과를 확인할 수 있다는 장점이 있으며 팀 작업을 사면 여러 팀워들과 소스를 공유하는 데에도 유용하고 초보자의 코딩 연습용으로 적합하다. |
HTML 기본 문서 구조
태그, 이건 꼭 알아두세요!
- 태그(tag) : 마크업할 때 사용하는 약속된 표기법이자, 웹 문서에 표시하려는 내용을 전달하는 언어이다.
- 태그는 <,>을 이용해 구분한다. <> 안에 묶인 부분이 HTML 태그이다. 이미지를 삽입할 때는 image의 약자인 img을 <> 사이에 표시하여 <img>라는 태그를 사용하고, 텍스트 문단을 삽입할 때는 paragraph의 약자인 p를 <> 사이에 표시에 <p> 태그를 사용한다.
- HTML 태그는 대소문자를 구별하지 않지만, HTML5 표준 명세에서는 태그와 태그 안에서 사용하는 속성들은 모두 소문자로 사용할 것을 권장한다.
<img src="images/first.jpg"> // 맞는 예
<IMG src="images/first.jpd"> // 틀린 예
- 여는 태그와 닫는 태그를 정확히 입력해야 한다. 대부분의 태그는 <h1>~</h1>처럼 여는 태그와 닫는 태그가 한 쌍으로 이뤄지며 웹 브라우저는 여는 태그에서 닫는 태그까지를 태그의 적용 범위로 인식한다. <img> 태그나 <br> 태그처럼 닫는 태그가 없는 경우도 있다.
// 맞는 예
<h1>시간이란..</h1>
<p>내일 죽을 것처럼 오늘을 살고 영원히 살것처럼 내일을 꿈꾸어라.</p>
// 틀린 예
<h1>시간이란..
<p>내일 죽을 것처럼 오늘을 살고 영원히 살것처럼 내일을 꿈꾸어라.</p>
- HTML 태그는 기본 속성상 여러번 띄어쓰기를 하더라도 한칸의 공백으로 인식한다. 따라서 태그 사이의 포함 관계에 따라 단계별로 들여쓰더라도 웹 브라우저는 한칸으로 인식하기에 가독성을 위해 HTML 소스를 단계별로 들여쓰는 것이 좋다.
- HTML 태그는 단순히 태그 하나만 사용될 뿐만 아니라, 태그에 여러 기능을 추가하는 속성과도 함께 사용된다. 즉 <태그 속성="속성 값" 속성="속성 값"...> 형태로 사용할 수 있다. 예를 들어 이미지 파일의 경로를 알려주는 src 속성과 이미지의 크기를 알려주는 width 속성, height 속성, 이미지의 보조설명을 붙이는 alt 속성 등 여러가지 속성이 함께 사용된다. 각 태그에서 사용할 수 있는 속성이 다르므로 태그와 속성을 함께 익혀둬야 한다.
<img src="images/first.jpg" width="350" height="290" alt="시계 이미지">
- HTML 태그는 한 태그 안에 다른 태그를 포함할 수 있으므로 여는 태그와 닫는 태그 쌍을 정확히 맞춰 포함관계를 명시해야 용도에 맞게 적용할 수 있다.
<u><i>만약 네가 나를 길들인다면</i></u>
간단한 HTML 문서 만들기
- first.html 파일을 만들어 저장한다.
- 비주얼 스튜디오 코드에서 웹 문서의 태그를 자동으로 입력해주는 에밋 기능을 이용해 !를 입력하고 tab키를 누른다. 그럼 HTML 문서 기본 구조가 자동으로 만들어진다. 어떤 웹 문서를 작성하든 이 기본 구조를 지켜야 한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
에밋(Emmet) 기능이란?
HTML 소스 코드를 빠르게 입력할 수 있도록 해주는 플러그인 기능이다.
미리 약속한 코드를 입력한 후, tab 키를 누르면 완성된 코드를 자동으로 작성한다.
- lang="en"이라는 소스는 현재 문서가 영어(english)로 작성된다는 뜻이다. 따라서 lang="ko"로 수정하면 한국어로 작성되게끔 변경할 수 있다.
- <title>Document</title> 부분도 원하는 다른 제목으로 수정할 수 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>내가 처음 만드는 HTML 문서</title>
</head>
<body>
</body>
</html>
- 웹 브라우저에 표시되는 웹 문서 내용은 <body> 태그와 </body> 태그 사이에 입력하면 된다. 원하는 대로 텍스트를 몇 줄 입력하면 된다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>내가 처음 만드는 HTML 문서</title>
</head>
<body>
시간이란...
내일 죽을 것처럼 오늘을 살고 영원히 살 것처럼 내일을 꿈꾸어라
</body>
</html>
- 파일을 저장한 후, 콘텍스트 메뉴를 열어 Open with Live Server 메뉴를 선택하면 웹 브라우저에서 결과를 확인할 수 있다. body 태그들 사이에 작성한 텍스트가 모두 한줄로 표시되어 있다. 웹 문서 소스에서 텍스트를 추가하면 줄바꿈 없이 모두 한 줄로 입력되기 때문이다.
- 텍스트의 어떤 부분은 제목이고 어떤 부분은 내용인지 그리고 어느 위치에서 줄을 바꿔야하는지 표시하기 위해서는 별도의 태그가 필요하다. 다음과 같이 태그를 포함하여 문서를 작성해본 후, 결과를 확인해보자.
<body>
<h1>시간이란...</h1>
<p>내일 죽을 것처럼 오늘을 살고<br>
영원히 살 것처럼 내일을 꿈꾸어라</p>
<img src="images/first.jpg">
</body>
- 다시 결과를 확인하면 어떤 부분은 제목처럼 굵고 진하게 표시되고 어떤 부분은 줄바꿈되고 이미지도 삽입되어있다. 이렇게 화면에 표시할 내용에 태그를 사용해서 역할을 구분하는 것을 마크업이라고 한다.
HTML 문서 기본 구조 살펴보기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>내가 처음 만드는 HTML 문서</title>
</head>
<body>
</body>
</html>
- 웹 문서는 <!doctype>, <html>, <head>, <body> 네가지 태그를 이용해 문서의 시작과 끝을 표시한다.
- <!doctype html>
현재 문서가 HTML5 언어로 작성된 웹 문서임을 알린다.
- <html>~</html>
웹 문서의 시작과 끝을 알린다.
웹 브라우저가 <html> 태그를 만나면 </html>까지의 소스를 읽어 HTML 문법에 맞춰 브라우저에 표시한다.
- <head>~</head>
웹 브라우저가 웹 문서를 해석하기 위해 필요한 정보를 입력하는 부분이다. 실제의 문서 내용은 아니기 때문에 문서 제목만 브라우저 창에 표시되고 나머지는 표시되지 않는다. 스타일이나 스크립트가 포함된다.
- <body>~</body>
실제로 웹 브라우저 화면에 나타날 내용이다.
<!doctype> - 문서 유형을 지정하는 선언문
- <!doctype>을 통해 지정하는 문서 유형이란 웹 브라우저에게 처리를 요청하는 문서가 HTML 문서임을 알리고 특정 버전에 맞는 방법으로 해석하라고 요청하는 것이다.
- HTML4에서는 문서 유형이 여러가지였으므로 문서 유형을 지정하는 소스도 길었지만 HTML5는 이 줄 하나로 문서 유형 선언이 가능하다.
<!doctype html>
- HTML에서는 대소문자 구별이 없지만 doctype을 좀더 강조하기 위해 <!DOCTYPE html>이라고 작성하기도 한다.
<html> - 웹 문서 시작을 알리는 태그
- <html>은 문서 정보와 내용의 시작과 끝을 표시하는 태그이다. <html> 태그는 웹 문서가 시작된다는 뜻이고, </html> 태그는 웹문서가 끝난다는 뜻이다. 따라서 </html> 태그 다음에는 아무 내용도 없다.
- 이 태그 안에는 lang이라는 사용 언어를 지정하는 속성을 포함할 수 있다. 이에 대한 속성 값은 보통 두자리 혹은 네자리로 표현된다.
| de |
en |
fr |
ja |
ko |
zh |
| 독일어 |
영어 |
프랑스어 |
일본어 |
한국어 |
중국어 |
- 사용언어를 굳이 명시하는 이유는 검색 사이트에서 특정 언어로 제한해 검색할 때 그 대상이 될 수 있기 때문이다. 예를 들어 한국어로 된 문서만 검색할 때 , 속성을 ko로 한 문서를 우선 검색하는 것이다. 또한 화면 낭독기도 언어가 명시되면 그 언어에 맞춰 발음이나 억양, 목소리 등을 다르게 들려줄 수 있다.
- <html> 태그와 </html> 태그 사이에는 <head> 태그와 <body> 태그가 포함된다.
<html>
<head>
...
</head>
<body>
...
</body>
</html>
<head> - 브라우저에게 정보를 주는 태그
- <head> 부분에는 화면에는 표시되지 않지만 브라우저가 알아야할 정보들이 포함된다. 문서에서 사용할 외부 파일들도 이곳에서 링크된다.
- <head>~</head> 사이에 들어갈 수 있는 주요 태그들은 다음과 같다.
- <title> - 문서 제목
모든 웹 브라우저의 제목 표시줄에 표시되고 해당 페이지를 방문하는 방문자나 검색 엔진은 여기에 작성된 제목을 보고 페이지 전체의 내용을 추측한다.
- <meta> - 문자 세트를 비롯한 문서 정보
화면에는 보이지 않지만 웹 문서와 관련된 메타데이터를 지정한다.
- 글자를 표시할 때 어떤 인코딩 방법을 사용할지 지정한다. 영어 이외의 문자를 화면에 표기하기 위해 미리 약속된 문자 세트 중 보통은 utf-8이라는 문자 세트를 지정한다.
- 스마트폰 등의 기기에서 웹 문서를 제대로 표시할 수 있도록 해야할 때 이 메타 태그를 사용하여 지정할 수 있다.
- 인터넷 익스플로러는 최신 웹 기술이 사용된 웹 문서를 제대로 해석하지 못하므로, 인터넷 익스플로러 사용자까지 고려해야 하는 웹 사이트를 제작할 경우에도 메타 태그를 통해 현재 웹 문서를 최신 표준 모드로 해석하라고 알려줄 수 있다.
- 웹 사이트의 키워드나 간단한 설명, 제작자 등의 정보를 지정하여 타 검색 엔진에서 검색할 때 이 정보들을 참조할 수 있도록 한다. 검색 엔진에 따라 참고하는 정보는 달라질 수 있다.
// 인코딩 문자 지정
<meta charset="UTF-8">
// 모바일 기기 고려
<meta name="viewport" content="width=device-width, initial-scale=1.0">
// 인터넷 익스플로러 브라우저 고려
<meta http-equiv="X-UA-Compatible" content="ie=edge">
// 해당 문서의 키워드
<meta name="keyword" content="html, 웹표준">
// 해당 문서의 설명
<meta name="description" content="html5를 통해 웹 표준 공유하기">
// 해당 문서의 소유자 또는 제작자
<meta name="author" content="Kyunghee Ko">
<body> - 실제 브라우저에 표시될 내용
- <body>~</body> 태그 사이에는 실제 화면에 표시될 내용을 입력한다.
- <h1> 태그는 제목을 표시하는 태그로 태그를 사용한 부분이 다른 텍스트보다 크고 진하게 표시된다.
- <p> 태그는 텍스트 단락을 표시하고 <br> 태그를 사용한 부분은 줄바꿈이 되어 다음줄부터 시작된다.
웹 문서에서 특수 문자 및 특수 기호 사용하기
- HTML 문서에서 특정 코드를 작성하면 키보드에 없는 특수 기호를 화면에 표시할 수 있다.
- 특히, HTML 소스에서는 몇개의 공백이든 하나의 공백으로 취급하기 때문에 여러개의 공백을 나타내려면 공백을 나타내는 특수 기호를 여러개 입력해야 한다. 또한 따옴표도 속성값을 감싸는 따옴표로 인식하므로 그대로 따옴표를 사용하면 안된다. 마찬가지로 꺾쇠 괄호도 태그로 인식하므로 그대로 사용하면 안되며 미리 약속된 다른 이름이나 표기법을 사용해야 한다. 이 표기법을 엔티티 이름 또는 엔티티 기호라고 부른다.
- W3C에서 제공하는 엔티티 코드표는 https://dev.w3.org/html5/html-author/charref 에서 확인가능하다.
- 엔티티 이름이나 엔티티 코드 뒤에 오는 세미콜론은 꼭 붙여야 한다.
웹 문서 만들고 업로드하기
호스팅 서버 준비하기
- HTML로 웹사이트를 만들고 다른 사람도 볼 수 있게 하기 위해서는 HTML로 만든 웹 문서를 서버로 컴퓨터로 옮겨야 한다.
- 개인은 웹 서버를 마련하기 어려우므로 정기적으로 금액을 내고 서버의 일부 공간을 빌려 사용한다. 개인 웹 사이트 운영자들은 대부분 호스팅 서비스를 이용한다.
- 웹 사이트를 안정적으로 운영하기 위해서는 유료 호스팅이 권장된다. 무료 호스팅 서비스는 서버에 있는 파일을 백업해주지 않으므로 중요한 파일이라면, 스스로 백업해놓아야 한다.
- 호스팅 서비스는 어떤 서버를 이용하느냐에 따라 윈도우 서버 호스팅과 리눅스 서버 호스팅으로 나뉜다. 윈도우 서버에서는 ASP, ASP.NET 프로그래밍 언어를 사용하고, 리눅스 서버에서는 PHP 프로그래밍 언어를 사용하며 좀 더 대중적이고 저렴하다. 이외에도 클라우드 서버를 사용한 클라우드 서버 호스팅도 많이 최근 많이 사용된다.
닷홈에 무료 호스팅 서비스 신청하기
- 닷폼의 호스팅 서비스는 1년간 무료로 사용할 수 있으며, 1년이 지나면 연장 신청을 해야 무료로 계속 사용할 수 있다.
- 닷홈 사이트에서 회원 가입을 한다.
- 무료 호스팅을 신청한다. FTP 아이디는 다른 것으로 변경할 수 있으나, FTP 접속 주소와 아이디, 비밀번호는 반드시 기억해야 한다.
- 무료 호스팅 신청이 완료되면 "FTP아이디.dothome.co.kr" 도메인 주소를 통해 접속할 수 있고 이곳에 웹 문서를 올릴 수 있다.
- 서버에 파일을 업로드/다운로드 하기 위해서는 FTP 프로그램이 필요하다.
- FTP(File Transfer Protocol) : 서버와 클라이언트 간의 파일을 주고 받을 수 있게 해주는 파일 전송 프로토콜
- FTP 프로그램 : 서버와 클라이언트 간의 파일 전송을 쉽게 해주는 프로그램
ex) FileZilla, 다FTP, CuteFTP 등의 FTP 프로그램, FTP 기능이 내장된 편집기
- FileZilla는 서버용과 클라이언트용이 따로 있으며 우리가 사용할 프로그램은 클라이언트용이다.
- FileZilla 설치 후, 프로그램을 실행하여 호스트 칸에 FTP 접속 주소를 입력하고, 사용자명에는 FTP 아이디, 비밀번호에는 FTP 비밀번호를 입력하여 FTP 서버와 연결한다.
- FTP 서버와 정상 연결되면, FIleZilla 화면 오른쪽에 FTP 서버의 내용이 표시된다. 아직 아무 내용이 없으므로 html 폴더만 보인다.
- FTP 서버에 정상 접속하는 것을 확인했다면 서버 연결 종료 아이콘을 눌러 연결을 종료할 수 있다.
내가 만든 문서 웹 서버에 올리고 확인하기
- FileZilla 프로그램을 실행하여 FTP 서버에 접속한다.
- 로컬 사이트 창에서 폴터를 찾아 클릭하여 HTML 문서를 불러온다.
- 왼쪽 로컬 사이트 영역에 있는 first.html 파일과 images 폴더를 동시에 선택한 후 오른쪽 리모트 사이트 영역으로 드래그하여 파일을 서버에 올린다. 웹 문서에 사용되는 여러가지 부가적인 파일들도 로컬 컴퓨터에 있던 폴더 구조 그대로 함께 웹 서버에 올려야 한다.
- 도메인 주소를 통해 해당 사이트로 접속하여 화면을 확인한다.
블로그와 게시판에서 사용하는 HTML 태그
위지위그 편집기
HTML에 대해 잘 몰라도 워드나 한글 문서를 만들듯이 문서를 작성할 수 있는 편집기이다. 편집기에서 HTML 태그로 자동으로 바꿔주므로 불필요한 태그가 붙기도 한다.
예를 들어 티스토리에서는 기본모드가 아닌 HTML 모드를 선택하면 편집기에서 작성된 내용을 HTML 코드로 바꾼것을 확인할 수가 있다. 이렇게 자동으로 만들어진 소스태그들은 웹 표준을 고려하지 않고 화면에 표시된 결과만을 고려하여 작성되었기 때문에 바람직한 소스는 아니다.