HTML+CSS 기초 강의 - 3. HTML 문서의 기본 구조 알기
HTML 문서의 기본 구조를 알기 전에 HTML 문서가 어떻게 생겼는지 간단히 알아모도록 하겠습니다.
크롬 웹브라우저 기준으로 보고 있는 현재 강의 화면에서 마우스 오른쪽 버튼을 누르면 컨텍스트 메뉴가 표시됩니다.
"페이지 소스보기"(Ctrl+U) 를 선택하면 별도의 탭이나 창에 현재 보고 있는 이 강의 페이지의 HTML HTML 문서 소스가 보입니다.
이처럼 모든 웹상의 페이지는 소스를 볼 수 있는 공개된 문서입니다.
아주 복잡해 보이는 HTML 문서도 기본적인 구조는 다 동일합니다.
사용하는 태그의 종류도 많아야 20~30개 안쪽이기 때문에 기본적인 태그에 대한 이해정도만 생기면 대충의 문서 구조를 보는 것도 그리 어렵지 않게 됩니다.
아주 간단한 HTML 문서 예를 들어 보면 다음과 같습니다.
<!doctype html><html><head> <meta charset="utf-8"> <title>아주 간단한 HTML 문서 예</title></head><body> <h1></h1> <div> <p><span>아주 아주 간단한 HTML 문서를 보여주는 예 입니다.</span></p> <img src="./images/logo.jpg"> </div></body></html>
위 문서를 보면 태그는 꺽쇠 괄호로 싸여져 있는 <html> 과 같은 부분이 보일 것입니다. 이것이 태그입니다.
태그는 일반적으로 여는 태그와 닫는 태그가 쌍으로 이루어져 있습니다.
여는 태그와 닫는 태그 안에는 태그로 표시할 내용이 오거나, 다른 태그가 올 수 있습니다.
즉, 태그는 다시 다른 태그로 감싸 단계별로 중첩시킬 수 있습니다.
태그 중 일부 태그는 닫는 태그 없이 단일 태그 만으로 그 기능을 하는 태그도 있습니다.
<img> 태그는 태그 단독으로 이미지를 문서 안에 표시하는 기능을 하며, 닫는 태그가 없습니다.
이렇게 태그를 사용해서 텍스트 내용과 이미지, 멀티미디어 컨텐츠를 HTML 문서로 표현하는 것을 마크업 한다고 합니다.
문서 구조를 하나하나 살펴보겠습니다.
맨위에는 <!doctype html> 이 있습니다.
이 표시는 HTML5 문서 규격인 HTML 문서임을 표시하는 태그입니다.
다음으로
<html></html>
태그가 옵니다. 이 태그는 모든 HTML 문서의 태그를 품는 루트 태그로 모든 태그는 이 태그 안에 위치해야 합니다.
<html> 태그 안에는
기본적으로 <haed></head> 와 <body></body> 태그 2개가 기본으로 옵니다.
<head> 태그 안에는 HTML 문서에 대한 기본적인 정보를 표시하는 태그들이 옵니다. 그리고 내부 CSS가 위치합니다. 외부 CSS 파일이나 Javascript 파일 링크도 여기에 옵니다.
HTML5 최근 버전에서는 내부 CSS 위치가 꼭 <head> 태그 안에 오지 않아도 되는 것으로 변경되었습니다.
<head> 태그 안에 있는 태그들은 웹브라우저에서 내용으로 출력되지 않습니다.
<body> 태그 안에는 HTML 문서의 내용을 표현하는 태그들이 위치합니다. 문서의 모든 내용은 이 안에 위치해야 합니다.
<body> 태그 바깥에 위치한 문서 내용을 표시하는 태그들은 웹브라우저에서 표시되지 않습니다.
<body> 태그 안에는 문서의 특정 영역을 표시하는데 사용하는 시멘틱 태그들이 더 올 수 있지만 여기서는 거기까지는 생각하지 않습니다.
나중에 시멘틱 태그를 배우는 회차에서 자세히 다룹니다.
마크업 언어? 그럼 마크다운 언어도 있나?
있습니다. 사용하는 곳이 많지는 않은 변방의 비주류 문서 작성 언어지만, HTML과 달리 소스보기 상태에서도 컨텐츠 내용(주로 텍스트 내용이 해당)의 가독성을 어느정도 유지할 수 있도록 고안되었기 때문에, 웹브라우저와 같은 전용 뷰어 없이도 텍스트 문서를 대신해 사용하기가 용이합니다. 때문에 주로 개발과 관련 된 분야에서 많이 사용하고 있습니다.
대표적인 오픈소스 공유 사이트인 깃허브에서 소스나 패키지와 함께 배포되는 문서의 기본 기술 언어로 마크다운을 사용하고 있습니다.
마크다운은 확장자로 MD를 사용하며, 인터넷 상에서 오픈소스 코드나 프로그램을 다운로드 받았을 때 MD 확장자인 파일(예를 들어 readme.md)이 포함되어 있다면, 소스나 패키지에 대한 설명을 다음은 정보가 포함된 마크다운 문서라고 이해하면 됩니다.
마크다운에 대해 좀 더 자세히 알고 싶으시면
https://heropy.blog/2017/09/30/markdown/
에서 더 자세한 내용을 볼 수 있습니다.