학습 내용

HTML 기초 완전 정복 가이드! 🚀

초록대디 2025. 6. 18. 17:42

 

안녕하세요, 초록대디 입니다! 🙋‍♂️ 오늘은 '유노코딩과 함께하는 더덕마켓 클론 코딩' 강의를 통해 학습한 HTML의 모든 것을 총정리하여 여러분과 나누고자 합니다.

웹 개발의 기본 개념부터 웹 페이지의 뼈대를 만들고, 여기에 다양한 콘텐츠와 기능을 담아내는 HTML의 A부터 Z까지, 저와 함께 차근차근 알아봅시다! 📚

1. 웹 개발의 첫걸음: HTML은 왜 필요할까? 🌐

우리가 매일 사용하는 인터넷은 여러 대의 컴퓨터를 하나로 연결해주는 거대한 통신망입니다. 그리고 웹(Web)은 이 인터넷 상에서 컴퓨터들 간에 정보를 공유할 수 있도록 해주는 네트워크 시스템이죠. 웹 개발이란 바로 이 웹을 통해 공유할 웹사이트를 만들고, 이를 서비스하기 위해 필요한 다양한 환경을 구축하는 일을 뜻합니다.

이때 웹사이트를 만들 때 반드시 필요한 언어가 바로 HTML과 CSS입니다.

HTML(HyperText Markup Language)은 '하이퍼텍스트 마크업 랭귀지'를 의미합니다. 쉽게 말해, 웹 브라우저를 통해 표시되는 웹 페이지의 콘텐츠(내용)를 정의하기 위해 사용하는 언어라고 생각하시면 됩니다. 1991년 팀 버너스리에 의해 처음 제안된 HTML은 끊임없이 발전해왔으며, 현 시점에는 HTML5가 웹 개발의 표준으로 인정받고 있습니다.

 

2. 나만의 개발 환경 구축하기: 크롬과 VSCode 🛠️

코딩 학습의 핵심은 "백문이 불여일견, 백견이 불여일타!"입니다. 직접 코드를 작성해보는 것이 가장 중요하죠. 이를 위해 우리는 두 가지 필수 도구를 준비합니다.

  • 웹 브라우저: Google Chrome 🌐
    • HTML 문서를 가져다 내용을 해석하고 표시하는 역할을 합니다. 사람들이 가장 많이 사용하고 성능도 좋은 웹 브라우저입니다.
  • 코드 편집 프로그램 (코드 에디터): Visual Studio Code (VSCode) 💻
    • 마이크로소프트사에서 만들었으며, 크롬과 마찬가지로 이용자가 많고 성능이 뛰어나 개발자들 사이에서 매우 인기가 높습니다.

 

3. HTML 문서의 기본 구조: 웹 페이지의 설계도 🗺️

HTML 문서는 단순히 화면에 표시될 콘텐츠 외에 '문서 정보'도 포함합니다. 모든 것은 태그로 표현되며, 문서의 정보와 내용은 head와 body 태그로 구분됩니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>문서 제목</title> </head>
<body>
    </body>
</html>
  • <!DOCTYPE html>: 이 문서가 HTML5로 작성되었음을 선언합니다.
  • <html>: 전체 HTML 문서의 시작과 끝을 나타내는 태그입니다. <head>와 <body> 태그를 감싸는 역할을 합니다.
  • <head>: 문서에 대한 메타 정보(데이터에 대한 데이터)를 담고 있습니다.
  • <body>: 실제로 사용자에게 보여지는 웹 페이지의 모든 콘텐츠가 들어가는 부분입니다.

 

 

4. HTML의 기본 문법 파헤치기: 태그, 속성, 주석 📝

HTML은 '태그(tag)'라 불리는 표기법을 사용해 역할을 수행합니다.

 

4.1. 태그의 기본 형태: 여는 태그와 닫는 태그

대부분의 태그는 여는 태그 (<태그명>)와 닫는 태그 (</태그명>)로 구성되며, 이 사이에 콘텐츠가 들어갑니다.
콘텐츠를 생략할 수 있는 <img> 같은 태그는 단일 태그로도 사용됩니다.

태그 작성 시 알아두면 좋을 팁! 💡 

  • 태그 이름은 소문자로 씁니다.
  • 여는 태그와 닫는 태그를 정확히 입력합니다.
  • 태그의 콘텐츠로 또 다른 태그가 포함될 수 있습니다.
  • 들여쓰기를 적절하게 사용하는 것이 좋습니다 (적극 권장).

4.2. 속성(Attributes): 태그에 부가 기능을 더하다! ✨

