- 실습 사이트 예제: https://python-lecture-example-1.netlify.com/
- 코드: https://github.com/tinytinystone/python-lecture-example/tree/3_08_html_basic_structure
지금까지는 codepen을 이용하여 body 내부에서 화면에 보여지는 여러 태그를 살펴 보았습니다. 그래서 문서에 보이지 않는 부분은 따로 작성하지 않았는데요. 이제는 에디터를 사용하여 실제 실습을 진행할 예정이니, HTML의 문서 전체를 작성해보면서 기본 구조를 알아 보겠습니다.
VS code를 켜보겠습니다. VS code의 탐색기는 폴더를 기준으로 내부의 파일을 모두 보여주는 형태입니다. html 파일, css 파일 등 여러 개의 파일을 옮겨다니면서 코딩을 해야 하기 때문입니다.
새로운 폴더를 만들고 그 안에서 html, css 파일을 생성해 보겠습니다.
저는 문서 혹은 document 폴더 안에 website-example이라는 이름의 새로운 폴더를 만들겠습니다.
그리고 index.html이라는 파일을 만들어보겠습니다. 그리고 !를 치고 컨트롤 혹은 커맨드를 눌러보세요. emmet 단축키가 HTML의 기본 구조를 자동으로 생성해 줍니다. 하나씩 살펴보겠습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="./style.css" />
<title>The Web framework for perfectionists with deadlines | Django</title>
</head>
<body></body>
</html>
문서 최상단에는 문서 타입이 정의되어 있습니다. 이를 DOCTYPE 선언이라고 부릅니다. DOCTYPE은 어떤 버전으로 작성되었는지 브라우저에게 알려주는 선언문 같은 것입니다. 반드시 문서 내의 최상단에 위치해야 합니다. 지금 보이는 DOCTYPE 선언은 HTML5 버전의 DOCTYPE이고 최근에 가장 많이 사용되고 있습니다. 다른 DOCTYPE을 발견하신다면 구 버전이라고 생각하시면 되겠습니다. DOCTYPE을 선언하지 않거나 잘못 선언한 경우, 브라우저가 문서를 잘못된 방식으로 해석할 수 있으니 유의해 주세요.
다음은 <html> 요소입니다. <html> 요소는 최상위 레벨의 요소로, 루트 요소라고도 부릅니다. HTML 요소에는 lang이라는 attribute가 들어갈 수 있는데요. 검색엔진이나 브라우저가 참고할 수 있도록 해당 문서가 어떤 언어로 작성되었는지 나타내주는 속성입니다. 우리가 작성할 문서는 영어로 되어 있는 사이트이니, 그대로 두겠습니다. 한국어로 작성된 사이트를 만드실거라면 ko로 수정하시면 됩니다.
<head> 요소 안에 들어 있는 부분은 꽤나 내용이 많습니다. 브라우저 화면에 표시되지 않지만, 문서의 기본 설정이나 스타일시트/자바스크립트 파일을 연결하는 역할을 합니다. 또, body를 해석하기 전 기본적으로 알아야 할 정보를 다룹니다. 필수적인 내용이죠. 하나씩 보겠습니다.
<meta> 태그는 문서의 일반적인 정보와 문자 인코딩을 명시합니다. 빈요소이고요. 새로 만든 문서에는 메타 요소가 세 개 있는데요.
가장 먼저 나오는 <meta charset="UTF-8" />는 문자 집합 및 문자 인코딩 관련 요소입니다. 문자 집합은 정보를 표현하기 위해 글자나 기호의 집합을 정의한 것이고, 이를 컴퓨터에서 사용하기 위해 부호화 하는 작업을 인코딩이라고 합니다. 언어마다 다른 문자 집합과 인코딩 방식이 있어 호환되지 않는 경우가 많았는데요. 최근의 웹에서는 전 세계 문자를 표현하기 위한 표준으로 제정된 유니코드를 많이 사용하고 있습니다. UTF-8은 유니코드 중에서도 널리 사용되는 인코딩입니다. 이 부분을 지정하지 않으면, 브라우저가 지원하는 언어가 다를 경우 깨질 우려가 있으니 꼭 확인해 주세요.
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> 는 반응형 웹사이트를 만드는 경우에 선언되어야 하는 내용입니다. 브라우저 크기에 따라서 요소가 다르게 보이는 사이트를 보신 적이 있으시지요? https://djangoproject.com/ 사이트의 브라우저 크기를 조절해보면 브라우저 크기에 따라 요소 배치가 달라지는 것을 볼 수 있습니다. 이를 반응형 웹사이트라고 합니다. 우리가 배우게 되는 내용 범위를 넘어서 다루지는 않지만, 태그에 대해서만 살짝 살펴볼게요. 브라우저 너비를 디바이스 너비에 맞춰서 표시하라는 의미이며, 초기 화면 배율은 1배율, 그러니까 100%로 표현하라는 의미입니다.
마지막으로 <meta http-equiv="X-UA-Compatible" content="ie=edge" />는 인터넷 익스플로러 브라우저에서의 렌더링 관련이 있는데요. 익스플로러의 호환성 보기 모드에서 최신 버전의 엔진을 사용하는 브라우저로 렌더링 하라는 의미입니다.
meta 요소는 여기까지 보겠습니다. <title> 요소는 문서의 제목을 나타내주는데요. 중요한 텍스트를 입력해야 검색 엔진이 페이지를 잘 확인할 수가 있습니다. 같은 웹사이트라고 하더라도 페이지마다 핵심 키워드를 따로 제공해주는 것이 좋습니다.
지금까지는 기본적으로 생성된 문서를 보았습니다. 여기에 두 가지만 더 설명 드릴게요. 먼저 <link> 요소입니다. 일전에 CSS를 적용하는 방법에 몇 가지가 있다고 설명 드렸죠. 그 중에서도 별도의 문서를 만든 후 연결하는 방법을 말씀 드리겠습니다. link라고 쓰고 탭 키를 누르면 자동완성 되는데요. rel 속성은 relationship, 즉 관계의 약자로 지금 html 문서와는 어떤 관계인지를 써주면 됩니다. 우리는 CSS 파일을 연결할 것이므로 stylesheet라고 적으면 됩니다. href 속성은 파일의 위치를 적어주면 되는데요. 이를 설명하기 위해서 절대경로와 상대경로에 대해 말씀을 드릴게요.
절대경로는 특정한 파일의 고유한 경로를 의미합니다. 예를 들어 C:\Users... 등을 의미하는 것이죠. 상대경로는 지금 현재 내 위치에서 파일의 위치입니다. / 최상위 경로(root), ./ 현재 위치한 디렉터리, ../ 상위 디렉터리 이런 식으로 적어줄 수 있습니다. 현재 디렉터리에서 파일의 위치를 찾을 때에 상대경로를 주로 사용하는 편입니다. 우리가 만드는 style.css 파일의 위치를 이에 따라 설정해 주시면 됩니다.
여기까지 HTML 문서의 기본 구조에 대해서 알아 보았습니다.