HTML 문서의 구조
- HTML 문서는 DOCTYPE 선언으로 시작합니다. 이는 웹 브라우저에게 이 문서가 HTML5 문서임을 알려주는 역할을 합니다.
<!DOCTYPE html>
<html>
<head>
<title>제목</title>
</head>
<body>
<h1>h1</h1>
</body>
</html>
기본적인 HTML 태그들
- <html>: HTML 문서의 시작과 끝을 나타냅니다.
- <head>: 웹 페이지의 메타 정보를 담는 곳입니다. <title>, <style>, <meta>, <link>, <script> 등의 태그를 포함할 수 있습니다.
- <title>: 웹 페이지의 제목을 설정합니다. 브라우저의 탭에 표시됩니다.
- <body>: 웹 페이지의 본문을 나타내는 부분입니다. 웹 브라우저에 실제로 표시되는 내용을 담습니다.
- <h1> ~ <h6>: 제목을 나타내는 태그입니다. <h1>이 가장 큰 제목이며, <h6>까지 숫자가 커질수록 글자 크기가 작아집니다.
- <p>: 문단을 나타내는 태그입니다. 텍스트를 담는 데 사용됩니다.
- <a>: 하이퍼링크를 만드는 태그입니다. href 속성에 링크할 URL을 지정합니다.
- <img>: 이미지를 삽입하는 태그입니다. src 속성에 이미지 파일의 경로를 지정합니다.
- <div>: 구역이나 섹션을 만드는 태그입니다. CSS와 함께 사용하여 웹 페이지의 레이아웃을 디자인합니다.
- <span>: 인라인 요소를 그룹화하는 태그입니다. 텍스트 또는 다른 인라인 요소에 스타일을 적용하기 위해 사용합니다.
- <table>: 테이블을 생성하는 태그입니다. <tr>, <td>, <th> 등의 태그와 함께 사용합니다.
- <tr>: 테이블의 행을 정의합니다.
- <td>: 테이블의 데이터 셀을 정의합니다.
- <th>: 테이블의 헤더 셀을 정의합니다. - <ul>과 <ol>: 목록을 만드는 태그입니다. <li> 태그와 함께 사용합니다. <ul>은 순서가 없는 목록을, <ol>은 순서가 있는 목록을 만듭니다.
- <li>: 목록의 항목을 정의하는 태그입니다.
- <form>: 사용자 입력을 위한 HTML 양식을 만드는 태그입니다. <input>, <textarea>, <button> 등의 태그와 함께 사용합니다.
- <input>: 사용자 입력을 받는 필드를 만드는 태그입니다. type 속성을 이용해 다양한 종류의 입력 필드를 만들 수 있습니다.
더 많은 태그들은 아래 링크에서 확인할 수 있습니다. 바로가기
HTML elements reference - HTML: HyperText Markup Language | MDN
This page lists all the HTML elements, which are created using tags.
developer.mozilla.org
실습
- 아래의 사진을 참고하여, 사과와 바나나를 소개하는 패이지를 제작하여 봅시다.
- 두 개의 페이지는 서로 a태그를 이용하여 서로 연결되어 있습니다.
- 제출 버튼을 눌렀을 때의 동작은 구현하지 않아도 좋습니다.
바나나페이지 HTML 코드(banana_page.html)
<!-- HTML5 문서임을 선언 -->
<!DOCTYPE html>
<html>
<head>
<!-- 문서의 문자 인코딩을 UTF-8로 설정 -->
<meta charset="UTF-8">
<style type="text/css">
/* .my-box 클래스를 가진 요소에 바깥쪽 여백(margin) 20px 적용 */
.my-box { margin:20px; }
</style>
</head>
<body>
<!-- 전체 콘텐츠를 감싸는 div 박스, 클래스 이름은 my-box -->
<div class="my-box">
<!-- 메인 제목과 수평선 -->
<h1>바나나!</h1>
<hr/>
<!-- 바나나에 대한 소개 섹션 -->
<h2>바나나에 대하여</h2>
<p>
바나나는 전 세계에서 가장 인기 있는 과일 중 하나입니다.
바나나는 건강에 보호적인 영향을 미칠 수 있는 필수 영양요소를 함유하고 있습니다.
</p>
<!-- 이미지 삽입 -->
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQCPa_h8cs0hRiNhReczSVsxqlK-3hGUBbQ2w&s" alt="바나나 이미지">
<!-- 목록 태그 사용 -->
<h2>바나나의 건강 이점</h2>
<ul>
<li>높은 섬이질 함량</li> <!-- 섬유질이 많음 -->
<li>심장 건강</li> <!-- 심장 건강에 도움 -->
<li>소화 촉진</li> <!-- 소화에 도움 -->
</ul>
<h2>맛있는 바나나 레시피</h2>
<label>
이메일: <br>
<input type="text" name="member_email" id="member_email"> <br>
</label>
<label>
당신의 좋아하는 바나나 레시피를 공유하세요. <br>
<textarea rows="5" cols="60" name="contents"></textarea> <br>
</label>
<!-- 제출 버튼 (아직 동작은 없음) -->
<button>제출</button>
<!-- 사과 페이지로 이동하는 링크 -->
<p><a href="apple_page.html">사과</a>에 대하여</p>
</div>
</body>
</html>
사과페이지 HTML 코드(apple_page.html)
<!-- HTML5 문서임을 선언 -->
<!DOCTYPE html>
<html>
<head>
<!-- 문서의 문자 인코딩을 UTF-8로 설정 -->
<meta charset="UTF-8">
<style type="text/css">
/* .my-box 클래스를 가진 요소에 바깥쪽 여백(margin) 20px 적용 */
.my-box { margin:20px; }
</style>
</head>
<body>
<!-- 전체 콘텐츠를 감싸는 div 박스, 클래스 이름은 my-box -->
<div class="my-box">
<!-- 메인 제목과 수평선 -->
<h1>사과!</h1>
<hr/>
<!-- 사과에 대한 소개 섹션 -->
<h2>사과에 대하여</h2>
<p>
사과는 전 세계에서 널리 사랑받는 과일 중 하나입니다.
사과는 다양한 영양소를 함유하고 있어 건강에 좋습니다.
</p>
<!-- 이미지 삽입 -->
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTTqBOfkJOBqR4ISvqOQBR8zG1NBlJfSKIWuw&s" alt="사과 이미지">
<!-- 목록 태그 사용 -->
<h2>사과의 건강 이점</h2>
<ul>
<li>높은 식이섬유 함량</li>
<li>다양한 비타민과 미네랄</li>
<li>항산화 물질 풍부</li>
</ul>
<h2>맛있는 사과 레시피</h2>
<label>
이메일: <br>
<input type="text" name="member_email" id="member_email"> <br>
</label>
<label>
당신의 좋아하는 사과 레시피를 공유하세요. <br>
<textarea rows="5" cols="60" name="contents"></textarea> <br>
</label>
<!-- 제출 버튼 (아직 동작은 없음) -->
<button>제출</button>
<!-- 바나나 페이지로 이동하는 링크 -->
<p><a href="banana_page.html">바나나</a>에 대하여</p>
</div>
</body>
</html>
'ELITE HACKER Bootcamp 4th > 2주차' 카테고리의 다른 글
| [2주차 TIL] KnockOn Bootcamp PHP (1) | 2025.04.13 |
|---|---|
| [2주차 TIL] KnockOn Bootcamp Mysql (1) | 2025.04.12 |
| [2주차 TIL] KnockOn Bootcamp Apache (0) | 2025.04.12 |
| [2주차 TIL] KnockOn Bootcamp Javascript Part 2 (0) | 2025.04.12 |
| [2주차 TIL] KnockOn Bootcamp Javascript Part 1 (0) | 2025.04.12 |