- HTML 정리
- HTML 구조
<!Doctype html>
<html>
<head>
<title> 웹 사이트의 제목 표시 </title>
</head>
<body>
홍길동 웹 사이트 방문을 환영합니다. <br><br>
웹 사이트의 콘텐츠 로 구성됨. <br><br>
</body>
</html>
html은 head, title, body로 구성되어있다.
body안에 프로그램을 작성한다.
<br>은 줄바꿈 옵션
&는 스페이스바
- HTML 태그
<h1> h1 글자 크기 확인입니다 </h1>
<h2> h1 글자 크기 확인입니다 </h2>
<h3> h1 글자 크기 확인입니다 </h3>
<h4> h1 글자 크기 확인입니다 </h4>
<h5> h1 글자 크기 확인입니다 </h5>
<h6> h1 글자 크기 확인입니다 </h6>
h 태그는 자동 줄 바꿈 기능을 제공하며 숫자가 작을 수록 큰 글자이다.
글이나 사진에 링크를 걸고싶다면 <a href> 테그를 추가한다.
<a href=" hello.html">홍길동 웹사이트로 이동 </a><br> //이렇게 설정할 경우 현재 창에서 링크가 열림
새로운 창에서 링크가 열리도록 하고싶다면
<a href=http://www.imbc.com target=" blank"> MBC 가기 </a>
- 표(table) 만들기
<!Doctype html>
<html> <head>
<title> 테이블 작성</title>
</head>
<body>
<table>
<caption>표 제목</caption>
<tr> <th> HD1</th> <th>HD1 </th> </tr>
<tr> <td> 1-1 </td> <td> 1-2 </td> </tr>
<tr> <td> 2-1 </td> <td> 2-2 </td> </tr>
</table>
</body>
</html>
표(table) 합치기
<td colspan=2 width=60px> 1-2 </td>
<td rowspan=3 width=60px> 2-1 </td>
html 폼 태그
사용자에게 정보를 요청하거나 답을 요구할 수 있고 textbox, passward, checkbox, radiobutton, combobox , …
사용자로부터 입력 받은 정보를 서버로 전달 할 수 있게 submit 버튼 제공
submit 버튼은 새 페이지(JSP에 의해 생성되는 동적 페이지)를 열기 위해 사용
- 서버로 데이터 전달하기
- FORM 태그
<FORM NAME =“폼 이름” ACTION=“이동할 페이지” METHOD=“전송방식 GET/ POST” ENCTYPE=“데이터의 타입” …</FORM>
- INPUT TYPE 태그: Form 태그 안에서 사용
<INPUT TYPE = “text” NAME=“태그명” VALUE=“초기값” SIZE=“태그길이” MAXLENGTH=“최대길이” ID=“태그의id” READONLY />
form tag 속성
속 성
설 명
NAME
여러 가지 폼 중에서 구분할 때 다른 이름으로 부여,
자바스크립트에서 폼 내의 태그들을 참조할 때 사용
ACTION
Submit 버튼 클릭 시 현재 폼의 정보를 가지고
다른 페이로 이동할 때 사용
METHOD
폼의 정보를 전달 방식, post, get 방식이 사용
ENCTYPE
폼 정보의 타입을 지정하며, 주로 파일 업로드시 사용
'BoostCource > Front-end' 카테고리의 다른 글
| [FE] 03. JavaScript 배열, 객체 (0) | 2018.07.19 |
|---|---|
| [FE] 02. WEB UI 개발 (0) | 2018.07.12 |
| [FE] 02. JavaScript 기초 (0) | 2018.07.12 |
| [FE] 01. HTML & CSS (2) (0) | 2018.05.19 |
| [FE] 01. HTML & CSS (1) (0) | 2018.05.18 |