HTML 기본 요소 소개
HTML(HyperText Markup Language)은 웹 페이지를 작성하는 데 사용되는 마크업 언어입니다. 이번 글에서는 HTML의 기본 요소에 대해 알아보겠습니다. 이러한 기본 요소를 이해하고 활용하면, 웹 페이지의 구조를 효율적으로 구성할 수 있습니다.
1. index.html
index.html은 웹사이트의 홈 페이지를 의미합니다. 대부분의 웹 서버는 index.html 파일을 기본적으로 로드하여 웹사이트의 첫 페이지로 사용합니다. 웹사이트의 루트 디렉토리에 index.html 파일을 생성하면, 사용자가 사이트에 접속할 때 가장 먼저 이 파일이 로드됩니다.
예제:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Website</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is the homepage.</p>
</body>
</html>2. html 태그
<html> 태그는 웹 페이지 전체를 감싸는 최상위 태그입니다. 이 태그는 문서의 루트 요소를 정의하며, 모든 다른 요소는 <html> 태그 내에 포함됩니다.
예제:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML Document</title>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>3. 인코딩 설정
웹 페이지가 올바르게 표시되려면 문자 인코딩을 지정해야 합니다. 특히, 한글이 깨지지 않도록 하기 위해 <meta charset="UTF-8"> 태그를 사용합니다. 이 태그는 문서의 문자 인코딩을 UTF-8로 설정하여 다양한 언어를 지원합니다.
예제:
<head>
<meta charset="UTF-8">
<title>인코딩 설정</title>
</head>4. h1 태그
<h1> 태그는 문서에서 가장 중요한 제목을 나타냅니다. 이 태그는 큰 글씨로 표시되며, 검색 엔진 최적화(SEO)에도 중요한 역할을 합니다.
예제:
<h1>이것은 큰 제목입니다</h1>5. p 태그
<p> 태그는 텍스트를 단락으로 구분합니다. 여러 개의 <p> 태그를 사용하여 문서를 구조화할 수 있습니다.
예제:
<p>첫 번째 단락입니다.</p>
<p>두 번째 단락입니다.</p>6. br 태그
<br> 태그는 줄바꿈을 할 때 사용됩니다. 이 태그는 빈 태그로, 종료 태그가 없습니다.
예제:
<p>이 문장은 줄바꿈<br>을 포함하고 있습니다.</p>7. 특수 문자 사용
HTML에서 특정 특수 문자는 직접 사용할 수 없습니다. 예를 들어, 꺾쇠 기호(<, >)를 직접 쓰지 않고 <, >를 사용해야 합니다.
예제:
<p>이 문장은 <br> 태그를 포함하고 있습니다.</p><는<를 의미합니다.>는>를 의미합니다.
결론
HTML의 기본 요소를 이해하고 활용하면, 웹 페이지의 구조를 효율적으로 구성할 수 있습니다. index.html, <html>, <meta charset="UTF-8">, <h1>, <p>, <br>, 특수 문자 등의 기본 요소를 잘 이해하고 활용하여, 보다 깔끔하고 구조적인 웹 페이지를 만들어 보세요. 이러한 기본 요소들은 모든 HTML 문서의 기초가 되며, 앞으로의 웹 개발에 있어 중요한 역할을 합니다.
