지난 포스팅에서 텍스트, 제목, 이미지, 링크까지 알아봤습니다
이번엔 웹페이지에 **리스트(목록)**도 만들고, **표(table)**도 만들어보고,
사용자에게 입력받는 폼도 만들어보겠습니다!
✅ 순서 있는 목록: <ol> + <li>
ol은 Ordered List (순서 있는 목록)이고,
li는 List Item (목록 항목)을 뜻합니다.
<ol>
<li>HTML 배우기</li>
<li>CSS 배우기</li>
<li>JavaScript 배우기</li>
</ol>
👉 결과는 이렇게 나와요:
- HTML 배우기
- CSS 배우기
- JavaScript 배우기
✅ 순서 없는 목록: <ul> + <li>
ul은 Unordered List (순서 없는 목록)입니다.
보통 동그란 ● 표시로 항목이 나와요.
<ul>
<li>커피</li>
<li>차</li>
<li>주스</li>
</ul>
👉 결과:
- 커피
- 차
- 주스
📊 표 만들기: <table>, <tr>, <th>, <td>
- table: 표 전체
- tr: 한 줄(Row)
- th: 제목 셀(굵고 가운데 정렬)
- td: 일반 셀
<table border="1">
<tr>
<th>이름</th>
<th>나이</th>
</tr>
<tr>
<td>홍길동</td>
<td>30</td>
</tr>
</table>
👉 브라우저에선 깔끔한 표로 보여요!
✍️ 사용자 입력 받기: <form>, <input>, <textarea>, <button>
<form>
이름: <input type="text" name="name"><br>
자기소개: <textarea name="intro"></textarea><br>
<button type="submit">제출하기</button>
</form>- input: 텍스트, 비밀번호 등 간단한 입력
- textarea: 여러 줄 텍스트 입력
- button: 버튼 만들기 (제출용)
👉 이걸 브라우저에 띄우면 사용자가 글을 직접 입력할 수 있어요!
💡 전체 예제 모음
<!DOCTYPE html>
<html>
<head>
<title>HTML 요소 연습</title>
</head>
<body>
<h1>웹페이지 구조화 실습</h1>
<h2>순서 있는 목록</h2>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
<h2>순서 없는 목록</h2>
<ul>
<li>사과</li>
<li>바나나</li>
<li>포도</li>
</ul>
<h2>표</h2>
<table border="1">
<tr>
<th>이름</th>
<th>나이</th>
</tr>
<tr>
<td>김코딩</td>
<td>25</td>
</tr>
</table>
<h2>입력 폼</h2>
<form>
이름: <input type="text"><br>
한 줄 소개: <textarea></textarea><br>
<button type="submit">전송</button>
</form>
</body>
</html>💬 정리 한 마디!
오늘 포스팅 내용으로 웹페이지를 훨씬 풍성하게 만들 수 있습니다.
리스트로 정리하고, 표로 정돈하고, 사용자와 소통하는 폼까지!
여기까지 잘 따라오셨다면 HTML 태그는 50% 배우신겁니다 😍
'HTML, CSS' 카테고리의 다른 글
| [HTML/CSS 기초] 반응형 웹이란? 미디어쿼리(Media Query)로 모바일에도 잘 보이게 만들기! (0) | 2025.05.07 |
|---|---|
| [정리정돈 시작!] HTML 웹페이지를 나누는 구조 태그 배우기 (0) | 2025.05.06 |
| HTML 텍스트, 제목, 링크, 이미지 넣기! (0) | 2025.05.04 |
| HTML 문서 구조 완전정복! <html>, <head>, <body>는 뭐야? (0) | 2025.04.29 |
| HTML이란 무엇일까? 누가 왜 쓰는 걸까? (0) | 2025.04.24 |