ProgrammingHTML

HTML의 기본문법 웹 페이지를 만드는 첫걸음

DOCTYPE, DOCTYPE html, HTML 기초, HTML 기초적인 구조, 웹 브라우져

HTML의 기본문법: 웹 페이지를 만드는 첫걸음

웹 페이지를 구성하는 데 필요한 가장 중요한 언어, HTML(HyperText Markup Language)은 웹 개발의 기초입니다. HTML은 웹 페이지의 구조를 정의하고, 웹 브라우저에게 콘텐츠가 어떻게 표시될지 알려주는 역할을 합니다. 이 글에서는 HTML의 기본적인 문법과 주요 요소들을 소개하고, HTML로 웹 페이지를 만드는 방법을 단계별로 설명합니다.

1. HTML이란 무엇인가?

HTML은 웹 페이지의 구조를 정의하는 언어로, 태그(tag)를 사용해 콘텐츠를 구성합니다. HTML은 단순히 문서를 서술하는 마크업 언어로, 페이지에 포함될 텍스트, 이미지, 링크 등 다양한 요소들을 정의하는 데 사용됩니다.

2. HTML 문서의 기본 구조

HTML 문서는 기본적으로 다음과 같은 구조를 가지고 있습니다:

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML 기본 문법</title>
</head>
<body>
    <h1>HTML 문서의 기본 구조</h1>
    <p>HTML은 웹 페이지의 구조를 정의하는 마크업 언어입니다.</p>
</body>
</html>

이 코드에서는 HTML 문서가 어떻게 구성되는지 한눈에 볼 수 있습니다.

1.1. DOCTYPE 선언

1
<!DOCTYPE html>
  • 문서가 HTML5 형식임을 선언합니다. 이 선언은 HTML 문서의 맨 위에 반드시 있어야 하며, 브라우저에게 HTML5 표준을 사용한다고 알려주는 역할을 합니다.

1.2. <html> 태그

1
<html lang="ko">
  • HTML 문서의 시작을 알리는 태그입니다. lang 속성은 문서의 언어를 지정합니다. 여기서는 "ko"로 설정하여 한국어 웹 페이지임을 나타냅니다.

1.3. <head> 태그

1
2
3
4
5
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML 기본 문법</title>
</head>
  • 문서에 대한 메타데이터를 정의하는 영역입니다. 주로 제목, 문자 인코딩, 뷰포트 설정 등을 포함합니다.
    • <meta charset="UTF-8">: 문자 인코딩을 UTF-8로 설정하여 다양한 언어를 지원하도록 합니다.
    • <meta name="viewport" content="width=device-width, initial-scale=1.0">: 반응형 디자인을 위해 화면 크기와 배율을 설정합니다.
    • <title>: 웹 페이지의 제목을 정의합니다. 이 제목은 브라우저의 탭에 표시됩니다.

1.4. <body> 태그

1
2
3
4
<body>
    <h1>HTML 문서의 기본 구조</h1>
    <p>HTML은 웹 페이지의 구조를 정의하는 마크업 언어입니다.</p>
</body>
  • 실제 웹 페이지에 표시되는 콘텐츠가 들어가는 부분입니다. 제목, 단락, 이미지 등 다양한 요소들이 이곳에 포함됩니다.

3. 주요 HTML 태그 소개

3.1. 텍스트 관련 태그

HTML에서는 텍스트를 구조화할 수 있는 다양한 태그들이 있습니다. 예를 들어:

  • <h1> ~ <h6>: 제목 태그로, 숫자가 클수록 작은 제목을 의미합니다.

    1
    2
    <h1>큰 제목</h1>
    <h2>작은 제목</h2>

  • <p>: 단락을 정의하는 태그입니다.

    1
    <p>이것은 문단입니다.</p>

3.2. 링크와 이미지

  • <a>: 링크를 만들 때 사용합니다.

    1
    <a href="https://www.example.com">Example 사이트로 가기</a>
    • href 속성은 링크의 대상 URL을 지정합니다.

  • <img>: 이미지를 삽입할 때 사용합니다.

    1
    <img src="image.jpg" alt="설명 텍스트">
    • src 속성은 이미지 파일의 경로를 지정하고, alt 속성은 이미지가 로드되지 않았을 때 대신 표시되는 텍스트를 정의합니다.

3.3. 목록 만들기

  • <ul>: 순서 없는 목록(점 목록)을 만들 때 사용합니다.

    1
    2
    3
    4
    <ul>
        <li>첫 번째 항목</li>
        <li>두 번째 항목</li>
    </ul>

  • <ol>: 순서 있는 목록(번호 목록)을 만들 때 사용합니다.

    1
    2
    3
    4
    <ol>
        <li>첫 번째 항목</li>
        <li>두 번째 항목</li>
    </ol>

3.4. 테이블 만들기

  • <table>: 테이블을 만들 때 사용합니다.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <table>
        <tr>
            <th>이름</th>
            <th>나이</th>
        </tr>
        <tr>
            <td>홍길동</td>
            <td>25</td>
        </tr>
    </table>
    • <tr>: 테이블 행을 정의합니다.
    • <th>: 테이블 제목 셀을 정의합니다.
    • <td>: 테이블 데이터 셀을 정의합니다.

4. HTML 문법의 규칙

HTML 문법에서 지켜야 할 기본적인 규칙도 있습니다:

  • 태그는 쌍을 이룬다: 대부분의 HTML 태그는 열고 닫는 태그가 쌍으로 존재해야 합니다. 예를 들어, <p>...</p>, <h1>...</h1>처럼 사용합니다.
  • 속성은 따옴표로 감싸야 한다: 태그 속성 값은 항상 따옴표로 감싸야 합니다.
  • 대소문자를 구분하지 않지만 소문자로 사용하는 것이 좋다: HTML 태그와 속성은 대소문자를 구분하지 않지만, 일반적으로 소문자를 사용하는 것이 관례입니다.

5. 결론

HTML은 웹 페이지의 기초가 되는 중요한 언어로, 다양한 태그와 속성을 활용하여 웹 페이지를 만들 수 있습니다. 이 글에서 소개한 기본적인 HTML 문법을 통해 간단한 웹 페이지를 만들 수 있으며, 더 복잡한 페이지를 만들기 위해 CSS, JavaScript와 함께 활용하는 방법도 배워나갈 수 있습니다.

Reference

Share