본문으로 바로 이동 페이지 설정으로 이동 메뉴로 이동
페이지 설정
  • 어떠한 의견도 좋습니다. 웨버스터디가 더 나은 모습이 되도록 의견을 보내주세요.

HTML 소개

최초 작성일
최종 수정일
이번 시간에는...
웹의 세가지 요소 중 HTML의 역할과 특징이 무엇인지 알아보고, HTML 기본 태그 문법을 살펴보면서 왜 마크 업인지, 그리고 왜 중요한 지에 대해 알아봅니다.

웹의 세가지 요소

일단 HTML을 시작하기 전에 앞서 소개 글에서 살펴보았던 웹의 3요소에 대해서 다시 간단하게 살펴보도록 하겠습니다.

웹 페이지는 내용을 담당하는 HTML외형을 담당하는 CSS 그리고 동작을 담당하는 JavaScript로 이루어져있습니다.

그렇다면 왜 하나로 만들지 않고, 굳이 세가지를 나누어 놨을까요?

처음부터 이에 대해 자세히 설명하진 않겠습니다. 다만 이렇게 나누어져 있는 것이 여러분에게 웹 페이지를 더 쉽게 관리할 수 있게 한다고 말씀 드립니다.

예를 하나 들어 만약 여러분이 홈페이지를 만들게 된다면, 분명 그 홈페이지에는 단 한 개의 페이지가 아닌 여러 개의 페이지로 구성되어있을 것입니다. 만약 여러분의 많은 내용을 담느라 약 백여 개의 페이지를 만들었다고 가정 합시다. (intro.html, 1.html, 2.html ... 100.html 이런 식으로요) 여기서 페이지의 제목 글이 붉은색 글씨였는데, 이제 여러분은 이 글씨를 파란색으로 바꾸고 싶은 상황이 왔습니다.

어떻게 해야 할까요? 만약 역할이 분리되지 않고 html에 모두 담았다면, 여러분들은 페이지마다 다 열어서 수정해야 합니다. 정말 끔찍한 상황이죠. 그나마 다 잘해내면 다행인데 그 중에 실수가 있을 수도 있습니다.

하지만, 분리되어있기에 여러분은 css에서 간단하게 글씨색상 부분만 수정해주면 모든 페이지들이 일괄적으로 변경됩니다. 너무나도 간단하게 할 수 있는 일입니다.

그만큼, 각 역할별로 나뉘어져 있다는 것은 정말 큰 축복입니다. 그럼 이제 그 중 내용을 담당하는 HTML에 대해 알아보겠습니다.

여러분은 일괄적인 수정을 위해서 Ctrl+C, Ctrl+V를 많이 사용합니다.
여러분을 복사기로 만들지 마세요.

하이퍼 텍스트 마크업 랭귀지 (Hyper Text Markup Language)

이제 본격적으로 HTML에 대해 알아보도록 하겠습니다.

지난 소개 글에서 말씀 드렸듯이 HTML은 (Hyper Text Markup Language)의 약자입니다. 이제 저 영어구문을 살펴보겠습니다.

먼저 앞의 하이퍼텍스트(Hyper Text)는 여러분이 본문 중에 클릭했을 때에 페이지가 이동하는 링크라고 보면 됩니다. 웹 페이지는 이 하이퍼텍스트를 통해서 서로 연결되어있습니다.

이 텍스트는 구글로 이동하는 하이퍼텍스트 입니다.

그 다음 마크 업 랭귀지(Markup Language)에서 랭귀지(Language)는 그냥 언어라는 뜻이고, 마크 업이라는 것은 다음과 같이 생각하시면 이해가 되실 겁니다.

여러분이 학교에서 수업을 듣고 있다고 가정 합니다. 수업을 듣는 동안 이른바 족집게 선생님들이 자주 쓰시는 말이 있죠. '여기에 밑줄 쫙!' 그러면 여러분들은 그 곳에 밑줄을 치거나, 형광 펜으로 색을 칠합니다. 이러한 것이 바로 마크 업입니다.

자 그럼 다음의 예시 문서를 보면서 왜 마크 업을 하는지를 살펴보겠습니다.

아래의 글에서 어디가 제목이고 어디가 본문일인지 체크해보시기 바랍니다.

HTML

역사

개발
1980년, 유럽 입자 물리 연구소(CERN)의 계약자였었던 물리학자 팀 버너스리가 HTML의 원형인 인콰이어를 제안하였다.
~ 중략 ~
버너스리의 개인적인 기록에 1990년부터 "하이퍼텍스트가 사용되는 여러 분야의 일부"를 열거했고 백과사전을 그 목록의 첫 번째로 두었다.

최초 규격
HTML 최초의 일반 공개 설명은 1991년 말에 버너스리가 처음으로 인터넷에서 문서를 "HTML 태그"(HTML tag)로 부르면서 시작되었다.
출처 : 위키피디아

답은 아래와 같습니다.

HTML 대 제목

역사 중 제목

개발 소 제목
1980년, 유럽 입자 물리 연구소(CERN)의 계약자였었던 물리학자 팀 버너스리가 HTML의 원형인 인콰이어를 제안하였다. 본문
~ 중략 ~
버너스리의 개인적인 기록에 1990년부터 "하이퍼텍스트가 사용되는 여러 분야의 일부"를 열거했고 백과사전을 그 목록의 첫 번째로 두었다. 본문

