2024.03.27
링크
<body>
<h3>외부 페이지 링크</h3>
<a href="https://www.naver.com" title="네이버 보기">현재 화면에서 이동</a>
<br>
<a href="https://www.daum.net" target="_blank">새로운 탭에 페이지 표시</a>
<h3>같은 사이트 같은 경로의 페이지 링크</h3>
<a href="s01_basic.html">s01_basic.html</a>
<h3>같은 사이트 다른 경로의 페이지 링크</h3>
<a href="../ch02_HTMLForm/s01_form.html">../ch02_HTMLForm/s01_form.html</a>
<h3>페이지 내부에 특정 태그로 이동하기</h3>
<a href="#alpha">Alpha 부분</a>
<a href="#beta">Beta 부분</a>
<a href="#gamma">Gamma 부분</a>
</body>
이미지
<body>
<h3>같은 경로의 이미지 표시</h3>
<img src="winter.jpg" width="200" height="150">
<h3>다른 경로의 이미지 표시</h3>
<img src="../files/landscape.jpg" width="200" height="150">
<h3>img 태그 속성</h3>
<img src="../files/landscape.jpg" width="200" height="150" alt="바다이미지" align="top">바다<br><br>
<img src="../files/landscape.jpg" width="200" height="150" alt="바다이미지" align="middle">바다<br><br>
<img src="../files/landscape.jpg" width="200" height="150" alt="바다이미지" align="bottom">바다<br><br>
<h3>이미지에 링크 걸기</h3>
<a href = "https://www.naver.com">
<img src="../files/landscape.jpg " width="100" height="100">
</a>
<h3>figure, figcaption 태그 : 이미지에 설명 글 붙이기</h3>
<figure>
<img src="winter.jpg" alt="겨울" width="100" height="100">
<figcaption>겨울 이미지(Winter Image)</figcaption>
</figure>
</body>
리스트
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>목록</title>
</head>
<body>
<h3>순서 없는 목록</h3>
<ul>
<li>유치원</li>
<li>초등학교</li>
<li>중학교</li>
<li>고등학교</li>
<li>대학교</li>
</ul>
<ul type="circle">
<li>자바</li>
<li>오라클</li>
<li>HTML</li>
</ul>
<ul type="square">
<li>자바</li>
<li>오라클</li>
<li>HTML</li>
</ul>
<h3>순서 있는 목록</h3>
<ol>
<li>서울</li>
<li>부산</li>
<li>광주</li>
</ol>
<h3>역순 목록</h3>
<!-- reversed: 항목을 역순으로 표시 -->
<ol type="1" reversed="reversed">
<li>서울</li>
<li>부산</li>
<li>광주</li>
</ol>
<!-- type 속성을 이용해서 순서 표시를 숫자, 문자 지정 가능 -->
<ol type="a">
<li>서울</li>
<li>부산</li>
<li>광주</li>
</ol>
<ol type="I">
<li>서울</li>
<li>부산</li>
<li>광주</li>
<li>인천</li>
<li>대구</li>
<li>목포</li>
</ol>
<ol type="i">
<li>서울</li>
<li>부산</li>
<li>광주</li>
<li>인천</li>
<li>대구</li>
<li>목포</li>
</ol>
<!-- 순서 있는 목록 : 100번부터 시작해서 중간에 200번으로 점프 -->
<ol type="1" start="100">
<li>서울</li>
<li>부산</li>
<li>광주</li>
<li value="200">인천</li>
<li>대구</li>
<li>목포</li>
</ol>
<h3>ul 태그 하위 요소로 ol 태그 사용</h3>
<ul type="square">
<li>로맨틱 코미디
<ol>
<li>해리와 샐리가 만났을 때</li>
<li>당신이 잠든 사이에</li>
</ol>
</li>
<li>액션
<ol>
<li>범죄도시4</li>
<li>미션 임파서블</li>
<li>나쁜녀석들</li>
</ol>
</li>
<li>공포
<ol>
<li>13일의 금요일</li>
<li>파묘</li>
<li>스크림</li>
</ol>
</li>
</ul>
<h3>dl,dt,dd 태그 : 설명 목록 만들기</h3>
<!-- <dl> 태그는 제목과 설명이 한 쌍인 설명 목록을 만듬 -->
<dl>
<dt>올레1코스</dt><!-- 제목 -->
<dd>코스 : 시흥 초등학교 - 광치기 해변</dd>
<dd>거리 : 14.6km(4~5시간))</dd>
<dt>올레2코스</dt>
<dd>코스 : 광치기 해변 - 온평 포구</dd>
<dd>거리 : 14.5km(4~5시간))</dd>
</dl>
</body>
</html>
테이블
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>테이블</title>
</head>
<body>
<h3>기본 테이블</h3>
<table border="1">
<!-- 중앙 정렬 -->
<caption>제목</caption>
<tr>
<td>셀 내용</td>
<td>셀 내용</td>
</tr>
</table>
<h3>figure 태그를 이용한 테이블에 제목 넣기</h3>
<figure>
<!-- 중앙 정렬 -->
<figcaption>제목</figcaption>
<table border="1">
<tr>
<td>셀 내용</td>
<td>셀 내용</td>
</tr>
</table>
</figure>
<figure>
<table border="1">
<tr>
<td>셀 내용</td>
<td>셀 내용</td>
</tr>
</table>
<!-- 중앙 정렬 -->
<figcaption>제목</figcaption>
</figure>
<h3>표구조 정의하기</h3>
<!--
<thead> : 표의 머리말 부분을 표시하는 태그
<tbody> : 표의 내용을 표시하는 태그
<tfoot> : 표의 꼬리말 부분을 표시하는 태그
-->
<table border="1">
<caption>가격표</caption>
<thead>
<tr>
<!-- <th> : 중앙 정렬, 글자를 굵게 표시 -->
<th>메뉴명</th>
<th>가격</th>
</tr>
</thead>
<tbody>
<tr>
<td>해물 스파게티</td>
<td>8,000원</td>
</tr>
<tr>
<td>까르보나라</td>
<td>9,000원</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>총합</td>
<td>17,000원</td>
</tr>
</tfoot>
</table>
<h3>th,td태그의 사용 및 속성 지정</h3>
<table border="1">
<tr>
<th width="100" height="100"
background="../files/landscape.jpg">서울</th>
<th width="100">
<img src="winter.jpg" width="100" height="100">
</th>
<th width="100">광주</th>
</tr>
<tr>
<!-- align : 수평으로 정렬 -->
<td height="100" bgcolor="gray" align="left">왼쪽</td>
<td align="center">가운데</td>
<td align="right">오른쪽</td>
</tr>
<tr>
<!-- valign : 수직으로 정렬 -->
<td height="100" valign="top">상단</td>
<td valign="middle">중앙</td>
<td valign="bottom">하단</td>
</tr>
</table>
<h3>셀 합치기</h3>
<table border="1">
<tr>
<td width="100">1</td>
<td width="200" colspan="2">2,3</td>
</tr>
<tr>
<td rowspan="2">4,7</td>
<td width="100">5</td>
<td width="100">6</td>
</tr>
<tr>
<td>8</td>
<td>9</td>
</tr>
</table>
<h3>테이블 안에 테이블 넣기</h3>
<table border="1">
<tr>
<td>서울 여행</td>
</tr>
<tr>
<td>
<table border="1">
<tr>
<td width="100">기차 여행</td>
<td width="100">버스 여행</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Form
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>form</title>
</head>
<body>
<h3>기본 폼</h3>
<!-- 서버에 데이터를 전송할 때는 form 태그 안에 하위 태그 input,select,textarea
등을 명시하고 태그에 데이터를 입력해서 전송함. form태그 밖에 명시한 태그에 입력한 데이터는
전송되지 않음 -->
<form action="a.jsp">
이름<input type="text" name="name" size="10" maxlength="15"><br>
비밀번호<input type="password" name="password" size="10"><br>
파일 업로드<input type="file" name="image" size="10"><br>
좋아하는 계절<br>
<!-- check box는 다중 선택 가능 -->
<input type="checkbox" name="season"value="봄">봄
<input type="checkbox" name="season"value="여름">여름
<input type="checkbox" name="season"value="가을">가을
<input type="checkbox" name="season"value="겨울">겨울
<br>
국적<br>
<!-- radio는 단일 선택 가능 -->
<input type="radio" name="country" value="대한민국">대한민국
<input type="radio" name="country" value="영국">영국
<input type="radio" name="country" value="프랑스">프랑스
<br>
지역<br>
<!-- 단일 선택 -->
<select name="region">
<option value="서울">서울</option>
<option value="부산">부산</option>
<option value="광주">광주</option>
</select>
<br>
희망 여행지<br>
<!-- 다중 선택 -->
<select name="trip" multiple="multiple">
<option value="프랑스">프랑스</option>
<option value="스위스">스위스</option>
<option value="이탈리아">이탈리아</option>
<optgroup label="스페인">스페인</optgroup>
</select>
<br>
직업<br>
<select name="job">
<optgroup label="전문직">
<option value="의사">의사</option>
<option value="프로그래머">프로그래머</option>
<option value="애견훈련사">애견훈련사</option>
</optgroup>
<optgroup label="스포츠선수">
<option value="농구선수">농구선수</option>
<option value="축구선수">축구선수</option>
<option value="야구선수">야구선수</option>
</optgroup>
</select>
<br>
내용<br>
<!-- textarea : 여러줄 입력 태그 -->
<textarea rows="5" cols="50" name="content"></textarea>
<br>
<input type="submit" value="전송">
<input type="reset" value="초기화">
</form>
<!-- 두번째 폼 -->
<form action="do.jsp" method="post">
<!--
filedset : 폼을 그룹핑 하는 역할
legend : 제목 지정
-->
<fieldset>
<legend>프로젝트 정보</legend>
<ul>
<li>
<!-- label : 입력 창 옆에 '아이디'나 '비밀번호'처럼
붙여 놓은 텍스트를 말함. label 태그를 사용하면
폼 요소와 레이블 텍스트가 서로 연결되어 있다는 것을
브라우저가 알 수 있음
-->
<label for="name">이름</label>
<!--
required : 입력 필수 지정
autofocus : 페이지 로드시 자동 포커스 지정
-->
<input type="text" name="name" id="name"
required autofocus>
</li>
<li>
<label for="priority">중요도</label>
<!-- range : 슬라이드 막대로 표시하는 숫자 필드 -->
<input type ="range" name="priority" id="priority"
min="0" max="10" value="0"
oninput="result.value=parseInt(priority.value)">
<!-- output : 계산의 결과를 삽입 -->
<output name="result"></output>
</li>
<li>
<label for="hours">예상시간</label>
<!-- number : 숫자 필드 -->
<input type="number" name="hours" id="hours">
</li>
<li>
<label for="hours">예상 시간</label>
<!-- number : 숫자 필드 -->
<input type="number" name="hours" id="hours"
min="0" max="24">
</li>
<li>
<label for="start_date">시작 날짜</label>
<!-- date : 날짜 필드 -->
<input type="date" name="start_date" id="start_date">
</li>
<li>
<label for="start_time">시작 시간</label>
<!-- time : 시간 필드 -->
<input type="time" name="start_time" id="start_time">
</li>
<li>
<label for="email">이메일</label>
<!-- email : 이메일 필드 -->
<input type="email" name="email" id="email">
</li>
<li>
<label for="url">URL</label>
<!-- url : url 필드 -->
<input type="url" name="url" id="url">
</li>
<li>
<label for="search">검색</label>
<!-- search : search 필드 -->
<input type="search" name="search" id="search">
</li>
<li>
<input type="submit" value="전송">
</li>
</ul>
</fieldset>
</form>
</body>
</html>
