HTML 입문 기초

HTML HTML 소개

HTML HTML 소개 — 초급

HTML 소개

1. 도입 (왜 배워야 하는가)

HTML(HyperText Markup Language)은 웹 페이지를 구성하는 기본 언어입니다. 우리가 인터넷에서 보는 모든 웹사이트는 HTML로 만들어져 있습니다. 따라서 HTML을 배우는 것은 웹 개발의 첫걸음이며, 모든 웹 기술의 기초가 됩니다.

HTML을 모르면 웹 페이지의 구조를 이해하지 못하고, CSS(스타일링)나 JavaScript(상호작용)와 같은 다른 웹 기술을 효과적으로 활용할 수 없습니다. 예를 들어, 웹 페이지의 내용을 적절하게 구조화하지 않으면 사용자에게 혼란을 줄 수 있습니다. 이는 결국 사용자의 경험을 저해하고, 웹사이트의 신뢰성을 떨어뜨릴 수 있습니다.

2. 핵심 개념 설명

HTML은 웹 페이지의 구조를 정의하는 마크업 언어입니다. 여기서는 몇 가지 기본 개념을 소개하겠습니다.

용어	정의
요소	웹 페이지의 가장 기본적인 구성 요소. 시작 태그와 종료 태그로 구성됨.
태그	요소를 정의하는 코드. 예: `<h1>`는 제목을 나타내는 태그.
속성	태그에 추가 정보를 제공. 예: `<a href="url">`에서 href 속성.

비유

HTML을 집의 뼈대라고 생각해보세요. 집의 구조가 탄탄하지 않으면 내부 인테리어를 아무리 잘 해도 집이 무너지기 마련입니다. HTML은 웹 페이지의 뼈대 역할을 하며, 이후 CSS와 JavaScript가 인테리어와 기능을 제공합니다.

3. 기본 코드 예제

가장 기본적인 HTML 페이지 구조를 살펴보겠습니다.

<!DOCTYPE html>
<html>
<head>
    <title>안녕하세요, HTML!</title>
</head>
<body>
    <h1>환영합니다!</h1>
    <p>이것은 HTML의 기본 구조입니다.</p>
</body>
</html>

실행 결과

웹 브라우저에서 "안녕하세요, HTML!"라는 제목과 "환영합니다!"라는 큰 제목, 그리고 "이것은 HTML의 기본 구조입니다."라는 문장이 표시됩니다.

코드 한 줄씩 동작 설명

<!DOCTYPE html>: HTML5 문서임을 선언합니다.
<html>: HTML 문서의 시작을 알립니다.
<head>: 문서의 메타 정보를 정의하는 부분입니다.
<title>안녕하세요, HTML!</title>: 브라우저 탭에 표시될 제목을 설정합니다.
<body>: 실제 웹 페이지에 표시될 내용을 담는 부분입니다.
<h1>환영합니다!</h1>: 가장 큰 제목을 정의합니다.
<p>이것은 HTML의 기본 구조입니다.</p>: 일반 문단을 정의합니다.
</body>: 본문의 끝을 알립니다.
</html>: HTML 문서의 끝을 알립니다.

4. 실전 활용 예제

1. 쇼핑몰에서 장바구니를 구현할 때

<div>
    <h2>장바구니</h2>
    <ul>
        <li>상품1 - 가격: 10,000원</li>
        <li>상품2 - 가격: 20,000원</li>
    </ul>
    <p>총 합계: 30,000원</p>
</div>

이 코드는 장바구니의 내용을 리스트로 나열하여 사용자에게 보여줍니다.

2. 블로그 포스트 작성 시

<article>
    <h1>오늘의 날씨</h1>
    <p>오늘은 맑고 기온이 25도입니다.</p>
</article>

이 코드는 블로그 포스트의 제목과 내용을 구조적으로 나타냅니다.

5. 흔한 실수와 주의사항

1. 태그 닫기

잘못된 코드:

  <h1>제목
  <p>본문</p>

올바른 코드:

  <h1>제목</h1>
  <p>본문</p>

주의사항: 모든 시작 태그는 반드시 닫아야 합니다. 닫지 않으면 브라우저가 올바르게 해석하지 못할 수 있습니다.

2. 대소문자

잘못된 코드:

  <TITLE>페이지 제목</TITLE>

올바른 코드:

  <title>페이지 제목</title>

주의사항: HTML 태그는 대소문자를 구분하지 않지만, CSS와 JavaScript와의 호환성을 위해 소문자를 사용하는 것이 일반적입니다.

6. 정리

HTML은 웹 페이지의 구조를 정의하는 필수 기술이다.
HTML 요소는 시작 태그와 종료 태그로 구성된다.
기본적인 HTML 구조를 이해하는 것은 웹 개발의 첫걸음이다.
다음에 학습하면 좋은 주제: CSS(스타일링)와 JavaScript(상호작용), 웹 접근성(Accessibility).

이 자료를 통해 HTML의 기본 개념을 이해하고, 실무에서 어떻게 활용되는지를 배우셨기를 바랍니다!

학습