전체 글399

• 

  [JS] 05. Conditional_Code 05_Conditional_Code.html JS/JavaScript 2017. 8. 28.

• 

  [JS] 04. Operator 04_Operator.html JS/JavaScript 2017. 8. 28.

• 

  [JS] 03. Type 03_Type.html JS/JavaScript 2017. 8. 28.

• 

  [JS] 02. SyntaxBasic 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.. JS/JavaScript 2017. 8. 28.

• 

  [JS] 01. Running code 01_RunningCode.html Click Me! Click Me Too! JS/JavaScript 2017. 8. 28.

• 

  [CSS] ch05-09. ani 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.. WEB/CSS 2017. 8. 28.

• 

  [CSS] ch05-08. timingFunction 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.. WEB/CSS 2017. 8. 28.

• 

  [CSS] ch05-07. transition2 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; } WEB/CSS 2017. 8. 28.

• 

  [CSS] ch05-06. transition 06_transition.html 06_transition.css @CHARSET "UTF-8"; /*객체모양 변경*/ #ex div{ width: 100px; height: 100px; background-color: red; border-radius: 0px; transition-property: background-color, border-radius;/*해당하는 2가지 속성에 변형을 준다.*/ transition-duration: 1s; } #ex:hover div{ background-color: blue; border-radius: 50px; } WEB/CSS 2017. 8. 28.

• 

  [CSS] ch05-04. skew 04_skew.html 04_skew.css @CHARSET "UTF-8"; div{ float: left; margin: 100px; width: 150px; height: 190px; background-color: rgba(0,0,255,0.3); perspective: 200px; } img{ border: 1px solid black; } #i1:hover{ transform: skew(45deg, 0deg); } #i2:hover{ transform: skew(0deg, 45deg); } WEB/CSS 2017. 8. 28.

• 

  [CSS] ch05-03. rotate 03_rotate.html 03_rotate.css @CHARSET "UTF-8"; div{ float: left; margin: 50px; width: 150px; height: 190px; background-color: rgba(0,0,255,0.3); perspective: 200px; } #i1:hover{ transform: rotateX(45deg); } #i2:hover{ transform: rotateY(45deg); } #i3:hover{ transform: rotate(45deg); } WEB/CSS 2017. 8. 28.

• 

  [CSS] ch05-02. scale 02_scale.html 02_scale.css @CHARSET "UTF-8"; div{ margin: 50px; width: 150px; height: 190px; background-color: rgba(0,0,255,0.3); } img:hover{ transform: scale(0.7,1.2); } WEB/CSS 2017. 8. 28.