반응형

# 페이지 로딩 효과

## 결과물

See the Pen 페이지 로딩효과 by dlagusgh1 (@dlagusgh1) on CodePen.

 

## html

<div class="loader"></div>

## CSS

.loader {
	border: 16px solid #f3f3f3;
	border-top: 16px solid #3498db;
	border-radius: 50%;
	width: 120px;
	height: 120px;
	animation: spin 2s linear infinite;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

@keyframes spin {
	0% {transform:translate(-50%, -50%) rotate(0deg); }
	100% {transform:translate(-50%, -50%) rotate(360deg); }
}

## 제이쿼리

<script
	src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  $(window).load(function() {
          $('.loader').fadeOut();
      });
</script>

## 출처

https://www.youtube.com/watch?v=_ScD4ipBXC0

반응형
저작자표시

'프로그래밍 > HTML, CSS, JSP, 서블릿' 카테고리의 다른 글

CSS 이용한 움직이는 이미지  (0) 2020.07.18
CSS, 제이쿼리 이용한 이미지 슬라이드  (0) 2020.07.18
버튼 클릭 시 배경색상 변경 (JavaScript)  (0) 2020.07.06
HTML 입력받은 데이터 서버로 전송하기(form, action, input, submit)  (0) 2020.07.06
팝업창(경고창) 속성 (alert)  (0) 2020.07.05
반응형

# 버튼 클릭 시 배경색상 변경 (JavaScript)

  • 자바 스크립트를 이용하여 버튼 클릭 시 배경 색상이 변경 되도록 구현하였습니다.
<html>
 
<head>
  <meta charset="utf-8">
  <meta charset="EUC-KR"> 
	<script language="javascript">
    	function changeColor(color)
    	{
         	document.bgColor = color;
    	}
	</script>
</head>
 
<body>
  
  <input type="radio" name="bgColor" value="white" onclick="change(this.value)">흰색<br>
  <input type="radio" name="bgColor" value="black" onclick="change(this.value)">검정색<br>
 
</body>
 
</html>
반응형
저작자표시

'프로그래밍 > HTML, CSS, JSP, 서블릿' 카테고리의 다른 글

CSS, 제이쿼리 이용한 이미지 슬라이드  (0) 2020.07.18
CSS, 제이쿼리 이용한 페이지 로딩 효과  (0) 2020.07.18
HTML 입력받은 데이터 서버로 전송하기(form, action, input, submit)  (0) 2020.07.06
팝업창(경고창) 속성 (alert)  (0) 2020.07.05
CSS cursor 속성 (마우스 커서 변경)  (0) 2020.07.05
반응형

* HTML 입력받은 데이터 서버로 전송하기(form, action, input, submit)

1. 입력받기 (input 태그)

- type으로 입력 받을 형식 설정 가능.

- id='입력 받는 값 이름' 

- 입력된 값을 서버에서 id를 통해 끌어올 수 있음

- placeholder='' 를 통해 생성된 박스 안에 "아이디 입력" 등의 문구를 넣을 수 있다.

input 기본 틀 : <input type="text" placeholder="내용 입력">
  • text 일반 텍스트를 입력받을 수 있습니다.
  • password : 패스워드 입력 (입력값이 화면에 보여지지 않는다.) 
  • button : 버튼 생성
  • checkbox : 체크박스 생성
  • radio : 라디오 버튼 생성
  • reset : <form> 태그 안의 사용자 입력을 초기화
  • submit : <form> 태그 내에 입력된 데이터를 서버로 전달

 

2. 입력 받은 값 서버에 연결 (form 태그, input 태그)

- form 태그 내 action="url(서버 페이지 주소 등, 입력 값 보낼 곳)" 지정 후

- intput type="submit"을 누름으로써 form 태그에 지정한 URL로 전송

- submit은 자동으로 데이터를 전송해 줄 수 있는 버튼이다. 해당 버튼의 기본 이름은 제출이며, value로 이름 변경이 가능하다.

<input type="submit" value='로그인'> // 로그인 이라는 이름의 버튼 생성

 

3. 예제 

아래 코드를 통해 만든 아이디/비밀번호 입력 폼

// action 값에 url 설정, doWrite.php 등으로도 설정 가능.
<form action='doWrite?'>
	<tr>
		<td>아이디</td>
 		<td><input id='userid' type='text' placeholder="제목 입력" /></td>
	</tr>
	<tr>
		<td>비밀번호</td>
		<td><input id='pwd' type='password' maxlength='5' placeholder="비번 입력" /></td>
 	<tr>
		<td><input type='submit' value='로그인'><td>
	</tr>
</form>
반응형
저작자표시

'프로그래밍 > HTML, CSS, JSP, 서블릿' 카테고리의 다른 글

CSS, 제이쿼리 이용한 페이지 로딩 효과  (0) 2020.07.18
버튼 클릭 시 배경색상 변경 (JavaScript)  (0) 2020.07.06
팝업창(경고창) 속성 (alert)  (0) 2020.07.05
CSS cursor 속성 (마우스 커서 변경)  (0) 2020.07.05
input으로 값 입력 후 버튼 클릭하여 값 서버에 보내기.  (0) 2020.07.05
반응형

*팝업창(경고창) 속성 (alert)

- alert은 팝업창 or 경고창을 생성해준다.

- 버튼 클릭 시 팝업창 or 경고창이 나오게 하기 위해선 아래 코드로 진행해주면 된다.

// a태그 클릭 시 팝업창 or 경고창 나오도록 하는 코드.
<a href="#" onClick="alert('작성이 취소되었습니다.')">

- onClick="alert('메세지')" 를 별도로 사용할 수도 있다.

 

 

반응형
저작자표시

'프로그래밍 > HTML, CSS, JSP, 서블릿' 카테고리의 다른 글

버튼 클릭 시 배경색상 변경 (JavaScript)  (0) 2020.07.06
HTML 입력받은 데이터 서버로 전송하기(form, action, input, submit)  (0) 2020.07.06
CSS cursor 속성 (마우스 커서 변경)  (0) 2020.07.05
input으로 값 입력 후 버튼 클릭하여 값 서버에 보내기.  (0) 2020.07.05
html input 태그 사용법  (0) 2020.07.05

+ Recent posts

티스토리툴바