본문 바로가기
학습 내용

웹 문서의 시작: HTML 기초 이론 정복하기

by 초록대디 2025. 6. 12.

오늘은 HTML의 기본적인 개념과 구조, 그리고 웹 문서가 어떻게 우리의 눈앞에 구현되는지에 대해 쉽고 명확하게 정리해 보고자 합니다. 관련하여 제가 작성한 실습 결과물도 첨부했어요.

 

HTML: 웹 문서의 구조를 표현하는 마크업 언어

HTML은 웹 페이지를 만들기 위한 가장 기본적인 마크업 언어입니다. 이 언어를 사용하면 문서의 구조와 콘텐츠를 명확하게 정의할 수 있습니다. 여러분이 작성한 HTML 문서는 웹 브라우저에 의해 '렌더링'되어 사용자에게 보여지게 됩니다.

아래에는 간단한 HTML 문서의 예시입니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>문서 제목</title>
</head>
<body>
    <h1>Hello World!</h1>
    <p>이것은 간단한 HTML 문서입니다.</p>
</body>
</html>

 

위와 같이 HTML 문서를 작성하면, 웹 브라우저는 이 코드를 해석하여 우리가 보는 웹 페이지 화면으로 변환해줍니다.

 

웹 문서의 두 가지 핵심 영역: <head>와 <body>

HTML 문서를 작성하고 브라우저에 렌더링된 화면을 비교해 보면, 중요한 사실을 발견할 수 있습니다. 바로 <body>와 </body> 태그 사이에 있는 내용들만 브라우저에 실제로 표시된다는 점입니다.

 

HTML 문서는 크게 두 부분으로 나눌 수 있습니다:

  • <head>: 웹 문서에 필요한 설정 정보를 담고 있습니다. 예를 들어, 문서의 문자 인코딩(meta charset="UTF-8"), 모바일 기기에서의 뷰포트 설정(meta name="viewport"), 그리고 브라우저 탭에 표시될 문서의 제목(title) 등이 이곳에 포함됩니다. 이 부분은 사용자에게 직접 보이지는 않지만, 웹 페이지의 동작 방식이나 검색 엔진 최적화(SEO)에 중요한 역할을 합니다.
  • <body>: 실제로 사용자에게 보여지는 콘텐츠가 들어가는 부분입니다. 텍스트, 이미지, 링크 등 우리가 웹 페이지에서 상호작용하는 모든 시각적 요소들이 이곳에 포함됩니다.

 

웹 문서를 구성하는 기본 단위: 요소(Element)와 태그(Tag)

웹 문서는 여러 '요소(element)'들로 구성되어 있습니다. 예를 들어, <body>와 </body>를 묶어 <body> 요소라고 부릅니다. 위 예시에서 <body> 요소 안에는 <h1> 요소와 <p> 요소가 있었죠.

<body>
    <h1>Hello World!</h1>
    <p>이것은 간단한 HTML 문서입니다.</p>
</body>

 

이를 풀어서 설명하면, <body> 요소의 영역 안에 <h1> 요소와 <p> 요소가 포함되어 있다고 표현할 수 있습니다. 이때 <body> 요소를 <h1> 요소와 <p> 요소의 부모 요소라고 부르며, <h1> 요소와 <p> 요소를 <body> 요소의 자식 요소라고 부르기도 합니다. 이러한 부모-자식 관계는 HTML 문서의 계층적 구조를 이해하는 데 매우 중요합니다.

 

여는 태그와 닫는 태그의 역할

대부분의 HTML 요소는 여는 태그와 닫는 태그로 구성되어 있습니다.

  • 여는 태그: 요소의 시작점을 의미합니다. 예를 들어 <h1>은 <h1> 요소의 여는 태그입니다.
  • 닫는 태그: 요소의 끝점을 의미하며, 항상 /가 붙습니다. 예를 들어 </h1>은 <h1> 요소의 닫는 태그입니다.

여는 태그와 닫는 태그 사이에는 텍스트를 직접 넣을 수도 있고, 다른 요소를 '자식 요소'로 포함할 수도 있습니다.

<body>
    <h1>여는 태그와 닫는 태그 사이에 텍스트를 넣을 수 있습니다.</h1>
    <div>
        <h3>여는 태그와 닫는 태그 사이에 다른 요소를 자식 요소로 넣을 수 있습니다.</h3>
    </div>
