HTML - 태그 참조
안녕하세요, 미래의 웹 개발자 여러분! HTML 태그의 세계를 함께 탐험하게 되어 기쁩니다. 컴퓨터 과학을 오랫동안 가르쳐온 사람으로서, HTML 태그를 이해하는 것은 웹 개발의 알파벳을 배우는 것과 같다고 말씀드릴 수 있습니다. 그럼, 시작해보겠습니다!
HTML 태그는 무엇인가요?
HTML 태그는 웹 페이지를 구성하는 기본 블록입니다. 웹 브라우저에게 어떻게 콘텐츠를 표시해야 하는지 알려주는 비밀 코드라고 생각할 수 있습니다. 집을 짓는 것을 상상해보세요 - HTML 태그는 집의 벽, 창문, 문과 같은 것으로, 웹 페이지에 구조를 제공합니다.
예를 들어, 간단한 HTML 태그를 보겠습니다:
<p>This is a paragraph.</p>여기서 <p>는 열 태그이고 </p>는 닫기 태그입니다. 이 사이에 있는 것은 문장이 웹 페이지에段落으로 표시됩니다.
왜 중요한가요?
HTML 태그는 콘텐츠에 의미와 구조를 제공하기 때문에 중요합니다. 이 태그가 없다면, 웹 페이지는 단순한 텍스트의 덤불이 될 것입니다! 태그는 브라우저가 각 콘텐츠 조각이 무엇인지 이해하는 데 도움을 줍니다. 그것이 제목, 문단, 이미지, 링크인지 여부입니다.
HTML 태그 목록과 예제
가장 일반적인 HTML 태그를 탐구해보겠습니다. 각 카테고리에 대해 예제와 설명을 제공하겠습니다.
HTML 기본 태그
이 태그는 모든 HTML 문서의 기초입니다.
| 태그 | 설명 | 예제 |
|---|---|---|
<!DOCTYPE> |
문서 유형 정의 | <!DOCTYPE html> |
<html> |
HTML 페이지의 루트 요소 | <html>...</html> |
<head> |
문서에 대한 메타 정보 포함 | <head>...</head> |
<title> |
문서 제목 지정 | <title>My First Web Page</title> |
<body> |
문서의 본문 정의 | <body>...</body> |
기본 HTML 구조는 다음과 같습니다:
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Welcome to my website!</h1>
<p>This is where all my content goes.</p>
</body>
</html>이 구조는 웹 페이지의 뼈대와 같습니다. 배울 것들은 이 기본 틀 안에 들어맞습니다.
HTML 포맷 태그
이 태그는 웹 페이지에서 텍스트를 포맷하는 데 도움을 줍니다.
| 태그 | 설명 | 예제 |
|---|---|---|
<h1> to <h6>
|
제목 | <h1>Main Heading</h1> |
<p> |
문단 | <p>This is a paragraph.</p> |
<br> |
줄 바꿈 | Line 1<br>Line 2 |
<strong> |
굵은 글씨 | <strong>Important!</strong> |
<em> |
강조된 텍스트 | <em>Italicized</em> |
이제 이 태그들을 실제로 사용해보겠습니다:
<h1>Welcome to My Cookbook</h1>
<h2>Recipe: Chocolate Chip Cookies</h2>
<p>These cookies are <strong>delicious</strong> and <em>easy to make</em>!</p>
<p>Ingredients:<br>
Flour<br>
Sugar<br>
Chocolate chips</p>이 예제는 포맷 태그를 사용하여 레시피 페이지를 구조화하는 방법을 보여줍니다. <h1>과 <h2> 태그는 계층적 제목을 만들고, <strong>과 <em> 태그는 중요한 단어를 강조합니다.
HTML 폼 및 입력 태그
폼은 사용자가 데이터를 입력하여 서버로 전송할 수 있게 합니다.
| 태그 | 설명 | 예제 |
|---|---|---|
<form> |
HTML 폼 정의 | <form>...</form> |
<input> |
입력 컨트롤 | <input type="text" name="username"> |
<textarea> |
여러 줄 입력 컨트롤 | <textarea>Enter text here...</textarea> |
<button> |
클릭 가능한 버튼 | <button type="submit">Send</button> |
간단한 폼 예제는 다음과 같습니다:
<form action="/submit-recipe" method="post">
<label for="recipe-name">Recipe Name:</label>
<input type="text" id="recipe-name" name="recipe-name"><br><br>
<label for="ingredients">Ingredients:</label>
<textarea id="ingredients" name="ingredients"></textarea><br><br>
<button type="submit">Submit Recipe</button>
</form>이 폼은 사용자가 레시피 이름과 재료를 입력할 수 있게 합니다. action 속성은 폼 데이터를 어디로 전송할지 지정하고, method 속성은 어떻게 전송할지 정의합니다.
HTML 이미지 태그
이미지는 웹 페이지를 시각적으로 더 매력적이고 정보적 만들어줍니다.
| 태그 | 설명 | 예제 |
|---|---|---|
<img> |
이미지 내장 | <img src="cookie.jpg" alt="Chocolate chip cookie"> |
이제 레시피 페이지에 이미지를 추가해보겠습니다:
<h2>Chocolate Chip Cookies</h2>
<img src="cookie.jpg" alt="A delicious chocolate chip cookie" width="300" height="200">
<p>Doesn't this look delicious?</p>src 속성은 이미지 파일을 지정하고, alt 속성은 화면 독자나 이미지 로드 실패 시 대체 텍스트를 제공합니다.
HTML 오디오 및 비디오 태그
이 태그는 multimedia content를 웹 페이지에 내장하는 데 사용됩니다.
| 태그 | 설명 | 예제 |
|---|---|---|
<audio> |
사운드 콘텐츠 내장 | <audio src="recipe.mp3" controls></audio> |
<video> |
비디오 콘텐츠 내장 | <video src="baking.mp4" controls></video> |
이제 레시피 페이지에烘焙教学视频를 추가해보겠습니다:
<h3>Watch the Baking Process</h3>
<video src="cookie-baking.mp4" controls width="400" height="300">
Your browser does not support the video tag.
</video>controls 속성은 재생, 일시정지, 볼륨 컨트롤을 추가합니다.
HTML 링크 태그
링크는 웹을 엮는 실로, 사용자가 페이지 간을 이동할 수 있게 합니다.
| 태그 | 설명 | 예제 |
|---|---|---|
<a> |
하이퍼링크 정의 | <a href="https://www.example.com">Visit Example.com</a> |
이제 레시피 페이지에 링크를 추가해보겠습니다:
<p>Check out our <a href="recipes.html">other recipes</a> or <a href="https://www.cookingchannel.com" target="_blank">visit Cooking Channel</a> for more inspiration.</p>href 속성은 링크가 가리키는 URL을 지정하고, target="_blank" 속성은 링크를 새 탭에서 열습니다.
HTML 목록 태그
목록은 정보를 명확하고 읽기 쉽게 정리하는 데 도움을 줍니다.
| 태그 | 설명 | 예제 |
|---|---|---|
<ul> |
비순차 목록 | <ul>...</ul> |
<ol> |
순차 목록 | <ol>...</ol> |
<li> |
목록 항목 | <li>Item</li> |
이제 목록을 사용하여 레시피 재료와 단계를 추가해보겠습니다:
<h3>Ingredients:</h3>
<ul>
<li>2 cups all-purpose flour</li>
<li>1 cup chocolate chips</li>
<li>1/2 cup sugar</li>
</ul>
<h3>Steps:</h3>
<ol>
<li>Mix dry ingredients</li>
<li>Add wet ingredients</li>
<li>Fold in chocolate chips</li>
<li>Bake at 350°F for 10-12 minutes</li>
</ol>이 예제는 비순차 목록(점진 목록)과 순차 목록( 번호 목록)을 어떻게 만드는지 보여줍니다.
HTML 표 태그
테이블은 데이터를 행과 열로 표시하는 데 유용합니다.
| 태그 | 설명 | 예제 |
|---|---|---|
<table> |
테이블 정의 | <table>...</table> |
<tr> |
테이블 행 | <tr>...</tr> |
<th> |
테이블 머리 | <th>Header</th> |
<td> |
테이블 데이터/셀 | <td>Data</td> |
이제 레시피의 영양 정보 테이블을 만들어보겠습니다:
<h3>Nutritional Information (per cookie)</h3>
<table border="1">
<tr>
<th>Nutrient</th>
<th>Amount</th>
</tr>
<tr>
<td>Calories</td>
<td>150</td>
</tr>
<tr>
<td>Fat</td>
<td>7g</td>
</tr>
<tr>
<td>Carbohydrates</td>
<td>20g</td>
</tr>
</table>이 테이블은 헤더와 데이터 셀을 포함한 간단한 테이블을 만듭니다. border 속성은 테이블에 가시적인 테두리를 추가합니다.
HTML 스타일 및 의미 태그
이 태그는 웹 페이지의 구조와 외관을 개선하는 데 도움을 줍니다.
| 태그 | 설명 | 예제 |
|---|---|---|
<div> |
문서의 섹션 정의 | <div>...</div> |
<span> |
텍스트의 인라인 컨테이너 | <span style="color:red;">Red text</span> |
<header> |
문서 또는 섹션의 헤더 정의 | <header>...</header> |
<footer> |
문서 또는 섹션의 푸터 정의 | <footer>...</footer> |
이 태그들을 사용하여 레시피 페이지 구조를 개선해보겠습니다:
<header>
<h1>My Cookbook</h1>
<nav>
<a href="index.html">Home</a> |
<a href="recipes.html">Recipes</a> |
<a href="about.html">About</a>
</nav>
</header>
<main>
<article>
<h2>Chocolate Chip Cookies</h2>
<!-- Recipe content here -->
</article>
</main>
<footer>
<p>© 2023 My Cookbook. All rights reserved.</p>
</footer>이러한 의미 태그는 브라우저와 검색 엔진에게 페이지 구조에 대한 더 많은 의미를 제공합니다.
HTML 메타 태그
메타 태그는 HTML 문서에 대한 메타데이터를 제공합니다. <head> 섹션에 들어갑니다.
| 태그 | 설명 | 예제 |
|---|---|---|
<meta> |
HTML 문서에 대한 메타데이터 지정 | <meta charset="UTF-8"> |
이렇게 메타 태그를 사용할 수 있습니다:
<head>
<meta charset="UTF-8">
<meta name="description" content="Delicious chocolate chip cookie recipe">
<meta name="keywords" content="cookies, baking, dessert">
<meta name="author" content="Jane Doe">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chocolate Chip Cookie Recipe</title>
</head>이 메타 태그는 문자 인코딩, 페이지 설명, 키워드, 작성자, 그리고 반응형 디자인을 위한 뷰포트 설정에 대한 정보를 제공합니다.
HTML 프로그래밍 태그
이 태그는 외부 콘텐츠나 스크립트를 내장하거나 참조하는 데 사용됩니다.
| 태그 | 설명 | 예제 |
|---|---|---|
<script> |
클라이언트 측 스크립트 정의 | <script src="script.js"></script> |
<noscript> |
스크립트가 비활성화된 사용자에게 대체 콘텐츠 정의 | <noscript>Your browser does not support JavaScript!</noscript> |
이 태그들을 사용하는 예제는 다음과 같습니다:
<head>
<script src="recipe-calculator.js"></script>
</head>
<body>
<!-- Other content -->
<noscript>
<p>Please enable JavaScript to use the ingredient calculator.</p>
</noscript>
</body><script> 태그는 외부 JavaScript 파일을 링크하고, <noscript> 태그는 JavaScript가 비활성화된 사용자에게 메시지를 제공합니다.
그렇게 해서 HTML 태그의 다양한 범위를 다루었습니다. 이제 이 태그들을 사용하여 자신의 웹 페이지를 만들어보세요. 실험하고, 실수하고, 그것으로부터 배워보세요. 그게 모든 위대한 웹 개발자가 시작하는 방법입니다!
행복하게 코딩하시고, 여러분의 웹 페이지가 항상 아름답게 렌더되길 바랍니다!
Credits: Image by storyset