HTML(HyperText Markup Language)
- 웹 페이지와 그 내용을 구조화하기 위해 사용하는 코드
- 기본 구조 (vscode에서 !이나 html5 입력 후 엔터)
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 주석 처리 -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>HTML 태그
- <link> = 외부 파일 연결(import)에 사용
- 파일 다운로드 = <a href="경로" download>
- <base> = href 기본값 설정 (<head> 태그 안에 입력)
- <div> = 웹 페이지의 레이아웃을 나누는데 사용 (블록)
- <span> = <div>와 같이 수행하지만 웹 페이지의 레이아웃을 나누는데 사용 (인라인)
- <iframe>(인라인 프레임) = HTML 페이지 내에 HTML 페이지 삽입
=> type로 text, password, button, submit, reset, image, checkbox(여러 개 체크), radio(한 개만 체크) 등 다양
- <datalist>, <select> = 목록 리스트를 작성하는 태그 => datalist = 목록에 없는 값 입력 가능, select = 선택만 가능
- <option> = 목록 리스트의 항목 지정
- <textarea> = 길이 제한 없이 텍스트를 입력할 수 있는 영역 생성
- <% %> = 태그 내부에 Java 코드 입력하여 실행 가능
<% for (var i = data.length - 1; i >= 0; i--) { %>
<tr>
<td><%=data[i]["No"]%></td>
<td><%=data[i]["title"]%></td>
<td><%=data[i]["writer"]%></td>
</tr>
<% } %>
※ HTML 테이블 생성 기본 구조
<table>
<caption></caption>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>시멘틱 태그
폼 관련 태그
- <form> = 폼 생성 태그
- <input> = 입력 필드 정의 (<form> 태그 내에서만 사용 가능)
- <legend> = 폼의 이름 설정 (<form> 태그 내에서만 사용 가능)
- <label> = 폼의 양식 이름 설정 (<form> 태그 내에서만 사용 가능)
Input type 종류
- button = 단순 클릭 버튼
- checkbox = 체크할 수 있는 버튼 (하나만 선택 가능)
- radio = 라디오 버튼 (여러 개 선택 가능)
- color = 색깔 선택 버튼
- submit = 입력 데이터 전송
- date = 달력에서 날짜 선택
- month = 달력에서 월 선택
- week = 달력에서 주 선택
- time = 시간 선택
- datetime-local = 날짜 + 시간 선택 (date + time)
- text = 단순 텍스트 입력
- email = 이메일 입력
- password = 비밀번호 입력
- tel = 전화번호 입력
- url = URL 주소 입력
- file = 파일 선택(첨부)
- image = 버튼에 이미지 삽입
- number = 위아래 버튼으로 숫자 선택
- range = 슬라이드 숫자 범위 선택
Input 속성 종류
- type = 타입 설정
- value = 초기값 설정
- disabled = 클릭&사용 불가 설정
- required = 필수 입력 설정 (미입력시 경고 메시지)
- size = 글씨 크기 설정
- maxlength = 최대 길이 제한 설정
- max/min = 숫자 최대/최소 설정
- height/width = 높이/너비 설정
- autocomplete = 자동 완성 기능 설정
- placehorder = 입력창 클릭 전에 보이게 되는 텍스트 설정
댓글