Misun's Archive

글

4월, 2017의 게시물 표시

자바스크립트 내장함수

eval() 문자열을 자바스크립트 문장으로 변환(수식은 계산, 문자는 변수로) parseInt() 숫자를 정수로 반환 parseFloat() 숫자를 실수로 반환 isNaN() "Nota Number"의 약자로 숫자가 아닌 문자가 포함되면 true를 반환 isFinite() 주어진 값이 유리수인지 아닌지 판단 Number() 문자를 숫자형으로 변환 String() 숫자를 문자형으로 변환 escape() 문자를 16진수 아스키코드 값으로 반환 unescape() escape()로 변환된 값을 다시 되돌려 반환

자세한 내용 보기

Moving Fish in javascript / 자바스크립트로 물고기 움직이기

<body> <div id=panel> <div id="bar"></div> <img src="fish.png" id="fish"> </div> <br> <div id="nav"> <button id="leftBtn" onClick="startMove('leftBtn')">Move to Left</button> <button id="rightBtn" onClick="startMove('rightBtn')">Move to Right</button> <button id="stop" onClick="stop()">Stop</button> </div> </body> <style> #panel{position:relative; width:600px; height:300px; border:1px solid #ccc; } #bar{position:absolute; left:0px; top:190px; width:100%; height:20px; background:pink;} #btnStart{margin:0 auto;} #fish{position:absolute; left:0px; top:120px; width:120px; height:70px;} #nav{text-align: center; width:600px;} </style> <script> var panel=null; var fish; var timer; window.onload=functi...

자세한 내용 보기

Math.random/ setInterval/ clearInterval in javascript // 자바스크립트 Math.random/ setInterval/ clearInterval 이해하기

