HTML의 정의 및 역할
HTML(하이퍼텍스트 마크업 언어, Hypertext Markup Language)은 웹 페이지를 구성하는 가장 기본적인 언어입니다. HTML은 웹 페이지에서 텍스트, 이미지, 비디오, 오디오와 같은 콘텐츠를 표시하고, 이들 간의 구조적인 관계를 정의하는 데 사용됩니다. HTML은 웹 페이지를 구조화하는 데 필요한 마크업 언어로, 웹 브라우저가 읽고 해석하여 사용자에게 시각적으로 표시할 수 있도록 돕습니다.
HTML은 마크업 태그(Markup Tags)로 이루어져 있습니다. 각 태그는 웹 페이지의 특정 요소를 정의하고, 브라우저가 이를 어떻게 표시할지 지시합니다. 예를 들어, <h1>은 제목을 나타내고, <p>는 단락을 나타냅니다. HTML은 구조적 언어로, 문서의 시각적 스타일이나 동작을 정의하는 것이 아니라, 콘텐츠의 의미와 구조를 나타냅니다.
웹 사이트를 만드는 데 있어 HTML은 구조적인 뼈대를 제공합니다. 예를 들어, <header>, <footer>, <main>, <section>, <article> 등 HTML5에서 제공하는 다양한 태그는 웹 페이지의 특정 영역을 정의하고, 웹 접근성과 SEO(검색 엔진 최적화)를 향상시키는 데 중요한 역할을 합니다.
HTML은 웹 페이지의 기초를 형성하며, 다른 웹 기술인 CSS와 JavaScript와 함께 웹 사이트를 완성하는 데 필수적인 역할을 합니다.
HTML 문서 구조
HTML 문서는 기본적으로 여러 개의 HTML 태그로 구성됩니다. HTML 문서를 작성할 때 반드시 포함해야 할 기본 구조가 있으며, 이를 통해 브라우저가 문서를 올바르게 해석하고 표시할 수 있습니다. HTML 문서의 기본 구조는 다음과 같습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>웹 페이지 제목</title>
</head>
<body>
<h1>웹 페이지의 주요 제목</h1>
<p>여기에 텍스트가 들어갑니다.</p>
</body>
</html><!DOCTYPE html>
- HTML 문서가 HTML5 문서임을 정의하는 선언입니다. 이 선언은 웹 페이지의 가장 상단에 위치해야 하며, 브라우저에게 이 페이지가 HTML5로 작성되었음을 알려줍니다.
<!DOCTYPE>은 "문서 타입 선언"으로, HTML5에서 중요한 역할을 하며, 브라우저가 HTML5 문서를 올바르게 해석하도록 도와줍니다.
<html>
<html>태그는 HTML 문서의 시작을 정의하는 태그입니다. 모든 HTML 문서는 이 태그 안에 포함되어야 하며, 문서의 내용을 정의하는 최상위 태그입니다.<html>태그의lang속성은 문서의 언어를 정의할 때 사용됩니다. 예를 들어, 한국어 문서는<html lang="ko">와 같이 작성할 수 있습니다.
<head>
<head>태그는 문서의 메타데이터(데이터에 대한 데이터)를 포함하는 영역입니다. 이곳에는 페이지 제목, 문자 인코딩, 외부 파일 링크(CSS, JavaScript 등), 사이트 아이콘 등 중요한 정보가 들어갑니다.- 대표적인 요소:
<meta charset="UTF-8">: 문서의 문자 인코딩을 UTF-8로 설정. 이는 다양한 문자와 기호가 올바르게 표시되도록 도와줍니다.<title>: 웹 브라우저 탭에 표시되는 웹 페이지의 제목을 설정합니다.
<body>
<body>태그는 웹 페이지의 실제 콘텐츠를 포함하는 영역입니다. 사용자가 브라우저에서 볼 수 있는 텍스트, 이미지, 링크, 폼 등 모든 요소는<body>태그 안에 포함됩니다.
브라우저에서 HTML 문서 보기
HTML 문서는 텍스트 파일 형식으로 작성되며, .html 확장자를 가집니다. HTML 파일을 작성한 후 이를 웹 브라우저에서 확인하려면 다음과 같은 방법을 사용할 수 있습니다.
HTML 파일 작성: 텍스트 편집기(메모장, VSCode, Sublime Text 등)를 열고, HTML 코드를 작성합니다.
예시:
<!DOCTYPE html> <html> <head> <title>나의 첫 웹 페이지</title> </head> <body> <h1>환영합니다!</h1> <p>이 페이지는 HTML로 작성되었습니다.</p> </body> </html>파일 저장: 작성한 파일을
index.html과 같은 이름으로 저장합니다. 확장자는 반드시.html이어야 합니다.브라우저에서 열기: 저장한 HTML 파일을 더블 클릭하면, 해당 파일이 기본 웹 브라우저에서 열립니다. 또는 브라우저에서
파일 > 열기를 선택한 후 HTML 파일을 선택하여 열 수 있습니다.
간단한 HTML 페이지 작성
이제 HTML의 기본 구조를 이해했으므로, 간단한 웹 페이지를 작성해 보겠습니다. 아래는 기본적인 텍스트 출력을 위한 HTML 코드입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>나의 첫 웹 페이지</title>
</head>
<body>
<h1>HTML을 배우는 첫 번째 단계</h1>
<p>여러분, HTML을 배우게 되어 정말 기쁩니다!</p>
<h2>기본적인 HTML 태그 사용법</h2>
<p>여기서는 간단한 텍스트를 출력해보았습니다.</p>
<p>HTML 태그는 페이지의 구조를 정의합니다. 예를 들어, 제목을 나타내는 태그는 <code><h1></code>, 단락을 나타내는 태그는 <code><p></code>입니다.</p>
<h3>HTML 문서의 예시</h3>
<pre>
<!DOCTYPE html>
<html>
<head>
<title>웹 페이지 제목</title>
</head>
<body>
<h1>이곳에 주요 제목을 작성</h1>
<p>이곳은 내용이 들어갈 부분</p>
</body>
</html>
</pre>
</body>
</html>코드 설명
<h1>태그: 웹 페이지에서 가장 중요한 제목을 나타내는 태그입니다. 가장 큰 제목 크기를 가집니다.<h2>,<h3>태그: 제목의 크기 순서를 나타내는 태그입니다.<h2>는<h1>보다 작은 크기이며,<h3>는<h2>보다 작은 크기를 가집니다.<p>태그: 단락을 나타내는 태그로, 텍스트를 그룹화하는 데 사용됩니다.<code>태그: 코드 예시를 출력할 때 사용되며, 이 태그 안의 텍스트는 일반적으로 고정 폭 폰트로 표시됩니다.<pre>태그: 미리 서식이 지정된 텍스트를 표시하는 태그로, 들여쓰기와 줄 바꿈이 유지됩니다.
위와 같은 HTML 코드를 작성하면, 간단한 웹 페이지가 브라우저에서 다음과 같이 표시됩니다:
<h1>제목은 가장 큰 크기로 표시됩니다.<p>태그는 일반적인 텍스트 단락을 형성합니다.<pre>태그 안의 코드는 형식이 유지된 채로 보여집니다.
결론
이번 시간에 배운 HTML의 기본 구조와 간단한 태그들은 웹 페이지를 만드는 데 있어 중요한 기초가 됩니다. HTML을 제대로 이해하고 활용하면, 복잡한 웹 페이지를 구성하는 데 필수적인 기초를 닦을 수 있습니다. 이후에는 더 복잡한 웹 요소들(이미지, 링크, 테이블 등)을 배워서 웹 사이트를 점차적으로 완성할 수 있습니다.
'개발 > HTML' 카테고리의 다른 글
| 3일차: 이미지와 리스트 (0) | 2025.01.29 |
|---|---|
| 2일차: 텍스트 형식화와 링크 (1) | 2025.01.28 |
| HTML의 Dialog 팝업 구현: 다양한 유형의 예제 (0) | 2025.01.13 |
| HTML/CSS를 사용하여 Header와 Left 고정 및 Scrollable Body 구현 (0) | 2025.01.13 |
| Canvas를 활용한 간단한 게임 개발 (0) | 2025.01.11 |