Development Reference

jsp,html,class,id 언더바

펑션 소대문자 구분

펑션 이름 주어 동사 목적어

언어 설정01

오류 내역

언어 설정02

오류 내역

파비콘 만들기 사이트 바로가기

  1. 준비물 : 260 * 260 사이즈 이미지 필요

html코드 변환 사이트 바로가기


정중앙 정렬 {position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);} 
Y축 정렬 {position: absolute; left: 0; top: 50%; transform: translateY(-50%);}
X축 정렬 {position: absolute; left: 50%; top: 0; transform: translateX(-50%);}

text ...처리 {overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}


배경 이미지 세팅 {background-repeat: no-repeat ;background-size:contain ;background-position:center;}

로딩이 필요할때 가져다 쓰면됨


//로딩바 시작
function startLoading(){
	var print = "<div class='loadgin_wrap'>"
					+"<div id='loader'>"
						+"<ul>"
							+"<li></li>"
							+"<li></li>"
							+"<li></li>"
							+"<li></li>"
							+"<li></li>"
							+"<li></li>"
						+"</ul>"
						+"<div class='lo_text'>Loding...</div>"
						+"</div>"
					+"</div>"
			   +"</div>";
	$("html body").prepend(print);
}
// 로딩바 종료
function endLoading(){
   $("html body").find(".loadgin_wrap").remove();
}


/*loading*/

.loadgin_wrap{
	width:100%;
	height:100vh;
	background:rgba(0,0,0,0.5);
	position:fixed;
	z-index: 999999;
}

#loader {
  position: fixed;
  margin: auto;
  left: 0;
  right: 0;
  top: 50%;
  width: 90px;
}
#loader ul {
  margin: 0;
  list-style: none;
  width: 90px;
  position: relative;
  padding: 0;
  height: 10px;
}
#loader ul li {
  position: absolute;
  width: 2px;
  height: 0;
  background-color: #fff;
  bottom: 0;
}
@keyframes sequence1 {
  0% {
    height: 10px;
  }
  50% {
    height: 50px;
  }
  100% {
    height: 10px;
  }
}
@keyframes sequence2 {
  0% {
    height: 20px;
  }
  50% {
    height: 65px;
  }
  100% {
    height: 20px;
  }
}
#loader li:nth-child(1) {
  left: 0;
  animation: sequence1 1s ease infinite 0;
}
#loader li:nth-child(2) {
  left: 15px;
  animation: sequence2 1s ease infinite 0.1s;
}
#loader li:nth-child(3) {
  left: 30px;
  animation: sequence1 1s ease-in-out infinite 0.2s;
}
#loader li:nth-child(4) {
  left: 45px;
  animation: sequence2 1s ease-in infinite 0.3s;
}
#loader li:nth-child(5) {
  left: 60px;
  animation: sequence1 1s ease-in-out infinite 0.4s;
}
#loader li:nth-child(6) {
  left: 75px;
  animation: sequence2 1s ease infinite 0.5s;
}

.lo_text{
	width:100%;
	text-align: center;
	margin-top:5%;
	color:#fff;
	margin-left:10%;
}


// 우클릭 비활성화
$(document).bind("contextmenu", function(e){return false;}); 

// 드래그 비활성화
$(document).bind("dragstart", function(e){return false;}); 

// 선택 비활성화
$(document).bind("selectstart", function(e){return false;}); 

참고 사이트 바로가기


// 마우스,스크롤 업다운 이벤트
$("html, body").on("mousewheel DOMMouseScroll scroll",function(e){
	var E = e.originalEvent;
	delta = 0;
	if (E.detail) {
     	// 이 조건에서는 e.originalEvent 의 속성으로 detail 가 있다면 입니다.
        // 익스, 크롬 등은 e.originalEvent 에 detail 의 속성이 없으나,
        // 파이어 폭스 일 경우엔 detail 속성이 있습니다.
        // 그래서 이 조건을 실행 시킵니다.
		delta = E.detail * -40;
    }else{
    	// 이곳에서는 익스, 크롬의 e.originalEvent 의 속성으로 wheelDelta 를 사용할 수 있습니다.
        delta = E.wheelDelta;
    }
	console.log(delta);
});

스프링 프로젝트로 실행후 DB와 연동된 페이지로 가면 could not create connection to database server 오류가 뜬다.

오류 내역

해결 방법

  1. build.gradle 파일에서 mysql 세팅 부분 찾기
    오류 내역
  2. mysql 실행후 버전확인
    오류 내역
  3. mysql 버전과 build.gradle 에서 버전을 같게 설정하면 해결됨

스프링 프로젝트 실행 후 console 창에 APPLICATION FAILED TO START 오류가 뜬다.

오류 내역

해결 방법

  1. [name]/src/main/resources/application.properties 파일 유무 확인! 제발 까먹지 마

git에서 clone 받은 프로 젝트를 Gradle Project Import 할떄 오류가 뜬다.

오류 내역

해결 방법

  1. 어떤 이유에서 오류가 나는건지는 확인하지 못함
  2. [name]/.gradle/buildOutputCleanup 폴더의 모든 파일 삭제 후 Gradle Project Import 하면 해결이 된다.
  1. github 에서 clone버튼 클릭후 주소복사
  2. 디렉토리에서 git bash here 클릭
  3. git clone '주소' 엔터

타이틀h1

설명입니다.

설명입니다2.

  1. 제목
    설명
  2. 제목
    설명
  3. Jquery Reference
h5입니다.
파란박스입니다.
code 태그 입니다
					
					java pre 입니다.
					console.log('kim.constructor', kim.constructor);
					
					
					
					<!DOCTYPE html>
					<html lang="ko">
					<head>
					    <meta charset="UTF-8">
					    <title>자바스크립트 사용방법</title>
					    
					    <!-- 외부 파일로 로드하는 방법-->
					    <script type="text/javascript" src="javascript.js"></script>
					    
					    <!-- script 태그 사이에 기술하는 방법-->
					    <script type="text/javascript">
					        document.write("hello");
					    </script>
					</head>
					<body>
					    <!-- 태그에 직접 기술하는 방법 -->
					    <input type="button" onclick="alert('hello')" value="hello">
					</body>
					</html>
					
					
					
					* {font-size:1;}