New 병아리 개발자

*cursor 속성

- cusor 속성을 이용하여 태그 위에 마우스를 위치할 경우의 마우스 커서를 모양을 설정할 수 있다.

• default : 기본값 (화살표)
• auto : 자동
• wait : 로딩
• pointer : 손가락 모양 (클릭 가능한 버튼)

* input값 가져오기 후 링크로 보내기input으로 값  입력 후 버튼 클릭하여 값 서버에 보내기.

1. 준비요소

• form

2. 입력받는 틀(form)

- 값을 입력받은 후 버튼 클릭하여 값 전달하기.

- form의 action에 설정된 사이트 주소 or 파일명으로 연결.

- type="submit"으로 된 버튼 클릭 시 input으로 입력받은 값 전달.

(input의 name으로 서버에서 사용가능)

1. form (사용자로부터 입력받는 공간이자 버튼(submit) 클릭 시 값이 전달되는 공간)
<form action="doWrite" method="POST" class="write-form form1">

	<input name="title" type="text" placeholder="제목 입력">

	<textarea name="body" placeholder="내용 입력"></textarea>

	<button type="submit" value="완료">완료</button>
</form>

*html input 태그 사용법

1. input 태그란?

- input 태그는 웹 페이지에서 사용자의 행동에 따른 정보를 입력받을 수 있게 도와주는 태그이다.

• type : 유형을 결정
• value : 태그의 값 설정
• name : 전달되는 값의 이름

<input type="text" name="searchKeyword" value="${param.searchKeyword}"> 등으로 사용 가능

2. input 태그의 type

• text : 기본 텍스트 입력 창 생성
• password : 비밀번호 입력 창 생성. (해당 창에 텍스트를 입력하는 경우 *로 표시한다.)
• button : 기본 버튼 생성
• radio : 기본 라디오 버튼 생성
• checkbox : 기본 체크박스 생성
• file : 파일 선택 버튼 생성

* html 이미지 슬라이드 (자바스크립트 사용)

- jsp 파일 내에서 아래 코드로 진행.

- imageArray에 들어간 이미지 순서대로 진행.

- setInterval을 통해 이미지가 3초마다 변경되도록 설정.

<img src="/blog/resource/img/m1.jpg" id=mainImage alt="slide"/>

<script>
	var myImage = document.getElementById("mainImage");
	var imageArray = [ "/blog/resource/img/m1.jpg",
			"/blog/resource/img/m2.jpg", "/blog/resource/img/m3.jpg" ];
	var imageIndex = 0;

	function changeImage() {
		myImage.setAttribute("src", imageArray[imageIndex]);
		imageIndex++;
		if (imageIndex >= imageArray.length) {
			imageIndex = 0;
		}
	}
	setInterval(changeImage, 3000);
</script>