금일 부터 "웹 기술로 앱 개발자 되기" 시리즈 강의를 진행해 볼까 합니다.
스스로 그 동안 사용하던 웹 기반 기술들에 대한 복습을 겸한 강의여서 html -> css -> javascript 의 순으로 먼저 정리하고,
추가로 es6 -> react -> graphql + mongodb 의 순으로 진행해 볼까 합니다. 기간은 두어달 정도로 예상을 해 봅니다.
목표는 여름휴가 전 마무의리!
긴 여정이 될 것 같지만, 웹 개발자 또는 웹 기술을 통해 앱을 개발해 보고 싶은 분들에게 조금이라도 도움이 되었으면 하는 바램으로 차근차근 정리해 보도록 하겠습니다.
그럼 웹의 가장 기본이 되는 HTML 부터 알아보기로 하겠습니다.
HTML 이란?
HTML 은 Hyper Text Markup Language 의 약자로 하이퍼 링크(브라우저에서 특정 버튼이나 문자열을 누르면 관련 컨텐츠 페이지로 즉시 이동할 수 있는 컨텐츠 끼리의 연결)를 갖는 문자열의 주변에 Mark(태그라고도 하는 특별한 의미와 역할을 갖는 약속된 문자들) 를 배치하는 언어입니다.
HTML 은 웹 페이지를 만들기 위한 표준 Markup Language (문자열의 주변에 특별한 태그, 마크를 추가하는 언어) 로 아래와 같은 특징을 가집니다.
- HTML 은 Markup 을 통해 문서의 구조를 자체에 포함합니다.
- HTML elements(구성요소) 는 전체 HTML 페이지를 이루는 부품이 됩니다.
- HTML 은 여러 종류의 태그(tag) 들로 이루어 집니다.
- HTML 은 포함하고 컨텐츠의 종류(heading, paragraph, table)별로 이름을 부여하여 관리합니다.
- 브라우저는 HTML 태그를 문자 그대로 출력하지 않고, 태그별로 사전에 정의된 출력형식으로 변환하여 사용자에게 출력해 주는 역할을 담당합니다.
간단한 HTML 문서 샘플
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
위는 가장 단순한 형태의 HTML 문서 예시입니다. 하나씩 구성요소들을 살펴보면,
<!DOCTYPE html>이 문서 파일이 HTML5 이라는 선언입니다. DOCTYPE = html 이라는 뜻이되죠<html>태그는 HTML 문서의 가장 상위 부모가 됩니다. html 은 계층적인 구조를 지녀서 자식을 포함한 부모 개체들로 구성이 되구요. 최상위 조상이 이 태그가 됩니다.<head>태그에는 이 문서에 대한 Meta (설명, 분류 등 문서의 내용이 아닌 문서 자체에 대한 추가 정보들을 메타라 하죠) 정보들이 담깁니다.<title>태그 영역에는 문서의 제목이 담깁니다.<body>태그 영역에는 사용자에게 보여지는 문서의 내용이 실제로 담깁니다.<h1>태그 영역에는 문서영역의 제목을 담기고, 브라우저 에서는 큰 글자로 h1 태그에 담긴 문자를 출력하게 됩니다.<p>태그는 Paragraph, 즉 실제 문단의 내용을 정의합니다.
위의 HTML 은 브라우저에서는 이렇게 출력(Rendering) 됩니다.
브라우저는 당연히 모든 태그들을 해석해서 출력의 대상이 되는 Contents 만을 Rendering 하기 때문에 위와 같이 h1 태그와 p 태그의 내용만이 출력이 된 것을 확인 할 수 있습니다.
HTML 태그?
HTML 태그는 HTML 문서에서 꺽인 괄호로 둘러쌓인 실제 문서 구성요소(elements) 를 의미합니다.
<tagname>context goes here...</tagname>
<태그이름>내용... </태그이름>
- HTML 태그는 보통 여는 태그와 닫는 태그가 쌍으로 있어야 합니다. 예시)
<p>와</p> - 먼저 오는 태그가 여는 태그가 되고, 나중에 오는 태그가 닫는 태그가 됩니다.
- 닫는 태그는 여는 태그와 태그이름은 같지만 태그이름 앞에
/를 추가해서 다는 태그임을 반드시 밝혀야 합니다.
( 여는 태그와 닫는 태그를 시작 태그, 종료 태그 라고도 합니다. )
웹 브라우저 ?
웹 브라우저는 말 그대로 HTML 문서를 읽고 화면에 출력(Browsing) 해 주는 프로그램을 말합니다.
인터넷 익스플로러, 크롬, 파이어폭스, 사파리 등이 모두 웹 브라우저 입니다.
웹 브라우저는 HTML 태그를 출력하지 않고, 태그를 읽어서 문서의 내용을 태그에 지시한 형태에 맞추어 출력을 합니다.
태그의 지시가 없다면 지금 보는 화면처럼 보기 좋게 내용이 출력되지 않게 되겠죠?
HTML 페이지 기본 구조
HTML 페이지의 구조는 아래와 같습니다.
html 태그가 head 태그와 body 태그를 가지고 있고, head 태그는 title 태그를 가지고 있고, body 태그는 하나의 h1 태그와 두 개의 p 태그를 가지고 있는 형태 입니다.
이와 같이 HTML 페이지는 계층적인 구조(부모와 자식, 또는 나무 형태) 를 갖게 되는 데요. 이를 Document Object Tree 라고 하며 DOM 에 대해서는 나중에 더 자세히 다루도록 하겠습니다.
<!DOCTYPE> 선언
모든 HTML 과 같은 마크업 문서에는 본문 내용이 오기 전에 몇가지 Meta 정보를 갖게 되는 데요. 그 중 html 문서에서 가장 처음 보게 되는 <!DOCTYPE> 에 대해 알아 보도록 하겠습니다.
<!DOCTYPE> 선언은 문서의 종류를 선언하여 브라우저가 문서를 올바로 출력할 수 있도록 도와주는 역할을 합니다.
같은 html 문서이더라도 이 선언에 따라 출력하거나 해석하는 약속이 달라서 이 선언이 올바르지 않으면 의도한데로 출력되지 못하고 문서 모양이 이상하게 엉크러 져서 출력될 수도 있으니 반드시 현재 사용하는 html 의 규격에 맞게 선언을 해 주어야 합니다.
<!DOCTYPE> 은 문서의 종류를 선언하기 때문에 문서의 가장 처음에 선언하게 되며 한번만 선언되어야 합니다.<!DOCTYPE> 은 대소문자를 가리기 때문에 반드시 대소문자를 잘 구분해서 선언되어야 합니다.
참고로 HTML 문서가 표준이 되고, 계속 발전되어 온 이력은 아래와 같습니다.
| HTML버전 | 표준제정 연도 |
|---|---|
| HTML | 1991 |
| HTML 2.0 | 1995 |
| HTML 3.2 | 1997 |
| HTML 4.01 | 1999 |
| XHTML | 2000 |
| HTML5 | 2014 |
현재는 2014년에 표준이 된 HTML5 가 표준적으로 쓰이기 때문에 <!DOCTYPE html> 형식으로만 사용하면 됩니다.
본 포스트에서는 HTML 자체에 대해 알아 보았고, 다음에는 HTML 편집을 하기 위한 편집기에 대해 간단히 살펴 보도록 하겠습니다.
'Programming JavaScript > HTML' 카테고리의 다른 글
| 웹 기술로 앱 개발자 되기 시리즈 - HTML 제목 태그 (0) | 2018.05.28 |
|---|---|
| 웹 기술로 앱 개발자 되기 시리즈 - HTML 태그 속성 (0) | 2018.05.26 |
| 웹 기술로 앱 개발자 되기 시리즈 - HTML 기본구성요소 (0) | 2018.05.25 |
| 웹 기술로 앱 개발자 되기 시리즈 - HTML 기본 태그 (0) | 2018.05.24 |
| 웹 기술로 앱 개발자 되기 시리즈 - HTML 편집도구 준비 (1) | 2018.05.23 |