anchor
링크
- 인라인 요소
형식
<a href="이동경로"></a>
주요 속성
href: 이동할 경로를 작성 (특정 파일, 특정 위치,URL경로 등)title: 풍선 도움말 (마우스를 가져다대면 나타나는 메시지)target: 어떤 창으로 이동하는지 작성
∘_self: 현재 창으로 이동 (디폴트,target속성 생략 가능)
∘_blank: 새 창으로 이동
‣ 이동이 없는 링크 만들기
#: 나중에 채울 곳이라는 표시javascript: void(0): 자바스크립트에 있는 함수를 호출 할 때 사용
예제
<p> <a href="#">비어 있는 링크</a> <br> <a href="javascript:void(0)">비어 있는 링크</a> </p>
‣ 특정 파일로 이동하는 링크 만들기
예제
<p> <ul> <li><a href="./파일위치">파일1</a></li> <li><a href="../../파일경로/파일위치">파일2</a></li> </ul> </p>
‣ URL 경로로 이동하는 링크 만들기
예제
<p> <ol> <li><a href="https://www.google.com/">구글</a></li> <li><a href="https://www.naver.com/">네이버</a></li> </ol> </p>
‣ 특정 위치(id)로 이동하는 링크 만들기
id속성 : HTML 구성요소를 식별하기 위한 전역 속성으로 같은 문서 내에서는 중복이 없어야 한다.
(전역속성 : 모든 태그에 붙이는게 가능하다.)
예제
<p> <ul> <li><a href="#title">제목으로 이동</a></li> <li><a href="#content">내용으로 이동</a></li> <li><a href="#image">이미지로 이동</a></li> </ul> <h1 id="title">제목</h1> <p id="content">내용</p> <p id="image"> <img src="../../이미지파일" width="192px"> </p> </p>
‣ 이미지 맵
- 이미지의 일부 영역에 링크를 생성할 수 있다.
<img>태그와<map>태그를 이용한다.
사용 방법
- 형식
<img src="이미지경로" usemap="#맵이름"> <map name="맵이름"> <area href="이동할경로" shape="링크모양" coords="링크좌표"> </map>
shape속성과coords속성
∘ 사각형 링크 :shape="rect" coords="시작x, 시작y, 종료x, 종료y"
∘ 원형 링크 :shape="circle" coords="중심x, 중심y, 반지름"
이미지 맵 활용하기
<p> <img src="../../이미지파일경로" usemap="#domino_map"> <map name="domino_map"> <area href="https://www.이동할경로.co.kr/" shape="rect" coords="300, 7309, 904, 7432"> <area href="https://www.이동할경로.com/" shape="circle" coords="852, 5714, 117"> </map> </p>
테이블
- 블록 요소
- 표를 만든다.
형식
<table> </table>
테이블 구역
- 표를 구성하는 3개 구역이 있다.
- 모든 구역은 생략할 수 있다. 생략하더라도
<tbody>태그는 자동으로 사용된다.
형식
<table> <thead></thead> <tbody></tbody> <tfoot></tfoot> </table>
‣ 행
- 테이블의 행을 만든다.
- 테이블의 구역마다 행을 만든다.
형식
<table> <thead> <tr></tr> </thead> <tbody> <tr></tr> <tr></tr> <tr></tr> </tbody> <tfoot> <tr></tr> </tfoot> </table>
‣ 열
- 테이블의 열을 만든다.
- 행을 구성하는 열을 만든다.
형식
<table> <thead> <tr> <td></td> <td></td> </tr> </thead> <tbody> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> </tbody> <tfoot> <tr> <td></td> <td></td> </tr> </tfoot> </table>
‣ border
border는 테이블의 테두리를 만드는 속성이다.
형식
border="숫자로 테두리 굵기 표시"
<table border="1">
‣ 셀 병합
<td>태그에 병합 속성을 추가한다.
- 병합 속성
∘colspan: 열 병합, 좌우 셀을 병합
∘rowspan: 행 병합, 상하 셀을 병합
형식
- 병합은 병합 시작 셀에서 작성한다.
colspan="병합할개수"
rowspan="병합할개수"
‣ 이미지가 포함된 테이블 활용
예제
<table> <tbody> <tr> <td><img src="../../이미지파일경로/이미지파일.jpg" alt="베리" width="192px" height="128px"></td> <td><img src="../../이미지파일경로/이미지파일.jpg" alt="아보카도" width="192px" height="128px"></td> <td><img src="../../이미지파일경로/이미지파일.png" alt="바나나" width="192px" height="128px"></td> </tr> <tr> <td>1,000원</td> <td>2,000원</td> <td>3,000원</td> </tr> <tr> <td>베리</td> <td>아보카도</td> <td>바나나</td> </tr> </tbody> </table>
입력 상자
- 인라인 요소
형식
<input type="종류">
종류
text: 일반 텍스트 (디폴트, type 속성 생략 가능)password: 비밀번호number: 숫자email: 이메일file: 파일 첨부
주요 속성
| Name | Value | Describe |
|---|---|---|
| 1) type | text | 입력 상자의 종류를 작성(size 기본 크기 20) |
| 2) size | 정수 | 입력 상자의 크기를 작성 |
| 3) value | 입력 상자에 입력된 데이터(사용자가 입력한 데이터가 저장되는 속성) | |
| 4) maxlength | 정수 | 입력 상자에 입력할 수 있는 최대 글자 수 |
| 5) readonly | readonly | 읽기 전용 |
| 6) required | required | 필수 입력 |
| 7) disabled | disabled | 사용 금지 |
| 8) placeholder | 입력 안내 메시지 | |
| 9) multiple | multiple | 다중 첨부 |
| 10) name | 입력 상자의 이름을 작성(Back단에서 인식) |
활용예제
<p> <input type="password" placeholder="비밀번호"><br> <input type="number" min="0" max="100"><br> <input type="file" multiple="multiple"> </p>
다중 행 입력 상자
- 인라인 요소
형식
<textarea></textarea>
주요 속성
| Name | Value | Describe |
|---|---|---|
| rows | 정수 | 입력 가능한 최대 행의 개수 |
| cols | 정수 | 입력 가능한 최대 열의 개수 |
활용예제
<p> <textarea rows="5" cols="50"></textarea> </p>
목록 상자
- 인라인 요소
형식
<select> <option>항목1</option> <option>항목2</option> <option>항목3</option> </select>
주요 속성
| Name | Value | Describe |
|---|---|---|
| name | 목록 상자의 이름을 작성(Back단에서 인식), <select> 태그의 속성 | |
| value | 각 항목의 값을 작성(Back단에서 인식), <option> 태그의 속성 | |
| selected | selected | 기본 선택 항목 |
활용예제
<p> <select name="direction"> <option value="">방향선택</option> <option value="east">동</option> <option value="west" selected="selected">서</option> <option value="south">남</option> <option value="north">북</option> </select> </p>
입력 상자 + 목록 상자 (콤보 상자)
<input>태그 +<datalist>태그
형식
<input type="text" list="datalist아이디"> <datalist id="아이디"> <option> <option> <option> </datalist>
활용예제
<p> <input type="text" list="domain" placeholder="입력 또는 선택"> <datalist id="domain"> <option value="kakao.com"/> <!-- 태그 사이에 적어주는 말이 없는 경우 나홀로 태그로 변경 가능하다. --> <option value="gmail.com"></option> <!-- 태그 사이에 값을 생략하면 value의 값이 자동으로 표시된다. --> <option value="naver.com"></option> </datalist> </p>
단일 선택 (radio)
- 인라인 요소
- 여러 항목 중에서 하나만 선택할 수 있다.
형식
<input type="radio">
주요 속성
| Name | Value | Describe |
|---|---|---|
| name | 라디오 버튼의 이름을 작성(Back단에서 인식), 모든 라디오 버튼은 동일한 name을 사용해야 한다. | |
| value | 선택한 라디오 버튼의 값을 작성(Back단에서 인식) | |
| checkd | checked | 기본 선택 라디오 버튼 |
활용예제
<p> <input type="radio" name="gender" value="" checked>선택안함 <input type="radio" name="gender" value="male">남자 <input type="radio" name="gender" value="female">여자 </p>
다중 선택 (checkbox)
- 인라인 요소
- 여러 항목 중에서 여러 항목을 선택할 수 있다.
형식
<input type="checkbox">
주요 속성
| Name | Value | Describe |
|---|---|---|
| name | 체크박스의 이름을 작성(Back단에서 인식), 일반적으로 모든 체크박스는 동일한 name을 사용한다. | |
| value | 선택한 체크박스의 값을 작성(Back단에서 인식) | |
| checkd | checked | 기본 선택 체크박스 |
활용예제
- 여러개의 입력값이 동일한 name으로 간다면 Java에서 받을 땐 배열로 받으면 된다.
<p> <input type="checkbox" name="hobbies" value="fitness">운동 <input type="checkbox" name="hobbies" value="travel">여행 <input type="checkbox" name="hobbies" value="sns">SNS </p>운동 여행 SNS
라벨
- 인라인 요소
- 라벨을 선택하면 라벨과 연결된 입력 요소(
input,textarea,select등)가 선택된다.
형식
<label for="입력요소id">라벨내용</label>
<input type="text" id="아이디">활용예제
<p> <input type="radio" name="gender" value="" id="gender_none"> <label for="gender_none">선택안함</label> <input type="radio" name="gender" value="male" id="gender_male"> <label for="gender_male">남자</label> <input type="radio" name="gender" value="female" id="gender_female"> <label for="gender_female">여자</label> </p>
- ↑ 글자(라벨)를 클릭해도 라디오(체크박스)가 선택된다.
폼
- 입력 요소(
input,textarea,select등)들을 서버측으로 보내기 위해서 사용한다. <form>태그 내부에 서버측으로 보낼 입력 요소들을 배치한다.<form>태그 내부의 모든 입력 요소들을 서버측으로 보내는 것을 "서브밋(submit)"이라고 한다.
형식
<form action="서브밋경로" method="GET"> <input> <textarea></textarea> <select></select> <button></button> </form>
주요 속성
| Name | Value | Describe |
|---|---|---|
| action | 입력 요소들의 값을 보낼 서버의 경로를 작성 | |
| method | GET/POST | 요청 메소드 |
요청 메소드
-
GET
∘ 디폴트,method속성 생략 가능
∘ 입력 요소들의 이름(name)과 값(value)을 주소(URL)의 파라미터로 변환하여 전송하는 방식
∘ 처리가 빠르고 보안에 취약하다. -
POST
∘ 입력 요소들을 요청 본문에 포함시켜서 전송하는 방식
∘ 처리가 느리고 보안이 우수하다.
버튼 종류
서브밋
<button type="submit">텍스트</button>
<input type="submit" value="텍스트">
일반
<input type="button" value="텍스트">
: 서브밋 이외의 용도인 모든 버튼에서 사용한다. (자바스크립트와 함께 사용)초기화
<input type="reset" value="초기화">
검색창 활용 예제
네이버 검색 활용
<p> <form action="https://search.naver.com/search.naver" method="get"> <input type="hidden" name="ie" value="utf8"> <input type="text" name="query" placeholder="검색어를 입력하세요"> <button type="submit">검색</button> </form> </p>
구글 검색 활용
<p> <form action="https://www.google.com/search" method="get"> <input type="hidden" name="sca_esv" value="559020407"> <input type="text" name="q" placeholder="검색어를 입력하세요"> <button type="submit">검색</button> </form> </p>
개발이 세상에서 제일 재밌어요