(HTML/CSS/JavaScript)HTML 주요 body 내의 태그 - 5
개념적 정리
<body> : 사용자에게 보이는 콘텐츠 영역.
주요 태그
< h1>~<h6> : 제목.
< p > : 문단.
< a > : 링크
<img> : 블록 나누기.
<ul>,<ol>,<li> 목록
<button>:버튼
<table>: 표 형식 데이터 표시.
<form> : 사용자 입력 수집.
<input> : 입력 필드 생성
| 실습예제
<!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>
-----------------------------------------------------------------------------------------------------
학생 점수 관리 시스템
아래는 학생들의 점수를 정리한 표입니다.
| 실습 예제2
<!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>
|실습 예제3
<!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>
<!-- 2. rowspan: 행 2개를 합침 -->
<td rowspan="2">프로젝트 작업</td>
<td>자습</td>
</tr>
<tr>
<td>11:00 - 12:00</td>
<td>JS 실습</td>
<!--<td>프로젝트 작업 </td> rowspan 때문에 화요일 셀 생략 -->
<td>자습</td>
</tr>
</tbody>
</table>
</body>
</html>
도전과제 - table 태그를 사용해서 컨텐츠를 만들어 보세요 rowspan, colspan 사용
-------------------------------------------------------------
| HTML 모든 태그 리스트(참고)
https://www.w3schools.com/tags/default.asp
W3Schools.com
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com