HTML 총정리.
HTML에 관하여 얘기를 해 보도록 하겠습니다. 웹 개발은 항상 HTML부터 시작합니다. HTML의 개념을 정리한 후 HTML 문서가 어떤 구조로 이루어졌는지 알아보겠습니다. HTML의 기본 구조에 따라 웹 문서를 만드는 방법도 함께 살펴봅니다. 지금부터 HTML이 무엇인지 간단히 살펴보고, HTML 태그를 붙인 텍스트가 웹 브라우저에서 어떻게 표시되는지 알아보겠습니다. 요즘은 대부분의 업무를 인터넷만 있으면 처리하지요? 더 나아가 자동차 내비게이션이나 티브이, 냉장고에 이르기까지 웹 브라우저만 있다면 어느 기기에서나 인터넷과 연결되는 사물 인터넷 시대입니다. 이렇게 다양한 인터넷 정보를 웹 브라우저에 보여 줄 때 사용하는 언어가 HTML입니다. HTML은 간단히 줄여서 웹 문서를 만드는 언어라고 할 수 있습니다. HTML은 하이퍼텍스트 마크업 랭귀지의 줄임말입니다. 하이퍼텍스트란 문서를 서로 연결해 주는 링크를 의미합니다. 인터넷에서 링크만 클릭하면 다른 페이지나 사이트로 쉽게 연결할 수 있죠? 이렇게 HTML에는 서로 연결한다는 의미가 포함되어 있습니다. 그리고 마크업 이란 표시한다는 뜻이지요? 그러니까 웹브라우저에 내용을 보여 주는 텍스트, 이미지, 영상 등의 위치를 표시하는 것을 의미합니다. 우리가 자주 사용하는 엑셀, 워드 파일과 같은 일반 문서는 내용을 입력하는 프로그램과 입력한 내용을 확인하는 프로그램이 같습니다. 예를 들어 워드 파일로 표를 만든다면 워드 프로그램에서 제공하는 기능을 사용해서 표를 입력합니다. 그리고 나중에 이 파일을 워드 프로그램에서 불러와서 만들었던 표를 그대로 사용할 수 있습니다. 하지만 02장에서 공부한 것처럼 웹 문서는 내용을 작성하는 프로그램과 그 내용을 확인하는 프로그램이 다릅니다. 예를 들어 웹 문서에서 표를 만들 때 웹 브라우저에서 바로 표를 삽입할 수 없습니다. 비주얼 스튜디오 코드 같은 웹 편집기에서 마크업 형식으로 표를 작성해야 합니다. 그러면 오른쪽 그림처럼 웹 브라우저는 각각 제목, 텍스트, 표로 인식해서 나타냅니다. 이때 웹 브라우저가 어느 부분이 제목, 텍스트 또는 표인지 구별할 수 있도록 꼬리표를 붙여야 합니다. 이러한 꼬리표를 태그라고 합니다. HTML의 기본 기능은 웹 브라우저에 보여 줄 내용에 마크업하고 문서끼리 링크하는 것입니다. 글자를 보기 좋게 꾸미거나 문서의 배치를 다양하게 바꾸는 것은 둘째 마당에서 공부할 스타일 시트의 기능입니다. 자, 그럼 HTML의 문서 구조부터 살펴볼까요? 이제부터는 HTML을 하나하나 공부하면서 소스를 직접 작성해 보고 웹 브라우저에서 어떻게 확인하는지 알아보겠습니다. HTML을 처음 공부한다면 이 부분은 반드시 배우고 넘어가세요. 파일 탐색기에서 03/index.html 파일을 더블클릭해서 웹 브라우저로 열면 맨 위에는 제목 텍스트가 있고 가로선 아래에 세 줄의 텍스트가 있는 간단한 문서입니다. 이 예제 파일은 어떠한 구조로 되어 있고 어떤 태그를 사용해서 만들었을까요? 비주얼 스튜디오 코드에서 03/ index.html 파일을 불러와서 확인해 봅시다. 작업 폴더 목록에서 03 폴더를 선택하고 파일을 클릭하면 오른쪽 편집 창에 소스 코드가 나타납니다. 이제부터 이 웹 문서를 바탕으로 HTML의 기본 구조를 차근차근 살펴보겠습니다. HTML 문서는 일반 문서와 달리 정해진 형식에 맞추어 내용을 입력해야 합니다. HTML 문서의 기본 구조를 살펴보겠습니다. 소스가 짧더라도 이 안에는 HTML 문서에 꼭 필요한 모든 구조가 포함되어 있습니다. 웹 문서는 보통 3개의 영역으로 구성되어 있습니다. HTML 문서의 기본 구조를 살펴보았습니다. 이어서 HTML 문서에 사용한 4가지 태그를 자세히 알아보겠습니다. 웹 문서의 첫 부분은 문서 유형을 지정하는 태그로 시작합니다. 웹 브라우저에 현재 문서가 HTML5 문서라고 알려 주는 것이죠. 다음과 같이 작성하면 웹 브라우저는 아하, 이 문서는 HTML5에 맞추어 작성한 웹 문서구나! 라고 이해합니다. HTML 태그의 문서의 유형을 선언한 후 HTML 파일의 시작과 끝을 표시합니다. HTML 태그는 웹 문서가 시작된다는 뜻이고 HTML 태그는 웹 문서가 끝났다는 듯입니다. 다음과 같이 HTML과 HTML 태그 사이에 웹 문서 소스를 작성하면 됩니다. HTML 태그 뒤에는 아무 내용도 없어야 합니다. 웹 브라우저에 문서 정보를 알려주는 헤드 태그를 알아보겠습니다. 헤드 영역의 내용은 대부분 웹 브라우저 화면에는 보이지 않습니다. 웹 브라우저가 알아야 할 정보를 입력하는 곳이니까요. 또한 문서에서 사용할 스타일시트 파일도 이곳에서 연결해 주죠. 헤드 영역에서 사용하는 미터, 타이틀 태그부터 배워 볼까요? 흔히 메타 정보라고 하면 데이터에 관한 데이터를 말합니다. 책의 메타 정보로 가격, 쪽수, 지은이 등이 있는 것처럼 웹 문서의 메타 태그도 비슷합니다. 메타 태그는 웹 브라우저에는 보이지 않지만 관련된 정보를 지정할 때 사용합니다. 메타 태그의 가장 중요한 역할은 화면에 글자를 표시할 때 어떤 인코딩을 사용할지 지정하는 것입니다. 웹 서버는 영어가 기본이므로 홤녀에 한글로 된 내용을 표시할 때는 문자 세트를 사용한다고 웹 브라우저에 다음과 같이 알려 줘야 합니다. 오늘 가져온 주제는 어떠셨나요? 다음 시간에는 더 유익한 주제를 가지고 오겠습니다. 감사합니다.