속성(attributes)은 태그의 부가적인 기능을 정의하며, 선택 사항입니다. 속성은 항상 시작 태그의 내부에 정의하며, 여러 개의 속성을 추가할 때는 공백으로 구분합니다.

  • 형태: <태그명 속성명="값">콘텐츠</태그명>
  • 단일 태그에도 속성을 추가할 수 있습니다.
  • 전역 속성 (Global attributes): 모든 HTML 태그에서 공통으로 사용할 수 있는 특성입니다.
    • id: 요소에 고유한 이름을 부여하는 식별자.
    • class: 요소를 그룹 별로 묶을 수 있는 식별자.
    • style: 요소에 적용할 CSS 스타일 선언.
    • title: 요소의 추가 정보를 제공하는 텍스트로, 툴팁 제공.

4.3. 주석: 코드 속 메모장 🤫

주석은 사람에게는 보이지만, 컴퓨터(웹 브라우저)에게는 보이지 않는 코드입니다. 주로 코드에 대한 메모를 남기기 위한 용도로 사용됩니다.

  • 형태: <!--     -->

 

 

5. 콘텐츠를 다양하게 표현하기: 텍스트, 이미지, 링크, 목록, 표 📝🖼️🔗📋📊

5.1. 텍스트 표시하기: 문단, 제목, 구분선, 줄바꿈/공백 ✏️

  • <p> 태그: 문단 요소를 나타내는 가장 많이 사용되는 텍스트 태그입니다. 하나의 p 태그는 하나의 문단을 표현하며, 문단 사이에 여백이 있습니다.
  • <h1> ~ <h6> 태그: 제목(표제) 요소를 나타내며, 숫자가 작을수록 글자 크기가 큽니다 (1이 가장 크고 6이 가장 작음).
  • <hr> 태그: 수평선을 표시하여 주제 변경 또는 내용을 구분할 때 사용합니다.
  • HTML 텍스트의 특징: HTML 코드 속 텍스트는 엔터를 이용한 줄바꿈이나 여러 스페이스를 이용한 공백을 무시하고 한 번씩만 허용합니다.
    • 강제 줄바꿈: <br> 태그를 사용합니다.
    • 여러 공백: &nbsp; (non-breaking space)를 사용합니다.

5.2. 이미지 표시하기: <img> 태그 🏞️

<img> 태그는 이미지를 표시할 때 사용합니다. 닫는 태그가 필요 없는 단일 태그입니다.

  • src 속성: 표시할 이미지의 URL(위치 정보와 파일명)을 입력받습니다.
  • alt 속성: '대체 텍스트' 역할을 하며, 이미지가 로딩되지 않거나 시각장애인을 위한 웹 접근성에도 중요합니다.
  • width, height 속성: 이미지의 너비와 높이를 픽셀(px) 단위로 지정할 수 있습니다.

5.3. 링크 표시하기: <a> 태그 🔗

<a> 태그는 다른 페이지, 전화번호, 이메일 주소 등 다양한 콘텐츠로 연결되는 링크 역할을 합니다.

  • href 속성: 연결할 URL을 입력합니다.
  • target 속성: 링크를 새 탭에서 열지(_blank), 현재 탭에서 열지(_self, 기본값) 결정합니다.

5.4. 목록 만들기: <ul>, <ol>, <li> 태그 📋

연관 있는 항목들을 나열할 때 사용합니다.

  • <ul>: 순서 없는 목록 (Unordered List).
  • <ol>: 순서 있는 목록 (Ordered List).
  • <li>: 목록의 각 항목 (List Item). <ul> 또는 <ol> 안에 사용됩니다.

5.5. 표 만들기: <table>과 관련 태그들 📊

표는 행과 열로 이루어진 구조로, 셀(cell)이 콘텐츠의 최소 단위입니다.

  • <table>: 하나의 표를 나타냅니다.
  • <tr>: 표 안에서 하나의 행 (Table Row)을 나타냅니다.
  • <th>: 행 안에서 제목에 해당하는 셀 (Table Header)을 나타냅니다.
  • <td>: 행 안에서 콘텐츠에 해당하는 셀 (Table Data)을 나타냅니다.
  • <caption>: <table> 태그 안에 표의 제목이나 설명을 추가합니다.
  • <thead>, <tbody>, <tfoot>: 표의 구조를 명확하게 표현하여 코드 유지보수 및 웹 접근성을 높입니다.

 

6. 사용자로부터 입력받기: 다양한 입력 태그들 ✍️

웹 브라우저를 통해 사용자가 데이터를 입력할 수 있도록 해주는 '입력 요소'들을 살펴봅시다.

6.1. <input>: 입력의 대표 주자!

<input> 태그는 입력 요소를 만드는 대표적인 태그이며, type 속성이 핵심입니다. type 값에 따라 다양한 종류의 입력 필드를 만듭니다.

  • 스트 타입: text (기본값), email, password, search, date 등.
  • 수치/선택 타입: color, number, range 등.

6.2. <label>: 입력 요소에 라벨 붙이기 🏷️

<label> 태그는 입력 요소에 라벨을 붙여 사용자에게 직관적인 정보를 제공하고, 코드의 가독성을 높입니다.

