기본 태그
앵커 태그
다른 웹 페이지나 웹 페이지 내부의 특정 위치로 이동
href 속성
- 절대 경로
- 상대 경로
- 아이디 경로(#[ID명])
- 메일 경로 (mailto : [메일주소])
코드
<!-- 텍스트에 하이퍼링크 설정 -->
<a href="http://www.naver.com">네이버</a><br><br>
<!-- first.html 문서에 링크 설정 -->
<a href="first.html">처음 작성한 문서로 이동</a><br><br>
<!-- 다운로드 -->
<a href="html.hwp">다운로드</a><br><br>
<!-- 이미지에 하이퍼링크 설정 -->
<a href="http://www.seoul.go.kr">
<img src="img/Tulips.jpg" width="100" height="100">
</a><br><br>목록 태그
| 태그 | 설명 |
|---|---|
| ul | 순서가 없는 목록 |
| ol | 순서가 있는 목록 |
| li | 목록 요소 |
중첩 목록
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML List Basic Page</title>
</head>
<body>
<ul>
<!-- 첫 번째 목록 -->
<li>
<b>과일</b>
<ol>
<li>사과</li>
<li>바나나</li>
<li>오렌지</li>
</ol>
</li>
<!-- 두 번째 목록 -->
<li>
<b>채소</b>
<ol>
<li>상추</li>
<li>치커리</li>
<li>양배추</li>
</ol>
</li>
</ul>
</body>
</html>테이블 태그
💡 테이블이 몇행 몇열인지 파악한 뒤 html 코드를 작성하는 것이 좋다!| 태그 | 설명 |
|---|---|
| table | 표 삽입 |
| tr | 행 삽입 |
| th | 제목 셀 삽입 |
| td | 일반 셀 삽입 |
테이블 태그 속성
| 태그 | 속성 | 설명 |
|---|---|---|
| table | border | 표의 테두리 두께 |
| th, td | colspan | 셀의 너비 지정 |
| rowspan | 셀의 높이 지정 |
미디어 태그
구분
| 내용물을 가질 수 있는 태그 | 내용물을 가질 수 없는 태그 |
|---|
|
| |
type 속성
해당 속성을 입력하지 않으면 브라우저가 파일을 다운로드한 후 재생 가능한 파일인지 확인하는 작업이 필요하므로 지정하는 것이 좋다.
다중 Source
최상단의 source를 우선하여 실행한다. 다만 해당 source가 실행되지 않는 상황이라면 하단의 source를 실행한다.
Form 태그
데이터를 다른 파일로 전달할 때 사용하는 태그. method 속성을 통해 값 전달 방식을 결정할 수 있다.(GET, POST) 두 방식 모두 서버에 요청을 하는 메서드이다.
memberFrom
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원가입 폼</title>
</head>
<body>
<form method="post" action="member.jsp">
<table border="1" width="600" align="center">
<caption>회원가입 폼</caption>
<tr>
<th>ID</th>
<td><input type="text" name="id" id="id" autofocus>
<input type="button" value="ID중복검사">
</td>
</tr>
<tr>
<th>비밀번호</th>
<td><input type="password" name="passwd" id="passwd"></td>
</tr>
<tr>
<th>성명</th>
<td><input type="text" name="name" id="name"></td>
</tr>
<tr>
<th>주민번호</th>
<td><input type="text" size="6" maxlength="6" name="jumin1" id="jumin1"> -
<input type="text" size="7" maxlength="7" name="jumin2" id="jumin2">
</td>
</tr>
<tr>
<th>E-Mail</th>
<td><input type="text" size="10" name="mailid" id="mailid">@
<input type="text" size="15" name="domain" id="domain">
<select>
<option value="">직접입력</option>
<option value="naver.com">네이버</option>
<option value="daum.net">다음</option>
<option value="nate.com">네이트</option>
<option value="gmail.com">구글</option>
</select>
</td>
</tr>
<tr>
<th>전화번호</th>
<td>
<input type="text" size="4" maxlength="4" name="tel1" id="tel1"> -
<input type="text" size="4" maxlength="4" name="tel2" id="tel2"> -
<input type="text" size="4" maxlength="4" name="tel3" id="tel3">
</td>
</tr>
<tr>
<th>핸드폰</th>
<td>
<select name="phone1" id="phone1">
<option value="">번호선택</option>
<!--selected 옵션 사용시 기본값으로 선택됨. 없다면 맨 위의 옵션이 자동선택-->
<option value="010" selected>010</option>
<option value="011">011</option>
<option value="016">016</option>
<option value="018">018</option>
<option value="019">019</option>
</select> -
<input type="text" size="4" maxlength="4" name="phone2" id="phone2"> -
<input type="text" size="4" maxlength="4" name="phone3" id="phone3">
</td>
</tr>
<tr>
<th>우편번호</th>
<td>
<input type="text" size="5" maxlength="5" name="post" id="post">
<input type="button" value="우편검색">
</td>
</tr>
<tr>
<th>주소</th>
<td>
<input type="text" size="70" name="address" id="address">
</td>
</tr>
<tr>
<th>성별</th>
<td>
<input type="radio" name="gender" value="남자" checked>남자
<input type="radio" name="gender" value="여자">여자
</td>
</tr>
<tr>
<th>취미</th>
<td>
<input type="checkbox" name="hobby" value="공부">공부
<input type="checkbox" name="hobby" value="등산">등산
<input type="checkbox" name="hobby" value="게임">게임
<input type="checkbox" name="hobby" value="낚시">낚시
<input type="checkbox" name="hobby" value="쇼핑">쇼핑
</td>
</tr>
<tr>
<th>자기소개</th>
<td>
<textarea rows="7" cols="70" name="intro" id="intro" placeholder="자기소개를 100자 이내로 입력하세요."></textarea>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="회원가입">
<input type="reset" value="취소">
<!-- 이미지 버튼 : 전송 기능 있음 -->
<input type="image" src="img/clock.jpg" width="30" height="30">
</td>
</tr>
</table>
</form>
</body>
</html>boardForm
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>게시판 폼</title>
</head>
<body>
<form method="post" action="board.jsp">
<table border="1" width="500" align="center">
<caption>게시판</caption>
<tr>
<th>작성자</th>
<td><input type="text" size="20" name="writer"
id="writer"
placeholder="작성자명 입력"
value="홍길동">
</td>
</tr>
<tr>
<th>비밀번호</th>
<td><input type="password" name="passwd"
id="passwd"
placeholder="2~8자 이내 입력">
</td>
</tr>
<tr>
<th>제목</th>
<td><input type="text" size="50" name="subject"
id="subject"
placeholder="50자 이내로 입력">
</td>
</tr>
<tr>
<th>내용</th>
<td><textarea rows="5" cols="50" name="content"
id="content" placeholder="200자 이내로 입력">내용입력</textarea>
</td>
</tr>
<tr>
<th>파일첨부</th>
<td><input type="file" name="myfile" id="myfile"></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="글작성1"><!--전송기능 있는 버튼-->
<input type="button" value="글작성2"><!--전송기능 없는 버튼-->
<button>글작성3</button> <!--전송기능 있는 버튼-->
<button type="submit">글작성4</button><!--전송기능 있는 버튼-->
<button type="button">글작성5</button><!--전송기능 없는 버튼-->
<input type="reset" value="취소"> <!-- 초기화 버튼-->
<button type="reset">초기화</button> <!-- 초기화 버튼-->
</td>
</tr>
</table>
</form>
</body>
</html>