<script> var nCount=0; var panel=null; window.onload=function(){ this.init(); } function init(){ this.panel=document.getElementById("panel"); } var t; function start(){ t = setInterval(this.addTag,20); //0.02초에 한번씩 addtag 출력 } function addTag(){ this.nCount++; var span=document.createElement("span"); span.style.color="#"+(parseInt(Math.random()*0xffffff)).toString(16); span.style.fontSize=(10+parseInt(Math.random()*40))+"px"; span.style.display="inline-block"; span.innerHTML=this.nCount; this.panel.appendChild(span); console.log(nCount); } function stopButton(){ clearInterval(t); } </script> </head> <body> <div> <button onClick="start()">start</button> <button onClick="stopButton()">stop</button> <div id="panel"></div> </div> </body> </html>

자세한 내용 보기

check function in javascript when making join in form table / 자바스크립트로 회원가입창 만들기

<body> <form method="post" action="memRegProc.php" name="frm1"> <table border="1" sellspacing="0" width="500"> <tr> <td colspan="2" align="center" bgcolor="pink">회원가입</td> </tr> <tr> <td>아이디</td> <td> <input type="text" name="id" id="id" value="id"> <input type="button" value="중복확인" onclick="popup()"> </td> </tr> <tr> <td>암호</td> <td><input type="password" name="pw"></td> </tr> <tr> <td>이름</td> <td><input type="text" name="name"></td> </tr> <tr> <td>이메일</td> <td><input type="text" ...

자세한 내용 보기

Password Check in javascript prompt window / 자바스크립트 프롬프트 창에서 패스워드 체크하는 함수

for문 이용 <script> for(var i=0;i<10000;i++){ var value=window.prompt("패스워드를 입력해주세요."); if(value=="1234"){ alert("환영합니다."); break; } else{alert("잘못 입력했습니다. 다시 입력해주세요.")} } </script> ------------------------------------------------------------------------------------------------- while문 이용 <script> //무한루프를 돌때 for문보다 while문이 훨씬 낫다. 내부적으로 돌기 때문. while(true){ var value= window.prompt("패스워드를 입력해주세요."); if (value=="1234"){ alert("환영합니다."); break; } else{alert("잘못 입력했습니다. 다시 입력해주세요.");} } </script>

자세한 내용 보기

continue and break in javascript / 자바스크립트에서 continue 와 break 이해하기

<script> for(var i=1;i<=10;i++){ //최종값만 찍고 싶을때는 continue를 쓴다. 결과값은 11이 된다 continue; } document.write("최종 i="+i+"<br>"); for(var i=1;i<=10;i++){ //첫번째 값만 실행하고 튕겨나옴. 첫번째 1값이 결과값 break; } document.write("최종 i="+i+"<br>"); </script> ------- 출력값 최종 i=11 최종 i=1

자세한 내용 보기

Odd or Even in javascript Prompt Window / 자바스크립트 프롬프트 창에서 홀수 짝수 확인하기

<script> //값 입력 var value= window.prompt("수를 입력해주세요."); //문자를 숫자로 변환 value=parseInt(value); //비교 (value %2==0)?alert("짝수 입니다."):alert("홀수 입니다."); </script>

자세한 내용 보기

Asterisk Piramid in javascript / 자바스크립트로 별피라미드 만들기

<script> var piramid=""; for(var i=1; i<15;i++){ for(var t=1; t<15-i; t++){ piramid+=" "; } for(var m=0; m<2*i-1;m++){ piramid+="*"; } piramid +="<br>"; } document.write(piramid) ; </script>

자세한 내용 보기

Multiplication Table in javascript / 자바스크립트로 구구단 짜기

방법(1) <script> //구구단 연습 var dan=3 document.write(dan, "*2=",(dan*2),"<br>"); document.write(dan, "*3="+(dan*3)+"<br>"); document.write(dan, "*4=",(dan*4),"<br>"); document.write(dan, "*5=",(dan*5),"<br>"); document.write(dan, "*6=",(dan*6),"<br>"); document.write(dan, "*7=",(dan*7),"<br>"); document.write(dan, "*8=",(dan*8),"<br>"); document.write(dan, "*9=",(dan*9),"<br>","<br>"); var dan=7 document.write(dan, "*2=",(dan*2),"<br>"); document.write(dan, "*3="+(dan*3)+"<br>"); document.write(dan, "*4=",(dan*4),"<br>"); document.write(dan, "*5=",(dan*5),"<br>"); document.write(dan, "*6=",(dan*6),...

자세한 내용 보기

Calendar in jQuery(Datepicker) 2 / 제이쿼리로 달력 만들기 2

<html lang="en"> <head> <meta charset="utf-8" /> <title>jQuery UI Datepicker - Default functionality</title> <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" /> <script src="http://code.jquery.com/jquery-1.8.3.js"></script> <script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script> <link rel="stylesheet" href="/resources/demos/style.css" /> <script> $(function() { $('#datepicker').datepicker({ changeYear: true,//Year 선택 가능 changeMonth: true,//Month 선택 가능 dayNames: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'], dayNamesMin: ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'], monthNamesShort: ['1','...

자세한 내용 보기

Calendar in jQuery(Datepicker) / 제이쿼리로 달력 만들기

<html lang="en"> <head> <meta charset="utf-8" /> <title>jQuery UI Datepicker - Default functionality</title> <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" /> <script src="http://code.jquery.com/jquery-1.8.3.js"></script> <script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script> <link rel="stylesheet" href="/resources/demos/style.css" /> <script> $(function() { $("#datepicker").datepicker(); }); </script> </head> <body> <p> Date: <input type="text" id="datepicker" /> </p> </body> </html> --------------------------------------------------------------------  <script type="text/javascript"> $(function() { $(".datepicker").datepicker({ dateForm...

자세한 내용 보기

Hover Effect: slide right effect in jQuery or in pure CSS3 / 제이쿼리 또는 CSS3를 이용하여 마우스오버했을때 오른쪽방향으로 배경색 채우기

<ul class="lnb"> <li class="on active"><a href="#">mouseover to slide right 01</a></li> <li><a href="#">mouseover to slide right 02</a></li> <li><a href="#">mouseover to slide right 03</a></li> <li><a href="#">mouseover to slide right 04</a></li> </ul> <style> a{color:inherit; width:100%;} ul.lnb {display:block; position:relative; border:1px solid #e6e6e6; margin:0; padding:0; width:300px; overflow:hidden;} ul.lnb > li {display:block; position:relative; color:#4d4d4d; text-indent:10px; font-size:13px; line-height:36px; border:1px solid #e6e6e6;} ul.lnb > li > a {display:block; position:relative; height:36px;} ul.lnb > li.on > a {background-color:#4d4d4d; color:#fff;} </style> <script> $( document ).ready(function() { var lnb=$('.lnb > li...

자세한 내용 보기

Tab & Image Slider in jQuery / 제이쿼리로 탭메뉴 및 이미지 슬라이더 만들기

<ul class="tab"> <li class="on">tab01</li> <li>tab02</li> <li>tab03</li> </ul> <div class="slider_wrap"> <div class="slider"> <ul class="inner_slider"> <li class="slide"></li> <li class="slide"></li> <li class="slide"></li> </ul> </div> </div> <style> .tab li {color:#ddd;} .tab li.on {color:red;} .slider_wrap {position:relative; width:960px; height:620px;} .slider {position: relative; overflow:hidden; width:960px; height:620px;} ul.inner_slider {position:absolute; top:0; left:0; width:2880px; height:620px; } li.slide{position:relative; overflow:hidden; float:left; width:960px; height:620px;} </style> ...

자세한 내용 보기

Making Function with Conditional State in jQuery / 제이쿼리 조건문 만들기

//제이쿼리 조건문 만들기 var width = parseInt($(window).width());//윈도우의 현재 width값을 구하여 정수로 바꾸기 if (width<570 || width>1360 ){ $(".선택요소1").hide(); $(".선택요소2").show(); }else{ $(window).scroll(function(){ if($(window).scrollTop() >= 100){ $(".선택요소1").show(); $(".선택요소2").hide(); } }); }

자세한 내용 보기

Typing Effect in jQuery / 제이쿼리로 타이핑 효과 주기

//한글자 한글자 타이핑 효과 주기 (function () { var app; $(document).ready(function () { return app.init(); }); app = { text: 'If you can imagine it, you can create it. If you can dream it, you can become it.', index: 0, chars: 0, speed: 100, container: '.selector', init: function () { this.chars = this.text.length; return this.write(); }, write: function () { $(this.container).append(this.text[this.index]); if (this.index

자세한 내용 보기

Make Triangle by using Border Property in CSS / CSS의 보더속성 이용하여 삼각형 만들기

<div class="triangle"></div> <div class="triangle01"></div> <div class="triangle02"></div> <div class="triangle03"></div> <style> .triangle { width:0; height:0; border-left:200px solid pink; border-right:200px solid yellow; border-top:200px solid orange; border-bottom:200px solid skyblue; float:left; } .triangle01 { width:0; height:0; border-left:200px solid pink; border-right:200px solid transparent; border-top:200px solid transparent; border-bottom:200px solid transparent; float:left; } .triangle02 { width:0; height:0; border-left:200px solid pink; border-right:200px solid transparent; border-top:0 solid transparent; border-bottom:200px solid transparent; float:left; } .triangle03 { width:0; height:0; border-left:400px solid pink; border-right:0px solid transparent; border-top:200px solid transparent; border-bottom:200px solid transparent; float:left;...

자세한 내용 보기

Scroll function in jQuery (Parallax Scrolling) / 패럴렉스 스크롤(Parallax Scrolling)을 위한 제이쿼리 소스

//스크롤 550일때 양옆에서 나타나기 $(window).scroll(function(){ if($(window).scrollTop() >= 550){ $(".선택요소").animate({left:"0px",opacity:1 },1200); $(".선택요소").animate({left:"0px",opacity:1},1200); } }); //스크롤 960일때 양옆에서 나타나기 $(window).scroll(function(){ if($(window).scrollTop() >= 960){ $(".선택요소").animate({left:"0px",opacity:1},1200); $(".선택요소").animate({left:"600px",opacity:1},1200); } }); //스크롤 1000일때 서서히 나타나기 $(window).scroll(function(){ if($(window).scrollTop() >= 1000){ $(".선택요소").animate({opacity:1},5000); } });

자세한 내용 보기

Search bar appears when scope icon or button is clicked in jQuery / 제이쿼리로 검색아이콘 눌렀을 때 검색바 나타나게 하기

<div class="searchingbox"> <input type="text"> <a class="closebtn">X</a> </div> <button>search</button> <style> .searchingbox{width: 0px; position: relative; float: left; display: none;} .closebtn {position:absolute; top:0; right:10px;} button {float:left;} </style> <script> $(document).ready(function(){ $("button").click(function(){ $(".searchingbox").css({display:"block"}); $(".searchingbox").animate({width: "180px"},500); }); $(".closebtn").click(function(){ if($(".searchingbox").css('width')=="180px") $(".searchingbox").animate({width: "0px"},500,function(){ $(".searchingbox").css({display:"none"}); ...

자세한 내용 보기

Hover Effect in CSS(extension effect when you mouse over) / CSS로 마우스오버시 이미지 확대효과 주기

<img src="http://placehold.it/100x100"> <style> img { -webkit-transition: 1s linear; -moz-transition: 1s linear; -o-transition: 1s linear; -ms-transition: 1s linear; transition: 1s linear; } img:hover { -webkit-transform: scale(1.5); -moz-transform: scale(1.5); -o-transform: scale(1.5); -ms-transform: scale(1.5); transform: scale(1.5); } </style>

자세한 내용 보기

Accordion Menu in jQuery / 제이쿼리로 아코디언 메뉴 만들기

<div class="menu">menu01</div> <ul class="accordion"> <li>list01</li> <li>list02</li> <li>list03</li> </ul> <div class="menu">menu02</div> <ul class="accordion"> <li>list01</li> <li>list02</li> <li>list03</li> </ul> <style> .accordion {display:none;} .menu.on {color:red;} </style> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <script> $(document).ready(function(){ /*메뉴 아코디언*/ $('.accordion').hide(); $('.menu').click(function(){ $(this).toggleClass('on') $(this).next().slideToggle(); }); }); </script>

자세한 내용 보기

Select tag: Hide native arrows of IE 10, 11 in CSS / CSS로 Select 태그의 네이티브 화살표 숨기기

Hide native arrows of IE 10, 11 in CSS /* IE 10, 11의 네이티브 화살표 숨기기 */ select::-ms-expand { display: none; } /*select 태그 네이티브 화살표 숨기기*/ select { appearance: none; -webkit-appearance: none; -moz-appearance: none; } code practice ------------------------------------------------ <!DOCTYPE html> <html> <head> <style> /* IE 10, 11의 네이티브 화살표 숨기기 */ select::-ms-expand {display: none;} .favcity-wrapper {position:relative;} .visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; padding: 0; position: absolute; } select { -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 0; width:100%;} label[for=favcity] { position: relative; display: block; } label[for=favcity] select { border: 5px solid #000; background: white; padding: 7px 20px 7px 20px; width: 100%; font-size: 16px; ...

자세한 내용 보기

Change Src in jQuery / src 경로를 변경해주는 제이쿼리 함수

<body>  <img src="./img/typeA/arrowOff.jpg" class="arrowOff"> <img src="./img/typeA/arrowOn.jpg" class="arrowOn"> </body> <script> $(document).ready(function(){ /*미리 함수 만들어 놓기*/ function onSrc(a){ a.attr('src').replace('Off','On'); } function offSrc(b){ var srcOff = b.attr('src').replace('On','Off'); b.attr('src', srcOff); } /*클릭시 이미지 경로가 변경됨*/ $('.arrowOff').click(function(){ onSrc($(this)); //함수호출 }); $('.arrowOn').click(function(){ offSrc($(this)); //함수호출 }); }); </script> ------------------------------------------------------------------------------------------ Toggle Src <body>  <img src="./img/typeA/arrowOff.jpg" class="toggleImg"> <img src="./img/ty...

자세한 내용 보기

jQuery Responsive Web: Making Width same as Height / 반응형웹 가로 세로 높이 같게 만드는 제이쿼리

jQuery Responsive Web: Making Width same as Height <script> /*반응형 가로 세로 높이 같게 만들기*/ $(window).resize(function(){ var divWidth = $('ul li').width(); $('ul li').height(divWidth); }); </script>

자세한 내용 보기

CSS Arrows

<!DOCTYPE html> <html> <head> <style> i { border: solid black; border-width: 0 3px 3px 0; display: inline-block; padding: 3px; } .right { transform: rotate(-45deg); -webkit-transform: rotate(-45deg); } .left { transform: rotate(135deg); -webkit-transform: rotate(135deg); } .up { transform: rotate(-135deg); -webkit-transform: rotate(-135deg); } .down { transform: rotate(45deg); -webkit-transform: rotate(45deg); } </style> </head> <body> <h2>CSS Arrows</h2> <p>Right arrow: <i class="right"></i></p> <p>Left arrow: <i class="left"></i></p> <p>Up arrow: <i class="up"></i></p> <p>Down arrow: <i class="down"></i></p> </body> </html>

자세한 내용 보기

CSS Vendor Prefix 벤더 프리픽스

CSS Vendor Prefix 벤더 프리픽스 CSS3의 기능을 지원하지 않는 브라우저들을 위해서 선언해줘야함. Firefox : -moz- Internet Explorer: -ms- Opera: -o- Safari: -webkit- iOS: -webkit- Android/Chrome: -web-kit -webkit- (Chrome, Safari, newer versions of Opera.) -moz- (Firefox) -o- (Old versions of Opera) -ms- (Internet Explorer) ex) select { display:block; border:1px solid #ccc; border-radius:0; width:130px; height:25px; text-indent:8px; /*padding-right:52px;*/ background:#fff url('../img/arSelect.png') no-repeat top 9px right 6px; background-size:10px 6px; -webkit-background-size:10px 6px; appearance: none; -webkit-appearance: none; -moz-appearance: none; /*direction:rtl;*/ }

자세한 내용 보기

axure tutorial file description in korean / 액슈어 튜토리얼 파일 해설

자세한 내용 보기

Change color of radio button in CSS / CSS로 라디오버튼 색상변경

Change color of radio button in CSS CSS로 라디오버튼 색상변경(순수 CSS 이용 or 이미지 사용) /*radio 버튼 색상변경 */ input[type='radio'] { -webkit-appearance:none; width:16px; height:16px; border:1px solid darkgray; border-radius:50%; outline:none; background:#e6e6e6; } input[type='radio']:before { content:''; display:block; width:60%; height:60%; margin: 20% auto; border-radius:50%; } input[type='radio']:checked:before { background:#008675; } /*라디오버튼 색상변경 이미지로*/ input[type='radio']:before { content:''; position:absolute; top:-3px; left:3px; width:16px; height:16px; background:url('../img/radio_unchkd.png')no-repeat; } input[type='radio']:checked:before { content:''; position:absolute; top:-3px; left:3px; width:16px; height:16px; background:url('../img/radio_chkd.png')no-repeat; }

자세한 내용 보기

change color of placeholder in CSS / css로 플레이스홀더 색상변경하기

change color of placeholder in CSS /* select placeholder 색상 변경 */ .boxTxtW .acoTxt {font-size:15px; color:#454545; .boxTxtW input[type="text"].acoTxt::-webkit-input-placeholder {color: #bdbdbd;;} .boxTxtW input[type="text"].acoTxt::-moz-placeholder {color: #bdbdbd;;} .boxTxtW input[type="text"].acoTxt:-ms-input-placeholder {color: #bdbdbd;;} .boxTxtW input[type="text"].acoTxt:-moz-placeholder {color: #bdbdbd;;} } /* snsTxt input placeholder 색상 변경*/ .borderB input.snsTxt::-webkit-input-placeholder { /* Chrome */color:#454545;} .borderB input.snsTxt:-ms-input-placeholder { /* IE 10+ */color:#454545;} .borderB input.snsTxt::-moz-placeholder { /* Firefox 19+ */color:#454545; opacity: 1;} .borderB input.snsTxt:-moz-placeholder { /* Firefox 4 - 18 */color:#454545; opacity: 1;}

자세한 내용 보기

CSS의 float 속성

CSS의 float 속성 float 속성을 주면 height 값이 없어진다. 즉 부모요소가 자식요소의 영역을 못잡아 주게 된다. 영역을 잡아주려면 float 처리된 자식요소의 부모에 overflow:hidden을 주던지, 아니면 부모요소 다음요소인 div에 clear 해주면된다. 보통 부모div에 클래스를 .clearfix로 주고 .clearfix {content:""; display:table; clear:both;}를 줘서 다음 div를 clear 시켜준다. 이렇게 하면 float처리된 요소들이 영역을 잡고 있게 된다.

자세한 내용 보기