6.3. <select>와 <option>: 선택 메뉴 제공 ☕

  • <select>: 다수의 옵션을 포함하는 선택 메뉴를 만듭니다.
  • <option>: <select> 메뉴 안에 들어가는 개별 선택지입니다].

6.4. <textarea>: 여러 줄 텍스트 입력 📄

<textarea> 태그는 <input> 태그와 달리 여러 줄의 텍스트를 입력받을 수 있습니다. cols와 rows 속성으로 텍스트 영역의 크기를 조절합니다.

6.5. <progress>: 작업 진척도 표시 📊

<progress> 태그는 작업 진행 상태를 나타냅니다. max 속성은 총 작업량을, value 속성은 현재 진척도를 지정합니다.

6.6. <button>: 클릭 가능한 버튼 🖱️

<button> 태그는 클릭을 입력으로 받는 버튼 요소를 만듭니다. 태그 사이의 콘텐츠가 버튼 텍스트가 됩니다.

 

7. 사용자 입력, 서버로 보내기: 입력 폼 (<form>) 📤

<form> 태그는 사용자가 입력한 데이터를 서버 측으로 제출(submit)하는 것을 목적으로 합니다.

  • action: 입력값을 전송할 서버의 URL을 지정합니다.
  • method: 클라이언트가 입력한 데이터를 어떤 식으로 전송할지 (GET 또는 POST) 결정합니다.
    • GET: 서버로부터 정보를 '가져오겠다'는 성격의 요청.
    • POST: 서버의 정보를 '조작하겠다'(추가/수정/삭제)는 성격의 요청].
  • name: 폼 요소 내 각 입력 항목의 역할을 구별하는 속성으로, 서버가 정보를 구별하는 데 중요합니다.

 

8. 의미론적인 코드: 시맨틱 태그 (Semantic Tags) 💡

시맨틱 태그는 개발자와 브라우저에게 '의미'를 제공하는 HTML 태그입니다. 태그명 자체가 요소의 목적이나 역할을 나타내죠.

왜 시맨틱 태그를 사용할까요? 🤔

  • 검색 엔진 최적화 (SEO): 검색 엔진은 시맨틱 태그(태그명)를 중요한 단서로 인식하여 페이지 내용을 더 잘 이해하고 검색 결과에 반영합니다.
  • 웹 접근성 향상: 시각 장애가 있는 사용자가 화면 판독기로 페이지를 탐색할 때 도움이 됩니다.
  • 코드 가독성 향상: 개발자가 코드를 읽을 때 각 부분이 어떤 의미를 가지는지 쉽게 파악할 수 있어 협업 및 유지보수가 용이해집니다.
  • <div> / <span> 남용 방지: 컨테이너의 남용을 방지하여 코드를 더 깔끔하게 작성할 수 있습니다.

대표적인 시맨틱 태그들: <header>, <nav>, <main>, <article>, <section>, <aside>, <footer> 등.

 

9. 웹 페이지 정보 관리: 메타데이터 (<meta>) 📄

<meta> 태그는 HTML 문서에 대한 메타데이터(metadata)를 정의합니다. 메타데이터란 '데이터에 대한 데이터', 즉 문서 자체에 대한 정보를 의미합니다.

  • <meta> 태그는 항상 <head> 태그 안에 들어가며, 일반적으로 문자 세트, 페이지 설명, 키워드, 문서 작성자, 뷰포트 설정을 지정하는 데 사용됩니다.
  • <meta> 태그를 사용하는 이유: 웹 페이지에 대한 정보를 제공하여 검색 엔진이 페이지를 검색하고 검색 결과에 반영하는 데 참고할 수 있도록 합니다.

9.1.주요 <meta> 속성 🔑

  • charset: 문서의 문자 세트를 지정합니다. (예: <meta charset="utf-8">). 한글을 포함한 다양한 문자가 깨지지 않도록 utf-8 방식을 사용하는 것이 좋습니다. 인코딩을 명확하게 기입하지 않으면 문자가 깨질 가능성이 있습니다.
  • http-equiv: HTTP 헤더와 관련된 정보를 지정하고, content 속성이 그에 대한 정보(값)를 지정합니다. (예: IE 브라우저 최신 엔진 사용 지정, 페이지 새로고침 등.
  • name & content: name 속성을 이름으로, content 속성을 값으로 하여 문서 정보를 '이름+값' 쌍의 형태로 제공할 때 사용합니다. (예: author, description, keywords 등.
    • 이러한 정보를 입력하는 것은 검색 최적화(SEO)에 도움이 됩니다.

 

 

실습 하기! 🚀

아래에는 '유노코딩과 함께하는 더덕마켓 클론 코딩' 강의의 실습 내용 입니다. 

 

프로필 페이지 만들기

 

 

설문조사 양식 만들기

 

 

 

다음 시간에는 CSS 편을 학습하고 요약하면서 공부해볼게요~