최초 규격 소제목
HTML 최초의 일반 공개 설명은 1991년 말에 버너스리가 처음으로 인터넷에서 문서를 "HTML 태그"(HTML tag)로 부르면서 시작되었다. 본문
출처 : 위키피디아

아마 여러분은 직감적으로 무엇이 제목이고 무엇이 문단인지 알 수 있으셨을 겁니다. 마크 업은 이렇게 문서의 내용에서 어느 부분이 어느 역할을 하는지 명시 해주는 것입니다.

왜 마크 업일까?

그렇다면 왜 그냥 보면 알 수 있는 것을 왜 굳이 명시를 해줘야 할까요?

왜냐하면 여러분의 웹에 접근하는 존재가 너무 다양하기 때문입니다.

웹 서핑이라는 것은 누구나 할 수 있습니다. 설령 눈앞이 보이지 않는 시각장애이라 할지라도, 스크린리더라는 화면을 음성으로 읽어주는 프로그램을 통해서 웹 서핑을 합니다. 또한 심지어 사람이 아닌 존재도 여러분의 홈페이지를 방문합니다. 바로 검색엔진이죠. 검색엔진 역시 여러분의 웹 페이지를 읽습니다.

그렇다면, 검색엔진이나 스크린 리더는 위의 글이 어떻게 읽히게 될까요?

HTML 역사 개발 1980년, 유럽 입자 물리 연구소(CERN)의 계약자였었던 물리학자 팀 버너스리가 HTML의 원형인 인콰이어를 제안하였다. ~ 중략 ~ 버너스리의 개인적인 기록에 1990년부터 "하이퍼텍스트가 사용되는 여러 분야의 일부"를 열거했고 백과사전을 그 목록의 첫 번째로 두었다. 최초 규격 HTML 최초의 일반 공개 설명은 1991년 말에 버너스리가 처음으로 인터넷에서 문서를 "HTML 태그"(HTML tag)로 부르면서 시작되었다.
출처 : 위키피디아

마크 업을 하지 않는다면 이런 식으로 읽게 됩니다. 여기서 어디가 제목이고, 어디가 문단일까요? 이제는 여러분들도 찾기 힘들어졌습니다. 시각장애인은 읽으면서 앞뒤 문맥으로 유추를 할 수 있을지도 모르겠지만, 눈치 없는 검색엔진은 이것을 어떻게 받아드릴까요?

이 세상에는 수 없이 많은 웹 페이지들이 존재하고, 또 계속해서 생겨나고 있습니다. 우리는 그 중에서 우리에게 필요한 정보만을 검색합니다. 만약 여러분이 제대로 마크 업을 하지 않는다면, 어쩌면 당신의 웹 페이지는 검색되지 않은 채로 그저 어딘가 존재하는 것으로 만족해야 할 수 있습니다. 그렇기 때문에 마크 업은 웹 페이지 제작에 있어서 너무나도 중요한 요소입니다.

마크 업 태그 형태

그렇다면 html문서 안에서 마크 업을 어떻게 해야 할까요?

HTML의 역사 제목
1980년, 유럽 입자 물리 연구소(CERN)의 계약자였었던 물리학자 팀 버너스리가 HTML의 원형인 인콰이어를...

저 위의 'HTML의 역사'이라는 문구가 제목 부분인지를 어떻게 표시를 해줄까요?

바로 해당 부분을 태그(Tag)로 감싸주는 것입니다.

위와 같이 "< >"의 형태로 이루어진 태그로 해당 영역을 감싸주면 되는데요, <tag>의 형태로 시작해서 </tag> 형태로 끝이 납니다. 그래서 그 사이에 텍스트가 해당 태그의 의미를 가지고 있다는 뜻이 됩니다.

<tag>와 같이 시작하는 태그를 '여는 태그 (Opening Tag)'라 하고요, </tag>와 같이 끝내는 태그를 '닫는 태그 (Closing Tag)'라고 합니다. 정확히 명칭을 꼭 외우실 필요는 없습니다.

그렇다면 앞의 예문을 태그로 감싸 보겠습니다.

이런 식입니다. 저기서 <h1>은 제목이라는 의미를 가지고 있고, 아래 <p>는 문단이란 의미를 가지고 있습니다. 태그 종류들은 나중에 다시 살펴보겠습니다. 일단 마크 업을 어떠한 원리로 작성하는 지만 이해하세요.

그럼 다음 강의에서 html파일을 만들어 보도록 하겠습니다.

요점 정리
  • 웹의 3요소(HTML, CSS, JS)의 분리는 사이트의 구축/유지보수의 생산성을 높여줌.
  • 웹 페이지는 하이퍼텍스트로(Hyper Text) 서로 연결
  • 마크 업 - 페이지를 읽는 컴퓨터가 내용의 의미를 알 수 있도록 의미를 부여
  • <tag>내용</tag>의 방식으로 태그를 마크 업.

이 글이 유용하셨다면 친구들에게 공유 해주세요.