</body>

 

HTML 요소의 종류는 매우 다양하며, 각 태그는 특정 의미를 가지고 문서의 구조를 형성합니다. 예를 들어, <h1>은 가장 중요한 제목을 나타내고, <p>는 단락(paragraph)을 나타냅니다.

 

HTML 요소, 모두 외워야 할까? (No!)

많은 선생님들이 말씀하시길... "HTML 요소의 종류와 특징을 영어 단어 외우듯이 다 외워야 하나요?"라고 묻는다면, "절대 그렇지 않습니다!" 라고 대답하십니다.

  • 습관이 중요: 필요할 때마다 검색해서 사용하는 습관을 들이는 것이 훨씬 더 중요합니다. 저 역시 VScode를 활용하여 코드를 작성하거나 필요한 정보를 빠르게 검색하며 개발 효율을 높이고자 합니다.
  • 자연스러운 암기: 꾸준히 사용하다 보면 자연스럽게 익숙해지고 외워지게 됩니다.

 

HTML 학습에 유용한 참고 사이트

앞으로 웹 개발을 학습하면서 자주 들어가야 할, HTML 학습에 매우 유용한 두 사이트를 공유 합니다. 저도 이 두 곳을 즐겨찾기에 추가해 두고 자주 활용해야겠죠.

 

HTML 소개 | MDN

HTML은 문서의 특정 텍스트 영역이 문단인지 목록인지 표의 일부인지 구분 할 수 있도록 의미를 부여하고, 헤더인지, 콘텐츠 컬럼인지, 네비게이션 메뉴인지 알수 있도록 논리적인 영역으로 구조

developer.mozilla.org

 

 

W3Schools.com

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

 

실습 과제: 나만의 첫 HTML 문서 만들기

오늘 배운 내용을 바탕으로 VSCode를 활용하여 직접 HTML 문서를 만들어보는 실습 과제를 수행했습니다. 직접 코드를 작성하며 개념을 체득하는 것이 가장 좋은 학습 방법입니다. (아래 실습과제는 오즈코딩스쿨 부트캠프 학습 내용 입니다.)

  1. 설치해 둔 VSCode 에디터를 엽니다.
  2. Beginner-track 폴더 내부에 beginner.html 파일을 생성합니다.
  3. beginner.html 파일에 아래 코드를 붙여 넣습니다. 
    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HTML 이론학습</title>
  </head>
  <body>
    </body>
</html>

  4. 위 코드의 <body> 태그 내부에 다음 내용을 작성해 보세요.
    • <h1> 요소를 사용해서 문서의 제목을 '오늘의 할 일'로 작성하세요.
    • <h1> 요소로 만든 제목을 URL https://ozcodingschool.com/로 연결되는 하이퍼링크로 변경하세요.
    • 순서가 없는 <ul> 리스트를 4개 만들고 각 리스트(<li>)를 아래 조건에 맞게 작성하세요.
      • HTML 예습하기
      • MDN 사이트 접속하기
      • w3school 사이트 접속하기
      • 실습 도전하기

아래에는 제가 실습한 내용 입니다.

 

💡 (Option) 이론 본문에서 안내한 MDN, W3Schools 사이트를 참고하여 <body> 요소 내부에 <img> 태그를 활용해 이미지도 넣어보고, <a> 태그로 다른 웹사이트로 연결되는 링크도 추가해 보는 등 다양한 요소 추가해 봤습니다!

 

 

HTML은 웹 개발의 가장 기본적인 언어입니다. 이제 CSS로 스타일을 배우고 JavaScript 등 기능적인 부분도 배워서 추가하면 더욱 멋진 웹 서비스로 만들어 나갈 수 있을 것같습니다! 앞으로도 화이팅 입니다!

'학습 내용' 카테고리의 다른 글

CSS 기초 완전 정복 가이드! 🎨  (2) 2025.06.19
HTML 기초 완전 정복 가이드! 🚀  (2) 2025.06.18
웹 페이지에 생명을 불어넣는 마법! CSS 기초 이론 2  (0) 2025.06.16
웹 페이지에 생명을 불어넣는 마법! CSS 기초 이론 1  (2) 2025.06.13
나만의 코딩 환경을 만들자! VSCode 확장 도구로 개발 생산성 극대화하기  (0) 2025.06.11

관련글

티스토리툴바