HTML 기초: 기본 태그와 구조
이번 2강에서는 웹 개발의 첫걸음인 HTML에 대해 좀 더 자세히 알아보도록 하겠습니다. HTML(HyperText Markup Language)은 웹 페이지의 기본 구조를 만드는데 사용됩니다. 이 강의에서는 HTML의 핵심 요소와 그들의 사용법에 대해 배워봅니다.
HTML 문서의 기본 구조
모든 HTML 문서는 기본적인 구조를 가지고 있습니다. 이 구조는 웹 페이지가 어떻게 구성되어야 하는지 브라우저에게 알려줍니다.
<!DOCTYPE html>
<html>
<head>
<title>페이지 제목</title>
</head>
<body>
<!-- 페이지의 내용 -->
</body>
</html>- <!DOCTYPE html>: 문서 타입 선언으로, HTML5 문서임을 나타냅니다.
- <html>: 문서의 루트 요소로, 전체 HTML 문서를 감쌉니다.
- <head>: 메타 데이터, 제목, 스크립트, 스타일 등의 정보를 담는 곳입니다.
- <title>: 웹 브라우저 탭에 표시될 페이지의 제목을 설정합니다.
- <body>: 실제 페이지의 내용을 작성하는 곳으로, 텍스트, 이미지, 링크 등의 요소를 포함합니다.
주요 HTML 태그
HTML 문서는 다양한 태그를 사용하여 내용을 구조화합니다. 아래는 몇 가지 기본적인 태그들입니다.
제목 태그: <h1>부터 <h6>
- <h1>부터 <h6>까지는 제목을 나타내는 태그입니다.
- <h1>은 가장 큰 제목을 나타내며, <h6>으로 갈수록 작아집니다.
단락 태그: <p>
- <p> 태그는 텍스트 단락을 만드는 데 사용됩니다.
- 텍스트를 구조화하고, 가독성을 높이기 위해 중요합니다.
링크 태그: <a>
- <a href="URL"> 태그는 하이퍼링크를 생성합니다.
- href 속성에 링크의 목적지 URL을 지정합니다.
이미지 태그: <img>
- <img src="이미지 URL" alt="대체 텍스트"> 태그를 사용하여 이미지를 삽입합니다.
- src는 이미지의 위치를, alt는 이미지가 표시되지 않을 때 나타날 텍스트를 지정합니다.
리스트 태그: <ul>, <ol>, <li>
- <ul> (unordered list)과 <ol> (ordered list) 태그는 각각 순서 없는 목록과 순서 있는 목록을 생성합니다.
- <li> (list item) 태그는 목록 항목을 나타냅니다
테이블 태그: <table>, <tr>, <th>, <td>
- <table> 태그는 표를 만드는 데 사용됩니다.
- <tr> (table row) 태그는 행을 생성합니다.
- <th> (table header) 태그는 제목 셀을, <td> (table data) 태그는 데이터 셀을 나타냅니다.
예제: 간단한 HTML 페이지 만들기
<!DOCTYPE html>
<html>
<head>
<title>나의 첫 웹 페이지</title>
</head>
<body>
<h1>환영합니다!</h1>
<p>이것은 내 첫 번째 웹 페이지입니다.</p>
<a href="https://www.example.com">더 많은 정보를 위한 링크</a>
<img src="image.jpg" alt="설명">
<h2>목록과 항목</h2>
<ul>
<li>HTML 기초</li>
<li>CSS 스타일링</li>
<li>JavaScript 프로그래밍</li>
</ul>
<h2>순서 있는 목록</h2>
<ol>
<li>페이지 구조 설정</li>
<li>콘텐츠 추가</li>
<li>스타일 적용</li>
</ol>
<h2>테이블 사용하기</h2>
<table border="1">
<tr>
<th>번호</th>
<th>이름</th>
<th>연락처</th>
</tr>
<tr>
<td>1</td>
<td>홍길동</td>
<td>010-1234-5678</td>
</tr>
<tr>
<td>2</td>
<td>김철수</td>
<td>010-9876-5432</td>
</tr>
</table>
</body>
</html>섹션과 그룹 태그: <section>, <article>, <div>, <header>, <footer>
웹 페이지를 논리적으로 구분하고 구조화하기 위한 태그들도 있습니다. 섹션, 그룹 태그라고 부르는데요. 특히 자주 사용되는 태그에는 div가 있습니다. 왠만한 것에는 div를 사용하면 통용되지만 알아두면 좋을 것입니다.
<section>
- <section> 태그는 문서의 독립적인 구역을 정의합니다. 예를 들어, 챕터, 탭, 또는 주제별 그룹 등을 나타낼 때 사용됩니다.
<article>
- <article> 태그는 독립적으로 구분되거나 재사용 가능한 콘텐츠 영역을 나타냅니다. 블로그 글, 뉴스 기사, 댓글 등이 이에 해당합니다.
<div>
- <div> 태그는 스타일링을 위해 다른 콘텐츠를 그룹화하는 데 주로 사용됩니다. 별도의 의미는 가지지 않지만, CSS와 함께 사용하여 레이아웃을 구성하는 데 매우 유용합니다.
<header>와 <footer>
- <header> 태그는 소개나 탐색 링크를 포함한 헤더 섹션을, <footer> 태그는 문서나 섹션의 푸터를 나타냅니다.
인터랙티브 요소: <button>, <input>, <label>
웹 페이지에서 사용자와의 상호작용을 위한 요소들도 중요합니다.
<button>
- <button> 태그는 클릭 가능한 버튼을 생성합니다. 폼 제출, 명령 실행 등 다양한 상호작용에 사용됩니다.
<input>
- <input> 태그는 사용자로부터 데이터를 입력받기 위한 필드를 만듭니다. 텍스트, 비밀번호, 라디오 버튼 등 다양한 형태로 사용될 수 있습니다.
<label>
- <label> 태그는 <input> 요소의 레이블을 정의합니다. 사용자가 레이블을 클릭하면 연결된 입력 필드가 활성화됩니다.
멀티미디어와 임베디드 요소: <img>, <audio>, <video>, <iframe>
웹 페이지에 멀티미디어 콘텐츠를 포함시키는 것도 중요합니다. html5로 넘어오면서 플래시의 기능을 사용하지 않고도 비디오를 삽입하는 등의 기능이 가능케 발전하였습니다.
<img>
- <img> 태그로 이미지를 삽입합니다. src 속성으로 이미지의 위치를 지정합니다.
<audio>와 <video>
- <audio>와 <video> 태그를 사용하여 오디오 파일과 비디오 파일을 웹 페이지에 삽입할 수 있습니다.
<iframe>
- <iframe> 태그를 통해 다른 HTML 페이지를 현재 페이지 내에 임베드할 수 있습니다. 예를 들어, 지도, 비디오, 다른 웹 페이지 등을 포함시키는 데 사용됩니다.
결론
이번 강의에서 HTML의 가장 기본적인 태그들과 그 사용법을 살펴보았습니다. HTML은 웹 페이지의 '골격'을 형성하는 것이며, 이후 강의에서 배울 CSS를 결합하여 골격에 살을 덧대고 이쁘게 가꿀 것이며, JavaScript와 결합하여 골격이 움직일 수 있도록, 즉 여러가지 상호작용이 가능하도록 하여 이쁘고 기능적인 웹 페이지를 만들 수 있게 됩니다. 다음 강의인 3강에서는 HTML 폼과 입력 태그에 대해 배워보겠습니다.
댓글