09_Function.html

08_Object.html

07_Array.html

06_Loop.html

05_Conditional_Code.html

04_Operator.html

03_Type.html

02_SyntaxBasic.js /******* Comments *******/ // Single-and multi-line comments. // Thie is an example of a single-line comment. /* * this is an example * of a * comment. */ /************/ /******* Whitespace *******/ //Whitespace is insignificant. Whitespace is also ignored in JavaScript. var hello = "Hello"; var world = "World"; //Semantic whitespace promotes readability. //Readable code is goo..

01_RunningCode.html Click Me! Click Me Too!

09_ani.html 09_ani.css @CHARSET "UTF-8"; #myball{ position: relative; width:100px; height:100px; border-radius: 50px; border:2px solid black; background:url(../img/f1.png) no-repeat center center padding-box; animation:myani 3s infinite alternate; } @keyframes myani{ 0%{ left: 10px; } 50%{ background:url(../img/woman.png) no-repeat center center; } 100%{ background:url(../img/f2.png) no-repeat c..

08_timingFunction.html ease ease-in ease-out ease-in-out linear 08_timingFunction.css @CHARSET "UTF-8"; #ex div{ float: left; width: 100px; height: 50px; margin: 5px 10px; padding: 5px; color: white; background-color: #006aff; border-radius: 5px; text-align:center; font-weight: bold; } #ex:hover div{ height: 400px; } #ex .ease{ transition: 3s ease; /*같은 속도 유지*/ } #ex .ease-in{ transition: 3s eas..

07_transition.html 07_transition.css @CHARSET "UTF-8"; #ex div{ width: 100px; height: 100px; border-radius: 0px; border: 2px solid black; background: url(../img/f1.png) no-repeat center center padding-box;/*x축 중간(left), y축 중간(right)*/ transition: all 1s ease-in 0.3s; } #ex:hover div{ border-radius: 50px; border: 2px solid blue; background: url(../img/f2.png) no-repeat center center padding-box; }