<개념 정리>
- <body>: 사용자에게 보이는 콘텐츠 영역.
- 주요 태그
- <h1>~<h6>: 제목.
- <p>: 문단.
- <a>: 링크.
- <img>: 이미지.
- <div>: 블록 나누기.
- <ul>, <ol>, <li>: 목록.
- <button>: 버튼.
- <table>: 표 형식 데이터 표시.
- <form>: 사용자 입력 수집.
- <input>: 입력 필드 생성.
- 실습 하기 index05_01.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>body 태그 예제</title>
</head>
<body>
<!-- 1. h1~h6: 제목 태그, 숫자가 클 수록 작아짐 -->
<h1>큰 제목</h1>
<h3>중간 제목</h3>
<h6>작은 제목</h6>
<!-- 2. p: 문단을 나타냄 -->
<p>이것은 하나의 문단 입니다. 텍스트를 묶어줍니다.</p>
<!-- 3. a: 링크를 생성, href 속성으로 목적지를 지정할 수 있음 -->
<a href="https://www.naver.com" target="_self">여기를 클릭하세요!</a>
<!--4. img: 이미지를 삽입, src 속성과 alt(대체속성) 필수 -->
<img src="https://picsum.photos/id/237/200/300" alt="샘플이미지">
<!-- 5. div: 콘텐츠를 블록으로 나누는 태그 -->
<div>
<p>이 문단은 div 안에 있습니다.</p>
<p>레이아웃을 나눌 때 유용합니다.</p>
</div>
<!-- 6. ul-> li: 순서가 없는 목록을 표시할 때 -->
<ul>
<li>항목 1</li>
<li>항목 2</li>
<li>항목 2</li>
</ul>
<!-- 7. ol-> li: 순서가 있는 목록을 표시할 때 -->
<ol>
<li>첫번째 단계</li>
<li>두번째 단계</li>
<li>세번째 단계</li>
</ol>
<!-- 8. button: 클릭 가능한 버튼 -->
<button onclick="alert('버튼이 클릭 됨')">나를 눌러봐</button>
</body>
</html>
- 실습하기 index05_02.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>body 태그 예제</title>
</head>
<body>
<h2>학생 점수 관리 시스템</h2>
<p>아래는 학생들의 점수를 정리한 표 입니다</p>
<!-- table: 표를 생성(thead, tbody, tr, th, td 를 사용할 수 있다.) -->
<table border="1">
<thead>
<tr>
<th>이름</th>
<th>국어</th>
<th>수학</th>
</tr>
</thead>
<tbody>
<tr>
<td>김민수</td>
<td>92</td>
<td>90</td>
</tr>
<tr>
<td>이영희</td>
<td>91</td>
<td>97</td>
</tr>
</tbody>
</table>
<!-- 2. form 태그 input 태그: -->
<h3>학생 정보 입력</h3>
<form action="/submit" method="post" >
<!-- input 태그: 텍스트 입력 필드 -->
<label for="name">이름:</label>
<input
type="text"
id="name"
name="user_name222"
placeholder="이름을 입력하시오"
/>
<!-- input 태그: 숫자 입력 필드 -->
<label for="korean">국어 점수:</label>
<input type="number" id="korean" name="korean222" min="0" max="100">
<button type="submit">제출하기</button>
</form>
</body>
</html>
- 실습하기 index05_03.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>table colspan & rowspan</title>
<!-- 내부 스타일 시트 -->
<style>
* {
text-align: center;
}
table {
width: auto;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<h2>시간표 예제</h2>
<table border="2">
<thead>
<th>시간</th>
<th>월요일</th>
<th>화요일</th>
<th>수요일</th>
</thead>
<tbody>
<tr>
<td>09:00 - 10:00</td>
<!-- colspan: 열 2개를 합침 -->
<td colspan="2">HTML/CSS 수업</td>
<td>자습</td>
</tr>
<tr>
<td>10:00 - 11:00</td>
<td>JS 수업</td>
<td rowspan="2">프로젝트 작업</td>
<td>자습</td>
</tr>
<tr>
<td>11:00 - 12:00</td>
<td>JS 실습</td>
<td>자습</td>
</tr>
</tbody>
</table>
</body>
</html>
- 연습해보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>colspan & rowspan 연습</title>
<style>
* {
text-align: center;
}
table {
width: auto;
margin-top: 50px;
margin-left: auto;
margin-right: auto;
margin-bottom: 50px;
}
thead {
background-color:bisque;
}
</style>
</head>
<body>
<h2>시간표</h2>
<table border="3">
<thead>
<th>시간</th>
<th>월요일</th>
<th>화요일</th>
<th>수요일</th>
<th>목요일</th>
</thead>
<tbody>
<tr>
<td>8:00 - 9:00</td>
<td>HTML 수업</td>
<td rowspan="3">프로젝트 작업</td>
<td colspan="2">JAVA 수업</td>
</tr>
<tr>
<td>9:00 - 10:00</td>
<td>JS 수업</td>
<td>자습</td>
<td>쉬는시간</td>
</tr>
<tr>
<td>10:00 - 11:00</td>
<td>CSS 수업</td>
<td>자습</td>
<td>JS 실습</td>
</tr>
</tbody>
</table>
</body>
</html>'HTML CSS' 카테고리의 다른 글
| CSS(Cascading Style Sheets) (0) | 2025.05.28 |
|---|---|
| 시멘틱 태그 (0) | 2025.05.28 |
| HTML 속성이란? (0) | 2025.05.27 |
| HTML 기본 템플릿 이해 (0) | 2025.05.27 |
| HTML, CSS, JavaScript에 대해 알아보자. (0) | 2025.05.27 |