목록 (리스트)
ul / ol 비교
| 태그 | 종류 | 기본 마커 |
|---|---|---|
<ul> |
순서 없는 목록 (Unordered List) | ● (채워진 원) |
<ol> |
순서 있는 목록 (Ordered List) | 1, 2, 3 … |
ol 속성 — type과 start
| 속성 | 값 | 결과 |
|---|---|---|
type |
"1" |
1, 2, 3 … (기본값) |
"a" |
a, b, c … | |
"A" |
A, B, C … | |
"i" |
i, ii, iii … (소문자 로마자) | |
"I" |
I, II, III … (대문자 로마자) | |
start |
start="3" |
3번째 항목부터 시작 |
예제: ul / ol 기본 사용
ul — 가고 싶은 곳
<ul> <li>제주도</li> <li>일본</li> <li>미국</li> </ul>
ol — type="i", start="3"
<ol type="i" start="3"> <li>돈까스</li> <li>삼계탕</li> <li>갈비탕</li> </ol> <!-- 출력: iii. iv. v. -->
중첩 목록 (Nested List)
<li> 안에 새 <ul>을 중첩하면 2단계 목록을 만들 수 있습니다.
중첩 목록 예제
<ul>
<li>메뉴1</li>
<ul>
<li>메뉴1-1</li>
<li>메뉴1-2</li>
<li>메뉴1-3</li>
</ul>
<li>메뉴2</li>
<li>메뉴3</li>
</ul>
ul vs ol 선택 기준: 순서가 중요하지 않은 나열(메뉴, 목록)은 ul,
순서가 의미를 가진 단계(레시피, 절차)는 ol을 사용합니다.
표 (테이블)
테이블 기본 구조
| 태그 | 역할 |
|---|---|
<table> |
테이블 전체를 감싸는 컨테이너 |
<tr> |
Table Row — 행(가로줄) 하나 |
<th> |
Table Header — 헤더 셀. 굵게·가운데 정렬이 기본 |
<td> |
Table Data — 일반 데이터 셀 |
예제: 학생 성적표
기본 테이블 (border="1")
<table border="1">
<tr>
<th>학생명</th> <th>중간</th> <th>기말</th>
</tr>
<tr>
<td>홍길동</td> <td>98</td> <td>99</td>
</tr>
<tr>
<td>김철수</td> <td>80</td> <td>89</td>
</tr>
</table>
셀 병합 — colspan / rowspan
| 속성 | 설명 | 사용 예 |
|---|---|---|
colspan="n" |
열(가로) 방향으로 n칸 병합 | <td colspan="4">점심시간</td> |
rowspan="n" |
행(세로) 방향으로 n칸 병합 | <td rowspan="3">휴강</td> |
예제: 시간표 (colspan + rowspan)
시간표 — 셀 병합 예제
<table border="1">
<tr>
<th>월</th><th>화</th><th>수</th><th>목</th><th>금</th>
</tr>
<tr>
<td>국어</td><td>수학</td><td>영어</td><td>과학</td>
<td rowspan="3">휴강</td>
</tr>
<tr>
<td colspan="4">점심시간</td>
</tr>
<tr>
<td>국어</td><td>수학</td><td>영어</td><td>과학</td>
</tr>
</table>
셀 병합 주의:
colspan으로 가로 n칸을 합치면
해당 행에서 그만큼 <td>를 생략해야 합니다.
rowspan도 마찬가지로 아래 행에서 셀 수를 맞춰야 합니다.
iframe
<iframe>은 현재 페이지 안에 다른 HTML 문서나 웹 페이지를 삽입하는 태그입니다.
주요 속성
| 속성 | 설명 |
|---|---|
src |
iframe에 표시할 페이지 경로 |
name |
iframe에 이름 부여 — 링크의 target으로 연결 가능 |
width / height |
iframe의 가로·세로 크기 (px) |
예제 1: 다른 HTML 파일 삽입
iframe — HTML 파일 삽입
<iframe src="./page.html"
width="200" height="300">
iframe을 지원하지 않습니다
</iframe>
예제 2: name + target으로 iframe 제어
링크의 target 속성에 iframe의 name을 지정하면, 링크 클릭 시 해당 iframe 안에서 페이지가 열립니다.
name·target 연결 예제
<a href="page-a.html" target="view-frame">A 페이지 보기</a>
<a href="page-b.html" target="view-frame">B 페이지 보기</a>
<iframe name="view-frame"
width="450" height="300">
</iframe>
활용 포인트: 링크 클릭 시 새 창 없이 옆에 배치한 iframe 안에서 페이지가 바뀌도록 구성할 수 있습니다.
여러 iframe에 각각 다른 name을 주면 독립적으로 제어할 수 있습니다.
폼 (form)
사용자 입력을 받아 서버로 전송하는 영역입니다. <form> 안에 다양한 입력 요소를 배치합니다.
form 속성
| 속성 | 설명 |
|---|---|
action |
데이터를 전송할 서버 URL |
method="GET" |
URL 쿼리스트링에 데이터 포함 (기본값) |
method="POST" |
요청 본문에 데이터 포함 — 비밀번호·파일 전송에 사용 |
input 태그 type 종류
| type 값 | 설명 |
|---|---|
text |
한 줄 텍스트 입력 |
email |
이메일 형식 검증 포함 텍스트 입력 |
radio |
라디오 버튼 — 같은 name 그룹에서 하나만 선택 |
checkbox |
체크박스 — 여러 항목 중복 선택 가능 |
submit |
폼 전송 버튼 — value가 버튼 텍스트 |
reset |
폼 초기화 버튼 — 모든 입력값 리셋 |
예제: 회원가입 폼
회원가입 기본 구조
<form action="#" method="POST"> 이름: <input type="text" name="name"><br> 주소: <input type="text" name="address"><br> email: <input type="email" name="email" required><br> <input type="radio" name="gender" value="Male"> 남 <input type="radio" name="gender" value="Female"> 여<br><br> <input type="submit" value="전송"> <input type="reset" value="취소"> </form>
select — 드롭다운 목록
select / option 구조
직업: <select name="role"> <option value="student">학생</option> <option value="employed">직장인</option> <option value="other">기타</option> </select>
textarea — 여러 줄 텍스트
textarea 기본 구조
하고 싶은 말:<br> <textarea name="comment" rows="10" cols="30"> </textarea>
checkbox 그룹 예시
언어 선택:<br> <input type="checkbox" name="lang"> C<br> <input type="checkbox" name="lang"> Java<br> <input type="checkbox" name="lang"> Python<br>
radio vs checkbox:
radio는 같은 name 그룹에서 하나만 선택됩니다 (성별, 찬반 등).
checkbox는 여러 항목을 중복 선택할 수 있습니다 (관심 언어, 알레르기 항목 등).