Misun's Archive

How to get favicon image from urls //to get favicon from domain http://www.google.com/s2/favicons?domain=www.your-domain.com //to get favicon from domain url http://www.google.com/s2/favicons?domain_url=http://www.your-domain.com

구글 블로거(블로그스팟)에 syntax highlighter 적용하기 in order to apply "highlight.js" add the three lines below in the head section 1.블로그스팟 테마에 들어가서 2. html 편집을 들어간 뒤 3. 아래 세줄을 head 섹션 안에 추가 한다. <link href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.1/styles/obsidian.min.css' rel='stylesheet'/> <script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.1/highlight.min.js'/> <script>hljs.initHighlightingOnLoad();</script> 아래와 같이 pre 태그안에 code 태그를 쓰고 class를 "language-쓰려는 언어"로 작성하면 된다. pre 태그 안에 꺽쇠괄호가 인식이 안되므로, & l t ; & g t ; 를 사용하여 작성한다. <pre><code class="language-html"><h1> class="language-html"</h1> <h1> class="language-js" </h1></code></pre> pre 태그에 css를 추가로 설정하려면 1.블로그스팟 테마 메뉴 - 2.맞춤설정 - 3.고급 - 4.css 추가 를 선택한 뒤 코드를 추가한다. pre { margin: 0; font-size: 1.0rem; line-height: 1.5; }

