JSP - 2일차 (HTML)

■ HTML 

 

Hyper Text Markup Language의 약자

 

하이퍼텍스트(Hyper Text)란 문서를 서로 연결해주는 링크를 의미한다.

Markup : 표시하다.

웹 브라우저에 내용을 보여주는 텍스트, 이미지 등의 위치를 표시하는 것을 의미

 

태그의 기본 형식은

 

<태그이름>문서의내용</태그이름>

여는태그                          닫는태크

 

■ HTML 태그 

 

문자 세트를 비롯해 문서정보가 들어있는 <meta> 태그 

흔히 메타정보라고 하면 '데이터에 관란 데이터'를 말한다.

<meta>태그는 웹 브라우저에는 보이지 않지만 웹 문서와 관련된 정보를 지정할 때 사용한다.

 

<meta>태그의 가장 중요한 역할은 화면에 글자를 표시할 때 어떤 인코딩을 사용할지 지정하는 것이다. 웹 서버는 영어가 기본이므로 화면에 한글로 된 내용을 표시할 때에는 UTF-8이라는 문자세트를 사용한다고 알려줘야 한다.

 

□ <h> 태그

 

<h1></h1> 제목태그. h1캐그가 가장 글자크기가 크고 h6이 가장 작다

 

□ <p></p>, <br>, 특수문자 표현

 

<p>내용</p?> 내용란에 텍스트를 입력하면 텍스트 앞뒤로 빈줄이 생기면서 텍스트 단락이 만들어진다.

<br/>태그를 두 번 사용하면 텍스트 단락이 나뉜 것처럼 표시할 수 있다. 하지만 실제로는 단락이 만들어진 게 아니기 때문에 CSS를 사용해 텍스트 단락 스타일을 적용할 때 문제가 생긴다.

 

□ <b>, <em> ,<hr>, <mark>, <del>, <ins>

 

<strong>과 <b>의 차이점은 낭독기가 <strong> 태그를 사용한 부분을 강조하여 읽어준다.

 

□ <ol>, <ul> 태그

 

□ <dl>과 <dt>, <dd> 태그 

 

□ <table> 태그

 

□ <img> 태그

 

 

 

 

□ <span>, <div> 태그

 

□ <a> 태그

 

 

□ HTML 태그 정리

 

 

□ HTML 태그 정리 (목록)

 

 

□ HTML 태그 정리 (목록)

 

 

□ HTML 태그 정리 (멀티미디어)

 

 

■ HTML <form> 태그

 

우리는 웹에서 폼(form)을 자주 만난다. 아이디와 비밀번호를 입력하거나 로그인 버튼, 회원가입 등 사용자가 웹 사이트로 정보를 보낼 수 있는 요소는 모두 폼이라고 할 수 있다. 그렇다면 폼은 어떤 방식으로 동작할까?

 

사용자가 아이디와 비밀번호를 입력하고 [로그인]버튼을 클릭하면 입력한 정보는 웹 서버로 전송된다. 그럼 서버는 자신이 가진 데이터베이스에서 입력받은 아이디와 비밀번호가 일치하는지 확인하고 그 결과를 웹 브라우저에 보낸다.

 

폼과 관련한 작업은 정보를 저장하거나 검색, 수정하는 것이 대부분인데 모두 데이터베이스로를 기반으로 작동한다.

 

□ <form> 태그의 속성

 

자동 완성 기능을 나타내는 autocomplete 속성

- 폼에서 내용을 입력할 때 예전에 입력한 내용을 자동으로 표시해주는 것을 자동 완성 기능이라고 한다. 사용자가 입력한 내용을 기억했다가 비슷한 글자가 입력되면 이전에 입력한 내용을 힌트로 보여준다.

 

자동 완성 기능은 autocomplete 속성을 사용하며 기본 속성값은 "on"이다. 매루 중요한 개인정보나 인증번호와 같은 일회성 정보를 입력한다면 이 기능은 사용하지 않는 것이 좋다.

 

<form> 태그의 autocomplete 속성을 off로 지정하면 자동 완성 기능을 끌 수 있다.

 

□ enctype 속성의 속성값

 

 

 

□ <label> 태그

 

 

■ HTML <input> 태그

 

□ <input> 태그의 type 속성

 

 

□ <input> 태그의 텍스트와 비밀번호

 

 

□ 용도에 맞게 입력하는 type 속성

 

type = "search" 를 사용하면 웹 브라우저 화면으로 볼 때는 텍스트 필드와 똑같지만, 웹 브라우저에는 검색을 위한 텍스트 필드로 인식한다.

 

type = "url 은 웹 주소를 입력하는 필드이고, type="email"은 이메일 주소를 입력하는 필드이다. 이메일 주소 필드로 지정하면 웹 브라우저가 알아서 확인한다. 만약 입력값이 지정한 형식에 맞지 않는다면 웹 브라우저에서 오류 메시지를 보여준다.

 

type  = "tel"은 전화번호를 나타내는 필드이다. 전화번호는 지역마다 형식이 다르므로 사용자가 입력한 값이 전화번호인지 아닌지 체크할 수 없다. 모바일 페이지에서 이 값을 이용하면 바로 전화를 걸 수 있다.

 

□ 체크박스와 라디오 버튼

 

 

□ 숫자 입력필드

 

 

□ 전송 리셋 버튼

 

 

□ 이미지 버튼 / 기본 버튼 

 

 

□ 파일 첨부

 

 

□ 히든 필드를 만들 때

 

 

□ 폼에서 사용하는 여러 태그

 

 

□ 드롭다운 목록

 

 

□ 데이터 목록을 만들 때

 

 

□ <button> 태그

 

 

<실습 내용>