HTML로 만들어진 웹페이지는 특정한 구조를 가지고 있다.
우리가 웹 페이지에 마우스 오른쪽 클릭 - 검사를 누르면 다음과 같이 웹페이지의 구조가 주르륵 나오게 된다.
(복잡하다!)
하지만 사실 기본적인 구조는 간단하다. 모든 HTML 문서는 아래와 같은 기본 구조를 가진다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>페이지 이름이다</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>제목</h1>
<p>내용</p>
<script src="script.js"></script>
</body>
</html><!DOCTYPE html>
문서 형식 선언. 문서가 사용하는 HTML 버전을 웹 브라우저에 알려주는 역할을 한다.
HTML 버전은 웹 문서의 문법 규칙을 결정하기 때문에 해당 선언은 모든 HTML 문서에서 가장 먼저 나와야 한다.
HTML은 시대 변화에 따라 버전이 업그레이드되면서 이전 버전과 현재 버전 간에 문법 차이가 발생했다.
마치 중세 국어와 현대 국어의 문법이 다른 것처럼 과거 버전의 문법을 사용하면 웹 브라우저가 문서를 제대로 해석하지 못해 웹 페이지가 올바르게 표시되지 않을 수 있다. 따라서 웹 브라우저가 문서를 올바르게 해석하고 렌더링하도록 문서의 HTML 버전을 명시해야 한다.
<html lang="ko">
문서의 실제 내용을 표시하는 태그이다. 시작 태그가 문서의 시작부분을, 종료 태그가 문서의 끝을 의미한다.
즉, 여기부터 HTML 문서가 시작하며(<html>) 여기에서 HTML 문서가 끝난다(</html>)를 알려주는 코드이다.
lang="ko"는 웹페이지의 기본 언어가 korean(한국어)이라는 뜻이며 english(영어)를 기본으로 하려면 <html lang = “en”>로 코드를 작성하면 된다.
<head>
문서의 메타데이터(문서 제목, 스타일시트, 스크립트 등)를 정의한다.
- <meta charset="UTF-8">: 문자 인코딩을 UTF-8로 설정한다.
- <title>: 브라우저 탭에 표시되는 페이지 제목을 정의한다.
- <link rel="stylesheet" href="style.css">: 외부 스타일시트 파일을 연결한다.
UTF-8란?
컴퓨터가 텍스트를 이해하고 저장하는 방식 중 하나로써 유니코드 문자를 표현하기 위한 가변 길이 문자 인코딩 방식이다. 전 세계의 모든 문자를 표현할 수 있는 유니코드 표준을 따르기 때문에 모든 문자를 효과적으로 표현하고 다양한 시스템과의 호환성을 제공한다.
간단하게 말하자면 웹페이지를 작성할 때 전 세계의 언어를 모두 표현할 수 있는 문자 인코딩 방식을 사용한다는 것이다.
과거에는 기술적인 제약은 물론 전세계적인 표준이 없었기 때문에 각자 필요한 문자 인코딩 방식을 사용했었다. 예를 들어 한글만 호환되는 인코딩 방식을 사용하거나 중국어 간체만을 표현할 수 있는 인코딩 방식을 사용하는 등 필요한 인코딩 방식만을 사용했다. 하지만 글로벌 시대가 되면서 다양한 언어에 대응할 필요성이 증가하고 기술 자체도 빠르게 발전하게 되면서 국제적인 표준 규격이 필요해지게 되었는데 해당 방식이 UTF-8 인코딩 방식이라고 할 수 있다.
title이란?
이런 방식으로 웹페이지의 이름을 바꿀 수 있는 부분이다. 위의 코드에서는 타이틀 부분이 '페이지 이름이다'로 설정되어 있어서 저런식으로 이름이 나오는 것이지만 이름을 원하는 대로 변경할 수도 있다.
<title>마음대로 변경 가능</title>
<link rel="stylesheet" href="style.css">란?
간단하게 말하면 "HTML 문서에 style.css라는 이름의 외부 스타일시트 파일을 연결한다." 라는 뜻이다.
<link> 태그 : 해당 문서와 외부 소스(external resource) 사이의 관계를 정의할 때 사용한다. 앞서 빈 요소를 설명하면서 <link> 태그를 한번 언급한 적이 있는데 <link> 태그는 빈 태그이기 때문에, 속성만을 포함한다.(즉, 종료 태그가 없다)
rel 속성 : relationship의 약자다. 현재 문서와 연결하려는 외부 리소스 간의 관계를 나타낸다.
여기에서 "stylesheet"라는 값은 연결하려는 대상이 스타일시트 파일임을 나타대고 있는데 스타일시트 파일은 웹 페이지의 디자인과 레이아웃을 정의하는 파일이다.
href 속성: Hypertext Reference의 약자다. 연결하려는 외부 리소스의 경로(URL)를 지정한다.
흔히 "링크를 걸다."라는 표현을 자주 사용하는데 여기서 말하는 링크는 하이퍼링크(hyperlink)의 약자이다.
style.css는 연결하려는 스타일시트 파일의 이름을 나타낸다.
<body>
웹 페이지에 실제로 표시되는 모든 콘텐츠를 담는 역할을 한다. 즉, 사용자가 웹 브라우저를 통해 보는 모든 내용이 <body> 태그 안에 위치한다.
- <h1>: 제목을 나타낸다. <h1>부터 <h6>까지 존재하는데 h1이 가장 중요한 제목 태그이며 아래로 갈수록 중요도가 떨어지는 제목을 뜻한다.
- <p>: 단락을 나타 낸다.
- <script src="script.js">: 외부 자바스크립트 파일을 연결한다.
'프로그래밍 > html css 공부' 카테고리의 다른 글
| CSS 심화 공부(17) - 미디어 쿼리(Media Queries) (0) | 2025.03.14 |
|---|---|
| HTML 기초 공부(5) - 자주 사용하는 HTML 기본 태그 (0) | 2025.03.07 |
| HTML 기초 공부(3) - 시맨틱 요소 (0) | 2025.03.07 |
| HTML 기초 공부(2) - 요소의 종류 (0) | 2025.03.07 |
| HTML 기초 공부(1) - 태그, 속성, 요소 (1) | 2025.03.07 |