🧱 HTML 기초부터 배우기 – 웹 페이지의 뼈대를 만들자

웹사이트를 만들고 싶다면 가장 먼저 알아야 할 것이 있습니다. 바로 HTML입니다. HTML은 웹 페이지의 ‘뼈대’를 만드는 언어로, 우리가 보는 모든 웹페이지는 결국 HTML 코드로 구성되어 있습니다. 오늘은 HTML이 무엇인지, 그리고 기본적인 구조와 태그에 대해 알아보겠습니다.

🔍 HTML이란?

**HTML(HyperText Markup Language)**는 웹페이지를 만드는 마크업 언어입니다. 웹 브라우저는 HTML 문서를 해석해 우리가 보는 웹페이지를 화면에 출력해 줍니다.

예를 들어, 텍스트를 제목처럼 보이게 하려면 <h1>이라는 태그를 사용합니다.
이처럼 HTML은 "태그(tag)"를 이용해 문서의 구조와 의미를 표현합니다.

🧩 HTML 기본 구조

HTML 문서는 아래와 같은 기본 구조를 가집니다.

<pre><code><!DOCTYPE html> <html> <head> <title>나의 첫 번째 웹페이지</title> </head> <body> <h1>안녕하세요!</h1> <p>HTML을 배우는 중입니다.</p> </body> </html> </code></pre>

주요 태그 설명

<!DOCTYPE html> : 문서가 HTML5임을 선언
<html> : 전체 HTML 문서
<head> : 문서 정보, 스타일, 문자 인코딩 등
<body> : 실제 브라우저에 보이는 콘텐츠 영역

🛠️ 자주 쓰는 HTML 태그

✅ 제목 태그 – <h1> ~ <h6>

숫자가 작을수록 크고 중요한 제목
검색엔진 최적화(SEO)에도 중요

✅ 단락 태그 – <p>

<pre><code><p>이것은 단락입니다.</p> </code></pre>

문장을 구분할 때 사용합니다.

✅ 링크 태그 – <a>

<a href="https://google.com">구글로 이동</a>

href 속성에 주소 입력
클릭 시 해당 링크로 이동

✅ 이미지 태그 – <img>

src: 이미지 파일 경로
alt: 이미지 설명 (접근성 향상)

✅ 목록 태그 – <ul>, <ol>, <li>

<ul>: 순서 없는 목록
<ol>: 순서 있는 목록
<li>: 목록 항목

💻 실습 예제 – 나만의 소개 페이지 만들기

아래 코드를 .html 파일로 저장하고 브라우저에서 열어보세요!

<!DOCTYPE html>
<html>
  <head>
    <title>나를 소개합니다</title>
  </head>
  <body>
    <h1>안녕하세요, 저는 홍길동입니다.</h1>
    <p>웹 개발을 배우고 있어요!</p>
    <img src="https://via.placeholder.com/150" alt="홍길동 이미지">
    <p>좋아하는 것들:</p>
    <ul>
      <li>코딩</li>
      <li>고양이</li>
      <li>라면</li>
    </ul>
    <a href="https://github.com">저의 GitHub 보러가기</a>
  </body>
</html>

🎯 마무리 – HTML은 웹의 출발점

HTML은 웹 개발의 시작점이자 필수 지식입니다. 오늘 배운 구조와 태그만으로도 간단한 웹페이지를 만들 수 있어요.

📌 요약 정리

HTML은 웹페이지의 뼈대를 구성하는 언어
태그(tag)로 구조와 콘텐츠를 정의
<!DOCTYPE html>, <html>, <head>, <body>가 기본 구조
<h1>, <p>, <a>, <img> 등 핵심 태그부터 시작

📣 댓글로 궁금한 점이나 만들고 싶은 웹페이지를 남겨주세요!
공감 + 구독은 큰 힘이 됩니다 😊

저작자표시 비영리 변경금지 (새창열림)

프로그래밍 즐기기