placeholder 만들기 포커스시 label 숨기기 $(document).ready(function() { var placeholderTarget = $('.textbox input[type="text"], .textbox input[type="password"]'); //포커스시 placeholderTarget.on('focus', function(){ $(this).siblings('label').fadeOut('fast'); }); //포커스아웃시 placeholderTarget.on('focusout', function(){ if($(this).val() == ''){ $(this).siblings('label').fadeIn('fast'); } }); }); value 값이 이미 설정되어 있는 경우 placeholderTarget.each(function(){ if(!($(this).val() == '')){ $(this).siblings('label').css('display','none'); } }); Material Design function materialLabel() { $('.matInputW input[type="text"]').on('focus', function(){ console.log($('.matInputW input[type="text"]').val()); var label = $(this).siblings('label'); var labelH = label.height(); label.stop().animate({ botto...

navi 특정 위치에서 fixed 스크롤이 네비게이션 위치에 왔을 때 fixed menu01 menu02 menu03 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate veritatis sunt, commodi repellendus pariatur libero alias non suscipit. Saepe quae ab rerum inventore labore aperiam temporibus commodi dignissimos, accusantium necessitatibus. Sed non nisi amet repudiandae eaque labore sapiente dolores quisquam, neque! Nobis, adipisci ex saepe. Inventore enim architecto minima dignissimos rem ea nemo doloribus maxime, deserunt ab? At reprehenderit excepturi, magnam porro voluptates, voluptatem voluptate aliquid similique, maxime dignissimos consectetur corporis! Voluptatum, impedit, eius optio, cumque quam quaerat ducimus commodi delectus a accusamus temporibus neque eligendi! Culpa eligendi, fugiat suscipit fugit doloremque, dolores praesentium consequatur doloribus, dolorum animi velit optio? Assumenda laborum eaque nisi asperiores in recusandae sunt tenetur omnis odio dicta molli...

import java.util.Scanner; public class stack_practice { public static void main(String[] args) { // TODO Auto-generated method stub Scanner s= new Scanner(System.in); char[] stack = new char[5]; int top=0; char makarong='A'; int choice=4; while(choice!=3){ System.out.println("(1)마카롱 넣기 (2)마카롱 빼기" + "(3)종료"); choice= s.nextInt(); switch(choice){ case 1: if(top>=5){ System.out.println("유리통이 꽉 차서 안들어 감"); }else{ stack[top]=makarong++; System.out.printf("마카롱 %c가 유리통에 들어감\n", stack[top]); top++; } break; case 2: if(top<=0){ System.out.println("더이상 마카롱이 없음"); }else{ top--; System.out.printf("마카롱 %c가 유리통에서 나옴\n", stack[top]); stack[top]=' '; } break; case 3: System.out.printf("현재 유리통에 마카롱 %d 개 있음.\n", top); System.out.printf("스택 프로그램 종료\n...

 printf 지시자 %b :  불린 boolean %d : 10진수 decimal integer %o : 8진수 octal integer %x , %X : 16진수 hexadecimal integer %f : 10진수 decimal float %e , %E : 지수형태표현 exponent %c : 문자 character %s : 문자열 string 특수문자 \t : tab \b : backspace \f : form feed \n : new line \r : carriage return \\ : 역슬래시 \' : 작은따옴표 \" : 큰따옴표 \u : 유니코드

package test; public class oper { public static void main(String[] args) { // TODO Auto-generated method stub int a; int b; int ti; float c; float d; float fi; a=8; b=7; ti= a+b; System.out.println(ti); ti= a-b; System.out.println(ti); ti= a*b; System.out.println(ti); ti= a/b; System.out.println(ti); c=8.8f; d=2.2f; fi= c+d; System.out.println(fi); fi= c-d; System.out.println(fi); fi= c*d; System.out.println(fi); fi= c/d; System.out.println(fi); int e=1; e++; System.out.println(e); int f=1; f+=1; System.out.println(f); int g=1; g--; System.out.println(g); int h=1; h-=1; System.out.println(h); int i=8; int j=5; int ni; ni= i % j; System.out.println(ni); System.out.printf("%b\n",i>j); System.out.printf("%b\n", i<j); System.out.printf("%b\n", i==j); System.out.printf("%b\n", i!=j); ...

%d: 10진수(정수형) %f: 실수형 %e: 지수형 %o: 8진수 %x: 16진수 %u: 부호없는 10진수 %g: 실수형 자동출력 %p: 포인터의 주소 %c: 하나의 문자로 출력 %s: 문자열

package test; public class hello { public static void main(String[] args) { // TODO Auto-generated method stub int age;//1~100, 1000 int는 상수 age는 변수                  age=8; int nai; nai=age; System.out.println(age); System.out.println(nai); } }

$("#id_of_textbox").keyup(function(event){     if(event.keyCode == 13){         $("#id_of_button").click();     } }); ------------------------------------------------ document.getElementById("id_of_textbox")     .addEventListener("keyup", function(event) {     event.preventDefault();     if (event.keyCode == 13) {         document.getElementById("id_of_button").click();     } });

<div id='main'>   <div class="container">   </div> </div> --------------------------------------- (1) 아이디(id)가 main인 요소 선택 document.getElementById('main'); document.querySelector('#main'); (2) 클래스명이 container인 요소 선택 document.getElementsByClassName(' container '); document.querySelector('. container ');  //같은 이름의 클래스가 다수인 경우 첫번째 container 선택 document.querySelectorAll('. container ');  //같은 이름의 클래스가 다수 인 경우 해당하는 모든요소 선택 (3) div태그 요소 선택 document.getElementsByTagName('div'); document.querySelector('div');   //div  태그가 다수인 경우 첫번째 div 선택 document.querySelectorAll('div');   //div  태그가 다수인 경우 모든 div 선택 Browser compatibility(브라우저 지원) Desktop   Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit) Basic support 1 (Yes) 3.5 8 10 3.2

<style> ul, li {list-style:none; margin:0; padding:0; display:block;} #loadingWrap {position:relative; width:90px; height:90px; /*border:1px solid pink;*/ margin:20% auto;} .circle {width:20px; height:20px; border-radius:50%; background-color:pink;} .c1 {position:absolute; top:0; left:50%; margin-left:-10px;} .c2 {position:absolute; top:25%; right:25%; margin-top:-10px; margin-right:-10px;} .c3 {position:absolute; top:50%; right:0; margin-top:-10px;} .c4 {position:absolute; bottom:25%; right:25%; margin-bottom:-10px; margin-right:-10px;} .c5 {position:absolute; bottom:0; left:50%; margin-left:-10px;} .c6 {position:absolute; bottom:25%; left:25%; margin-bottom:-10px; margin-left:-10px;} .c7 {position:absolute; top:50%; left:0; margin-top:-10px;} .c8 {position:absolute; top:25%; left:25%; margin-top:-10px; margin-left:-10px;} </style> <ul id="loadingWrap"> <li class="circle c1"></li> <li class="circl...

<style> #loadingBar {width:0%; height:10px; background-color:pink; margin:0; padding:0;} </style> <div id="loadingBar"></div> <script>  var bar = document.getElementById("loadingBar");  window.onload= start; var i=0; function loading(){ i+=0.1; bar.style.width= i + "%"; if(i>=100){ clearInterval(timer); } } function start(){ timer= setInterval(loading, 5); } </script> -------------------------------------------------------------------------------------------------- <style> #loadingBar {width:0%; height:10px; background-color:pink; margin:0; padding:0;} </style> <div id="loadingBar"></div> <script>  var bar = document.getElementById("loadingBar");  window.onload= start; var i=0; function loading(){ i+=0.1; j = i * 0.1; bar.style.width= j + "%"; console.log(i); if(i==1000){ clearInterval(timer); } } func...

<strong>3초후에는 네이버 홈페이지로 이동합니다</strong> <br/> <br/> <div id="loadingBar"></div> <style> #loadingBar {width:0px; height:20px; background-color:pink;} </style> <script> var redirecturl="http://naver.com" var pausefor=4 var bar = document.getElementById("loadingBar"); var i=0; function postaction(){ window.location=redirecturl; } setTimeout("postaction()", pausefor*1000) function loading(){ i++; bar.style.width= i + "px"; if(i==1000){ clearInterval(timer2); } } function start(){ timer2= setInterval(loading, 0.1); }  window.onload= start; </script> <style>

<form> You can choose 2 in maximum : <input type=checkbox name=box1 id="box1" onClick="countChoices(this)"><label for=box1>Frozen</label> <input type=checkbox name=box2 id="box2" onClick="countChoices(this)"><label for=box2>Finding Nemo</label> <input type=checkbox name=box3 id="box3" onClick="countChoices(this)"><label for=box3>the Beauty and the Beast </label> </form> <input type="button" value=" Close " onClick="self.close( )"> <script> function countChoices(obj) { var max = 2; // 최대로 선택할 수 있는 박스 수 var box1 = obj.form.box1.checked;  // 사용할 체크박스 var box2 = obj.form.box2.checked; var box3 = obj.form.box3.checked; var count = (box1 ? 1 : 0) + (box2 ? 1 : 0) + (box3 ? 1 : 0); if (count > max) { alert("최대 " + max + " 개 까지만 선택할 수 있습니다"); obj.checked = false;    } } </script> ...

<script>   function selectivecheck(field, myselection){       var fieldid;       var pos;       var criteria;       var strng;       strng = myselection.value;       for (i=0; i<field.length; i++){           if (strng=="all"){             field[i].checked = true;           }else{               fieldid = field[i].id;               pos = strng.substring(0,1);               criteria = strng.substring(1,2);               if (fieldid.substring(pos,pos+1)==criteria){                   field[i].checked = true;                }else{             ...

<script> function checkall(A,B,C){ var X=eval("document.forms."+A+"."+B) for (c=0;c<X.length;c++) X[c].checked=C } </script> <form name="album"> <input type="checkbox" name="v1">Trey Songz<br> <input type="checkbox" name="v1">Adele<br> <input type="checkbox" name="v1">Sam Smith<br> <input type="checkbox" name="v1">Ed Sheeran<br> <input type="checkbox" name="v1">Coldplay<br> </form> <a href="javascript:checkall('album','v1',true)">Select All</a> <a href="javascript:checkall('album','v1',false)">Unselect All</a> ---------------------------------------------------------------------------------- Trey Songz Adele Sam Smith Ed Sheeran Coldplay...

forms 객체는 links, images 등과 같은 배열 형태로 document 객체의 하단에 존재하는 객체이다. forms[ ] 배열 폼의 구성 요소와 마찬가지로 폼 자체도 배열로 참조되어질 수 있다. 배열의 순서는 구성 요소의 순서와 마찬가지로 HTML 내에서 기술된 순서대로 0번부터 참조되어지며, 그 형식은 document.forms[0]과 같은 방식으로 참조된다. 물론 배열로 참조된 폼 내의 구성 요소 참조시에도 elements[] 배열을 사용할 수 있다. 즉, HTML내에서 기술된 두 번째 폼에서 세 번째 구성 요소를 참조하고자 한다면 document.forms[1].elements[2]와 같이 하면 참조가 가능하다. form에서 사용되는 각 양식들의 이름(name )을 정의해 준다면, 이들을 모두 자바스크립트에서 쉽게 접근할 수 있다. 만약, 이름을 정의해 주지 않는다면 아래와 같이 참조할 수 있다. ...... <form> →document.forms[0] <input type=text value='Text1'> →document.forms[0].elements[0] <input type=text value='Text2'> →document.forms[0].elements[1] <input type=submit> </form> <form> →document.forms[1] <input type=text value='Text1'> →document.forms[1].elements[0] <input type=text value='Text2'> →document.forms[1].elements[1] <input type=submit> </form> ...... form 태그에도 아래와 같이 이름을 정의해 줄 수 있다. 이름...

<style> body{font-size:9pt;} #panel{border:1px #000000 solid; line-height:400px; font-size:100px; width:400px; height:400px; text-align:center; vertical-align:middle;} </style> <script> var panel; var nTimerID; var labTotal; var nTotalMember; window.onload=function(){ this.init();// 요소 초기화 실행. this.initEventListener();// 이벤트 초기화 실행. } function init(){// 요소 초기화. this.panel = document.getElementById("panel");// 숫자가 출력될 #panel을 찾아 전역변수에 담아둡니다. this.nTimerID = 0;// 참여인원 정보가 입력된 패널을 찾아 전역변수에 담아둡니다. this.labTotal = document.getElementById("lab_total"); this.nTotalMember = 0; } function initEventListener(){// 이벤트 초기화. var btnStart = document.getElementById("btn_start"); btnStart.addEventListener("click", function(){ startTimer(); },false); var btnStop = document.getElementById("btn_stop"); btnStop.addEventListener("click...

  <style> .container {position: relative;   -webkit-perspective: 1000;   -moz-perspective: 1000;   -ms-perspective: 1000;   -o-perspective: 1000; } .card { width: 200px; height: 200px;margin: 0 auto; position: relative;   -webkit-transform-style: preserve-3d;   -webkit-transition: 0.5s;   -moz-transform-style: preserve-3d;   -moz-transition: 0.5s;   -ms-transform-style: preserve-3d;   -ms-transition: 0.5s;   -o-transform-style: preserve-3d;   -o-transition: 0.5s;   transition: 0.5s; } .face {position: absolute; backface-visibility: hidden; width: 100%; height: 100%; color: white; line-height: 200px; text-align: center;   -webkit-backface-visibility: hidden;   -moz-backface-visibility: hidden;   -ms-backface-visibility: hidden;   -o-backface-visibility: hidden;  } .front {background: skyblue; z-index: 10;} .back {background: pink;   -webkit-transform: rotateY(180deg);   -mo...

<!doctype html> <html lang="en">  <head>   <meta charset="UTF-8">   <title>Document</title>   <style> #card{position:relative; width:200px; height:200px; margin:0 auto; } #front{position:absolute; top:0; left:0; color:white; font-size: 30px; text-align:center; line-height:200px;background-color: skyblue; width:100%;}   </style>  </head>  <body> <div id="card" onclick="flip()">  <div id="front" > Front content  </div> </div> <script>   var k = 0;   function flip() {     var card = document.getElementById("card");     k += 180;     card.style.transform = "rotatey(" + k + "deg)";     card.style.transitionDuration = "0.5s";   } </script>  </body> </html> ------------------------------------------------------------------------------- ...

<!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">  <title>공 튀기기</title>  <script>  var nX=0;  var nY=0;  var nStepSize=4;  var nStepX=nStepSize;  var nStepY=nStepSize;  var ball;  var nTimerID=0;  var nEndX=0;  var nEndY=0;  window.onload=function(){   init();   initEventListener();  }  function init(){   nTimerID=0;   var panel=document.getElementById("panel");   ball=document.getElementById("ball");   nEndX=panel.offsetWidth-ball.offsetWidth;   nEndY=panel.offsetHeight-ball.offsetHeight;  }  function initEventListener(){   document.getElementById("btn_start").addEventListener("click",function(){start();}, false);   document.getElem...

<!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"> <title>scroll_menu</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <style> .wrap {width:1000px; height:3000px; background-color:#cdcdcd; margin:0 auto;} #q_menu {width:80px; height:300px; border: 1px solid #000; position: absolute; margin-left: 1000px; margin-top: 150px;} #textDiv {position: absolute;} </style> <script type="text/javascript"> $(document).ready( function(){ $('#q_menu').animate({'top':$(document).scrollTop()+20+'px'},500);//처음시작하는위치 $(window).scroll(function(){ $('#q_menu').stop(); $('#q_menu...

<!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"> <title>scroll_menu</title> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <script> $(function(){ var menu=$("#top_menu > ul > li"); var contents=$('#contents > div'); //메뉴 클릭시 해당 컨테이너로 이동 menu.click(function(event){ event.preventDefault(); var i=$(this).index(); var tt=contents.eq(i).offset().top; $("html, body").stop().animate({scrollTop:tt}); }); //스크롤시 해당메뉴가 선택됨 $(window).scroll(function(){ var sct=$(window).scrollTop(); console.log(sct); contents.each(function(){ var i=$(this).in...

<!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"> <title>JQuery accordion Menu</title> <style> body * {margin:0; padding:0; font-family:Malgun gothic; list-style:none;} .accordion {width:202px; overflow:hidden; border-bottom:1px solid #ccc; padding-left:5px; padding-top:5px } .accordion * {font-size:13px; text-decoration:none;} .accordion li {width:200px; vertical-align:top; border-left:1px solid #ccc; border-right:1px solid #ccc;} .accordion li a {padding:10px; border-top:1px solid #ccc; display:block; background:#fafafa; color:#555;} .accordion li a.more {background:#fafafa url(../images/icon_down.gif) no-repeat 180px center;} .accordion li a.less {background:#fafafa url(../images/icon_u...