01 HTML 기본기 다지기

01-1 HTML이란

HTML이란 HyperText Markup Language의 약자로, 하이퍼텍스트를 마크업하는 언어를 뜻한다.

하이퍼텍스트는 웹 사이트의 링크를 클릭할 때 다른 문서나 사이트로 이동할 수 있는 기능을 말하고, 마크업은 태그를 사용해 문서에서 어느 부분이 제목, 본문, 사진 등인지 표시하는 것이다.

HTML은 웹에서 자유롭게 오갈 수 있는 웹 문서를 만드는 언어로서의 역할을 하며, 웹 브라우저나 기기 제약 없이 페이지를 열기 위한 웹 표준을 지킨 언어이다.

HTML5과 CSS의 용도

  • 최신 웹 표준에 맞는 웹 사이트 제작
  • 앱 화면 구성
  • 사용자 동작에 반응하는 인터랙티브 사이트 제작
  • 웹 사이트와 블로그 수정이 용이

01-2 웹 브라우저와 웹 편집기

웹 브라우저: 웹 문서를 화면에 표시해 주는 프로그램

  • 웹 브라우저의 종류: 크롬, 파이어폭스, IE, 엣지, 사파리, 오페라 등.
  • 현재 구글 크롬 최신 버전이 HTML5 지원 정도가 가장 높다.

웹 편집기: HTML 태그를 입력하는 프로그램. 텍스트를 입력할 수 있는 프로그램이면 모두 사용 가능하다.

  • 웹 편집기의 종류: 노트패드++, 에디트 플러스, 드림위버 등.
  • IDE: 웹 뿐 아니라 다른 언어를 포함한 개발 환경 구축. 비주얼 스튜디오, 웹스톰, 서브라임 텍스트 등.

01-3 HTML 기본 문서 구조

태그

태그란 마크업할 때 사용하는 표기법을 뜻한다. 즉 어디가 텍스트이고 이미지인지 표시하기 위한 표기법이다.

태그의 특징

  • < > 사용
  • 소문자로 표기
  • 여는 태그와 닫는 태그를 구분
  • 가독성을 위해 들여쓰기

  • 속성과 함께 사용 가능
    ex) 이미지를 삽입할 경우 <img> 태그와 함께 src, width, height, alt 등의 속성을 붙일 수 있다.

    <img src="image.jpg" width="350" height="290" alt="설명">
  • 포함 관계를 명확히 해야 한다.

HTML 문서 구조

일반 문서와 달리 정해진 형식에 맞추어 내용 작성. <!doctype>, <html>, <head>, <body> 네 가지의 태그를 이용해 문서의 시작과 끝을 표시한다.

  • <!doctype>: 현재 문서가 HTML5 언어로 작성된 웹 문서라는 뜻.
  • <html>: 웹 문서의 시작과 끝. 이 태그 사이의 소스를 읽어 HTML 문법에 맞추어 브라우저에 표시한다.
  • <head>: 웹 브라우저가 웹 문서를 해석하기 위해 필요한 정보를 입력하는 부분. 실제 문서의 내용이 아니기 때문에 제목만 표시되고 나머지는 브라우저에 표시되지 않는다. 스타일이나 스크립트 등도 이곳에 포함된다.
  • <body>: 실제로 웹 브라우저 화면에 나타날 내용.

<!doctype>

<!doctype>은 문서 유형을 지정 해주는 태그이다. 이후 처리할 문서는 HTML이고, 어떤 유형을 사용했으니 그 버전에 맞는 방법으로 해석하라는 것을 웹 브라우저에게 알려주는 역할을 한다. HTML4까지는 문서 유형을 지정하는 것이 복잡했으나, HTML5에서는 한 줄로 문서 유형을 선언한다.

<!doctype html>

<html> 태그

<html> 태그는 웹 문서 시작 을 알리는 태그이다. lang이라는 속성을 사용해 문서에서 사용할 언어를 지정할 수 있다.

<html lang="ko">

언어 정보를 명시하는 이유는 검색 사이트에서 특정 언어로 제한하여 검색할 때 대상이 될 수 있기 때문이다. 또한 웹 문서를 음성 변환할 때 명시된 언어에 맞는 발음과 억양 등을 적용할 수 있다.

head 태그

<head>는 웹 브라우저가 알아야 할 정보를 제공 하는 태그이다. 또한 문서에서 사용할 외부 파일도 이곳에서 링크한다. <head>에서 사용하는 주요 태그들은 다음과 같다.

  • <title>
  • <meta>
  • <style>
  • <link>

<title>: 웹 브라우저 제목 표시줄에 문서 제목 표시

<title>문서 제목</title>


<meta>: 문자 인코딩 및 문서 키워드, 요약 정보

태그의 가장 중요한 부분은 문자 인코딩을 지정하는 것이다. 한글을 표시하기 위해 HTML5에서는 한글과 영문을 모두 표시할 수 있는 utf-8 방식을 사용한다.

<head>
  <meta charset="utf-8">
</head>

인코딩 이외에 문서에 대한 간단한 설명도 지정할 수 있다.

<meta name="description" content="사이트에 대한 짧은 설명 입력">

<body> 태그

<body>에는 실제 브라우저에 표시되는 내용 이 입력된다.

웹 문서에서 특수 기호 사용하기

HTML 소스에서는 공백이나 괄호 등의 문자를 표시할 때 특수한 기호를 사용한다.

화면 표시 특수 기호
& &
(공백)  
< <
> >
( (
) )
, ,
- -
; |
” "
’ &actue;
; &semi;

참고 - https://dev.w3.org/html5/html-author/charref

01-4 웹 문서 만들고 업로드하기

호스팅 서버와 FTP 프로그램이 필요하다.

호스팅 서버

HTML로 만든 웹 문서를 다른 사용자들이 볼 수 있도록 하려면 서버 컴퓨터로 옮겨야 한다. 서버의 일부 공간을 일정 금액을 내고 사용하는 서비스를 서버 호스팅 서비스 라고 한다.

FTP 프로그램

서버에 파일을 올리고 내리기 위해 필요한 것이 FTP 프로그램이다. 다운로드와 업로드를 도와준다.


References