1. HTML이란?
**HTML(HyperText Markup Language)**은 웹 페이지를 만드는 가장 기본적인 언어야. 쉽게 말해서, 웹 페이지의 뼈대를 만드는 역할을 하지. “이건 제목이다”, “이건 단락이다”, “이건 이미지다” 이런 식으로 콘텐츠의 종류와 구조를 지정해 주는 거야.
HTML의 기본 단위는 **태그(tag)**야. 이 태그들은 <와 >로 감싸져 있고, 대부분의 태그는 여는 태그와 닫는 태그가 짝을 이루고 있어. 예를 들면, 제목을 만들 때는 <h1>제목입니다</h1> 이렇게 써서 <h1>으로 시작하고 </h1>으로 끝나. 여기서 숫자는 제목의 크기를 나타내는데, <h1>이 제일 크고 <h6>이 제일 작아.
이런 HTML을 가지고 우리가 웹 페이지의 구조를 정의하는 거야. 예를 들어, 이 웹 페이지가 어떤 요소로 구성되어 있는지, 텍스트나 이미지가 어디에 위치하는지를 HTML로 만들어.
2. HTML의 주요 태그들
여기서 좀 더 자주 쓰이는 태그들을 알아보자.
• 제목 태그 (<h1> ~ <h6>): 이 태그들은 페이지의 제목을 표시하는 데 사용해. 중요한 순서대로 <h1>부터 <h6>까지 쓸 수 있어.
<h1>가장 중요한 제목</h1>
<h2>조금 덜 중요한 제목</h2>
• 단락 태그 (<p>): 텍스트 단락을 표시할 때 써. 그냥 평범한 텍스트를 넣을 때 주로 쓰이는 거지.
<p>이건 단락입니다. 웹 페이지에 텍스트를 표시하는 데 사용합니다.</p>
• 링크 태그 (<a>): 다른 페이지로 이동하는 하이퍼링크를 만드는 태그야. href 속성을 이용해서 이동할 URL을 지정할 수 있어.
<a href="https://www.google.com">구글로 가기</a>
• 이미지 태그 (<img>): 이미지를 삽입할 때 사용하는 태그야. src 속성을 사용해서 이미지 파일의 경로를 지정해 줘.
<img src="example.jpg" alt="예시 이미지">
• 리스트 태그 (<ul>, <ol>, <li>): 목록을 만들 때 사용하는 태그야. <ul>은 순서가 없는 리스트(즉, 그냥 점으로 표시되는 리스트), <ol>은 순서가 있는 리스트(숫자 목록)야. 그리고 <li>는 리스트의 항목이야.
<ul>
<li>첫 번째 항목</li>
<li>두 번째 항목</li>
</ul>
<ol>
<li>첫 번째 항목</li>
<li>두 번째 항목</li>
</ol>
• 테이블 태그 (<table>, <tr>, <td>, <th>): 표를 만드는 태그야. <table>은 테이블 전체를, <tr>은 행을, <td>는 셀을, <th>는 테이블의 헤더 셀을 나타내.
<table>
<tr>
<th>이름</th>
<th>나이</th>
</tr>
<tr>
<td>홍길동</td>
<td>25</td>
</tr>
</table>
이렇게 기본적인 태그들을 사용해서 페이지를 구성할 수 있어. 각각의 태그들이 어떤 역할을 하는지 알고 사용하면, 웹 페이지의 구조를 쉽게 만들 수 있지.
3. HTML 속성들
HTML 태그들은 **속성(attribute)**을 가지고 있어. 이 속성들은 태그에 대한 추가적인 정보를 제공해 주지. 예를 들면, 이미지의 src나 링크의 href 같은 거야.
• href 속성: <a> 태그에서 사용되고, 링크가 이동할 주소를 지정해.
• src 속성: <img> 태그에서 사용되고, 이미지 파일의 경로를 지정하지.
• alt 속성: <img> 태그에서 이미지가 로딩되지 않을 때 대신 표시할 텍스트를 지정해. 이미지가 깨졌을 때 이 텍스트가 보이게 돼.
<a href="https://example.com">예시 사이트로 이동</a>
<img src="example.jpg" alt="예시 이미지">
4. HTML의 구조
HTML 파일은 다음과 같은 기본 구조로 이루어져 있어:
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>웹 페이지 제목</title>
</head>
<body>
<h1>여기서부터 본문이 시작됩니다</h1>
<p>HTML을 배우는 중입니다!</p>
</body>
</html>
• <!DOCTYPE html>: 이 선언은 이 문서가 HTML5라는 것을 브라우저에게 알려줘.
• <html>: HTML 문서의 시작과 끝을 나타내는 태그야.
• <head>: 여기에 메타데이터(문서의 정보, 문자 인코딩, 제목 등)가 들어가.
• <body>: 실제 웹 페이지의 내용이 들어가는 부분이야.
<body> 부분 안에 우리가 보고 상호작용할 수 있는 HTML 요소들이 들어가는 거고, <head> 부분에는 제목이나 스타일, 스크립트 같은 페이지의 보이지 않는 정보들이 들어가.
5. HTML의 구조 - 추가 개념
5.1 기본 HTML 문서 구조 심화
HTML 문서의 구조는 단순하지만, 이 기본 구조가 어떻게 웹 브라우저에 해석되는지, 그리고 어떤 부분이 왜 중요한지를 이해하는 게 좋아. 그래서 HTML 기본 구조에 대해서 더 깊이 설명할게.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>웹 페이지 제목</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>여기서부터 본문이 시작됩니다</h1>
<p>HTML을 배우는 중입니다!</p>
</header>
</body>
</html>
• <!DOCTYPE html>: 이 선언은 문서가 HTML5라는 것을 브라우저에게 알려줘. 이걸 넣지 않으면 브라우저가 문서를 “쿽스 모드(Quirks Mode)“로 해석하게 돼. 쿽스 모드는 표준 모드와는 다르게 브라우저마다 문서를 다르게 렌더링할 수 있어서 항상 <!DOCTYPE html>를 맨 위에 써 주는 게 좋아.
• <html>: 전체 HTML 문서의 루트(root) 요소야. 모든 HTML 코드는 <html> 태그 안에 있어야 해. 여기서 lang="ko" 속성은 페이지의 언어가 한국어라는 것을 의미해. 이 속성은 검색 엔진 최적화(SEO)에도 중요하고, 접근성을 높이는 데도 유용해.
• <head>: 문서에 대한 메타데이터가 들어가는 부분이야. 이 메타데이터는 브라우저에는 보이지 않지만 문서를 이해하는 데 중요한 정보들이야.
• <meta charset="UTF-8">: 문서의 문자 인코딩을 설정해. UTF-8을 사용하면 한글, 영어, 기타 다양한 문자를 제대로 표시할 수 있어.
• <meta name="viewport" content="width=device-width, initial-scale=1.0">: 이 메타 태그는 반응형 웹 디자인을 위한 설정이야. width=device-width는 화면의 너비에 맞추고, initial-scale=1.0은 초기 확대 비율을 1로 설정한다는 의미야. 모바일 장치에서도 웹 페이지가 제대로 보이도록 해주는 역할을 하지.
• <title>: 브라우저 탭에 표시되는 제목이야. 검색 엔진에도 노출되기 때문에 페이지 내용을 간단하고 명확하게 설명해야 해.
• <body>: 본문 콘텐츠가 들어가는 부분이야. 사용자에게 보이는 모든 HTML 요소들이 <body> 태그 안에 위치해.
5.2 HTML 요소의 중첩
HTML 요소들은 다른 요소들을 **포함(중첩)**할 수 있어. 중요한 건 올바른 구조로 중첩을 해야 한다는 거야. 예를 들어, 다음과 같이 태그를 잘못 중첩하면 브라우저가 의도한 대로 렌더링하지 않을 수 있어.
<p>이 문장은 <strong>강조 <em>이탤릭</p></em>입니다.</strong>
여기서는 <strong>과 <em> 태그가 잘못된 순서로 닫혀 있어서 HTML 구조가 깨져. 올바르게 중첩하려면 이렇게 해야 해:
<p>이 문장은 <strong>강조 <em>이탤릭</em></strong>입니다.</p>
모든 여는 태그에는 반드시 그에 맞는 닫는 태그가 있어야 하고, 안쪽에 있는 태그가 먼저 닫혀야 해.
5.3 시맨틱 태그
시맨틱(Semantic) 태그는 HTML5에서 매우 중요한 개념이야. 시맨틱 태그는 요소의 목적을 더 명확하게 설명해서 브라우저나 검색 엔진, 스크린 리더 등이 페이지 구조를 더 잘 이해할 수 있게 도와줘. 대표적인 시맨틱 태그들은 다음과 같아:
• <header>: 페이지나 섹션의 머리 부분을 나타내. 로고나 네비게이션 바 등을 넣는 데 사용해.
• <nav>: 내비게이션 링크들을 그룹화하는 태그야. 사이트의 메뉴나 주요 링크들이 여기에 들어가.
<nav>
<ul>
<li><a href="#home">홈</a></li>
<li><a href="#about">소개</a></li>
<li><a href="#contact">연락처</a></li>
</ul>
</nav>
• <main>: 페이지의 주요 콘텐츠를 나타내. 이 태그는 <header>나 <footer> 같은 주변 콘텐츠를 제외한 페이지의 핵심 부분을 포함해.
<main>
<h2>주요 콘텐츠 제목</h2>
<p>여기에는 주요 콘텐츠가 들어갑니다.</p>
</main>
• <section>: 관련 있는 콘텐츠의 그룹을 나타내. 블로그 포스트나 기사 같은 내용을 그룹화할 때 좋아.
• <article>: 독립적인 콘텐츠 조각을 의미해. 게시물이나 블로그 글처럼 자체적인 의미를 가진 콘텐츠를 나타낼 때 사용해.
• <footer>: 페이지나 섹션의 하단 부분을 나타내. 보통 저작권 정보, 연락처, 사이트 맵 등이 들어가.
5.4 폼과 입력 요소
**폼(form)**은 사용자로부터 데이터를 입력받을 때 사용하는 HTML 요소야. 로그인을 하거나 검색을 하는 등의 작업에 모두 폼이 필요해.
<form action="/submit" method="post">
<label for="username">사용자 이름:</label>
<input type="text" id="username" name="username">
<input type="submit" value="제출">
</form>
• <form>: 폼을 정의하는 태그야. action 속성은 데이터를 보낼 URL을, method 속성은 데이터를 보내는 방식을 나타내 (get 또는 post).
• <label>: 폼 요소에 대한 설명을 제공하는 태그야. for 속성은 연결할 입력 요소의 id를 가리켜.
• <input>: 사용자로부터 데이터를 입력받는 요소야. type 속성으로 입력 유형을 설정해 (text, password, email, submit 등).
5.5 HTML 엔티티
HTML에서 특수 문자를 사용할 때는 HTML 엔티티를 사용해야 해. HTML 태그와 혼동될 수 있는 문자나 키보드에 없는 특수 기호를 나타낼 때 쓰는 거지.
• <: < 기호를 나타내.
• >: > 기호를 나타내.
• &: & 기호를 나타내.
• : 공백(space)을 나타내.
예를 들어, 코드 예시를 HTML 문서에 그대로 표시하고 싶을 때 이런 엔티티들을 사용해:
<p><div>이것은 div 태그입니다.</div></p>
이렇게 하면 브라우저에서 <div>이것은 div 태그입니다.</div>로 출력돼.
5.6 HTML 속성들에 대한 추가 설명
HTML 태그들은 **속성(attribute)**을 통해 추가적인 정보를 가질 수 있어. 속성은 태그 안에 위치하고, 태그에 대해 다양한 설정을 줄 수 있지.
• id: 문서 내에서 유일한 식별자를 설정해. 특정 요소를 자바스크립트로 조작하거나 CSS에서 스타일을 지정할 때 유용해.
<div id="main-content">여기가 메인 콘텐츠입니다.</div>
• class: 여러 요소에 공통으로 적용할 스타일을 지정할 때 사용해. class는 중복될 수 있어서 여러 요소에 동일한 클래스를 지정할 수 있어.
<div class="box">첫 번째 박스</div>
<div class="box">두 번째 박스</div>
• src: 이미지나 비디오 등 외부 리소스의 경로를 지정할 때 사용해.
<img src="image.jpg" alt="예시 이미지">
• alt: <img> 태그에 사용되며, 이미지가 로딩되지 않을 때 대신 보여줄 텍스트를 의미해. 또한, 시각 장애인을 위한 스크린 리더가 이 텍스트를 읽어주기 때문에 웹 접근성 측면에서도 매우 중요해.
<img src="image.jpg" alt="예시 이미지">
• href: <a> 태그에서 사용되며, 링크의 목적지를 지정하는 속성이야.
<a href="https://www.example.com">예시 사이트로 이동</a>
• target: <a> 태그에서 사용되어 링크를 클릭할 때 어떻게 열릴지 결정해. 예를 들어 target="_blank"를 사용하면 새 창에서 링크가 열려.
<a href="https://www.example.com" target="_blank">새 창에서 열기</a>
• type: 주로 <input>이나 <button> 태그에 사용되며, 요소의 유형을 지정해. 예를 들어, type="text"는 텍스트 입력 필드를, type="submit"은 제출 버튼을 나타내.
<input type="password" name="user-password">
• name: 폼 요소에서 데이터의 이름을 지정해. 서버로 데이터를 전송할 때 각 데이터의 이름이 되기 때문에 폼 제출 시 필수로 사용돼.
<input type="text" name="username">
• placeholder: <input>이나 <textarea> 태그에서 사용되며, 사용자가 데이터를 입력하기 전에 입력 필드에 힌트를 제공하는 역할을 해.
<input type="text" placeholder="이름을 입력하세요">
5.7 HTML 주석
HTML에서 **주석(comment)**은 코드를 설명하거나 임시로 비활성화하려고 할 때 사용해. 주석은 브라우저에 표시되지 않고, 코드 내에서 개발자가 참고할 수 있도록 도와주는 역할을 하지.
<!-- 이 부분은 주석입니다. -->
<p>이 문장은 사용자에게 표시됩니다.</p>
주석을 활용하면 코드의 구조나 특정 부분에 대한 설명을 남길 수 있어서 협업이나 유지보수할 때 유용해.
5.8 HTML 폼 심화
폼은 웹 애플리케이션에서 사용자로부터 데이터를 입력받기 위해 필수적인 요소야. 폼에는 다양한 입력 요소들이 있어:
• <input type="radio">: 사용자가 하나의 선택지를 선택하도록 할 때 사용해.
<label><input type="radio" name="gender" value="male"> 남성</label>
<label><input type="radio" name="gender" value="female"> 여성</label>
여기서 name 속성은 같은 그룹으로 묶인 라디오 버튼에서 하나만 선택할 수 있도록 해줘.
• <input type="checkbox">: 사용자가 여러 개의 선택지를 선택할 수 있게 할 때 사용해.
<label><input type="checkbox" name="hobby" value="reading"> 독서</label>
<label><input type="checkbox" name="hobby" value="travel"> 여행</label>
• <select>와 <option>: 드롭다운 메뉴를 만들 때 사용해. 사용자가 선택할 수 있는 옵션들을 제공해.
<label for="city">도시를 선택하세요:</label>
<select id="city" name="city">
<option value="seoul">서울</option>
<option value="busan">부산</option>
<option value="incheon">인천</option>
</select>
• <textarea>: 여러 줄의 텍스트를 입력받고 싶을 때 사용해.
<label for="message">메시지를 입력하세요:</label>
<textarea id="message" name="message" rows="4" cols="50"></textarea>
5.9 HTML5의 새로운 기능
HTML5는 이전 버전에 비해 많은 새로운 기능과 요소들을 추가했어. 이를 통해 웹 페이지의 기능을 더 강화할 수 있어.
• <audio>와 <video>: HTML5에서는 오디오와 비디오 파일을 쉽게 삽입하고 제어할 수 있게 되었어.
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
지원되지 않는 브라우저입니다.
</audio>
<video controls width="600">
<source src="video.mp4" type="video/mp4">
지원되지 않는 브라우저입니다.
</video>
• <canvas>: 그래픽을 그릴 수 있는 요소야. JavaScript를 사용해서 그림을 그리고 애니메이션을 구현할 수 있어.
<canvas id="myCanvas" width="400" height="400"></canvas>
• <article>, <section>, <nav>, <header>, <footer> 등의 시맨틱 태그가 추가되어, 더 의미 있는 HTML 구조를 만들 수 있어. 이를 통해 **SEO(검색 엔진 최적화)**와 웹 접근성이 크게 향상돼.
• 폼 관련 새로운 속성들: HTML5에서는 폼을 더 쉽게 사용할 수 있도록 여러 속성들이 추가되었어.
• required: 필수 입력 필드임을 지정해.
<input type="text" name="username" required>
• placeholder: 사용자가 어떤 정보를 입력해야 하는지 힌트를 제공해.
<input type="email" placeholder="이메일을 입력하세요">
• pattern: 입력값이 특정 형식에 맞는지 검사하는 정규식을 지정할 수 있어.
<input type="text" pattern="[A-Za-z]{3,}">
