캠핑과 개발

웹 제작시 필요한 아이콘을 무료로 제공해줍니다.


홈페이지는  

http://www.alessioatzeni.com/metrize-icons/

 

다운로드를 받으시면 해당 압축파일 안에 해당 아이콘이 있으며 

PSD(Single Shape Layer), SVG(Single Icon 512 * 512), EPS, AI, PDF, Web Front

과 같은 형태의 파일로 들어있습니다.


PSD 파일이 존재하니 다른 형태로 추가 아이콘을 제작할 수도 있으며 매우 유용한 사이트입니다.




Metrize_Icons.zip



PDF 문서를 웹상에서 표출 할 수 있게 해주는 플로그인입니다.

일반적으로 바로 링크를 걸면 브라우저에서 볼 수는 있지만 아래와 같이 UI및 간단한 기능을 제공해주는 사이트도 있습니다.



1. PDF.js

- site : http://mozilla.github.io/pdf.js/

- demo : http://mozilla.github.io/pdf.js/web/viewer.html


2. PDFObject

- site : https://pdfobject.com/

- demo : https://pdfobject.com/#examples


HTML5의 canvas태그를 이용하여 생성된 객체를 튕기는 예제입니다.






전체소스

  1. <!DOCTYPE html>
  2. <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  3. canvas {
  4.     border:1px solid #d3d3d3;
  5.     background-color: #f1f1f1;
  6. }
  7. </head>
  8. <body onload="startGame()">
  9.  
  10. var myGamePiece;
  11.  
  12. function startGame() {
  13.     myGamePiece = new component(30, 30, "red", 80, 75);
  14.     myGameArea.start();
  15. }
  16.  
  17. var myGameArea = {
  18.     canvas : document.createElement("canvas"),
  19.     start : function() {
  20.         this.canvas.width = 480;
  21.         this.canvas.height = 270;
  22.         this.context = this.canvas.getContext("2d");
  23.         document.body.insertBefore(this.canvas, document.body.childNodes[0]);
  24.         this.interval = setInterval(updateGameArea, 20);        
  25.     },
  26.     stop : function() {
  27.         clearInterval(this.interval);
  28.     },    
  29.     clear : function() {
  30.         this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
  31.     }
  32. }
  33.  
  34. function component(width, height, color, x, y, type) {
  35.     this.type = type;
  36.     this.width = width;
  37.     this.height = height;
  38.     this.x = x;
  39.     this.y = y;    
  40.     this.speedX = 0;
  41.     this.speedY = 0;    
  42.     this.gravity = 0.1;
  43.     this.gravitySpeed = 0;
  44.     this.bounce = 0.6;
  45.     this.update = function() {
  46.         ctx = myGameArea.context;
  47.         ctx.fillStyle = color;
  48.         ctx.fillRect(this.x, this.y, this.width, this.height);
  49.     }
  50.     this.newPos = function() {
  51.         this.gravitySpeed += this.gravity;
  52.         this.x += this.speedX;
  53.         this.y += this.speedY + this.gravitySpeed;
  54.         this.hitBottom();
  55.     }
  56.     this.hitBottom = function() {
  57.         var rockbottom = myGameArea.canvas.height - this.height;
  58.         if (this.y > rockbottom) {
  59.             this.y = rockbottom;
  60.             this.gravitySpeed = -(this.gravitySpeed * this.bounce);
  61.         }
  62.     }
  63. }
  64.  
  65. function updateGameArea() {
  66.     myGameArea.clear();
  67.     myGamePiece.newPos();
  68.     myGamePiece.update();
  69. }
  70.  
  71.  
  72. <p>The bouncing property indicates how strong a component will bounce back, after hitting the ground.</p>
  73.  
  74. <p>Set the bouncing property to a decimal number between 0 and 1.</p>
  75.  
  76. <p>0 = no bouncing.</p>
  77. <p>1 = will bounce all the way back.</p>
  78.  
  79. </body>
  80. </html>
  81.  


http://www.w3schools.com/games/game_bouncing.asp

HTML5의 canvas태그를 이용하여 생성된 객체 중력 예제입니다.





  1. <!DOCTYPE html>
  2. <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  3. canvas {
  4.     border:1px solid #d3d3d3;
  5.     background-color: #f1f1f1;
  6. }
  7. </head>
  8. <body onload="startGame()">
  9.  
  10. var myGamePiece;
  11.  
  12. function startGame() {
  13.     myGamePiece = new component(30, 30, "red", 80, 75);
  14.     myGameArea.start();
  15. }
  16.  
  17. var myGameArea = {
  18.     canvas : document.createElement("canvas"),
  19.     start : function() {
  20.         this.canvas.width = 480;
  21.         this.canvas.height = 270;
  22.         this.context = this.canvas.getContext("2d");
  23.         document.body.insertBefore(this.canvas, document.body.childNodes[0]);
  24.         this.interval = setInterval(updateGameArea, 20);        
  25.     },
  26.     stop : function() {
  27.         clearInterval(this.interval);
  28.     },    
  29.     clear : function() {
  30.         this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
  31.     }
  32. }
  33.  
  34. function component(width, height, color, x, y, type) {
  35.     this.type = type;
  36.     this.width = width;
  37.     this.height = height;
  38.     this.x = x;
  39.     this.y = y;    
  40.     this.speedX = 0;
  41.     this.speedY = 0;    
  42.     this.gravity = 0.05;
  43.     this.gravitySpeed = 0;
  44.     this.update = function() {
  45.         ctx = myGameArea.context;
  46.         ctx.fillStyle = color;
  47.         ctx.fillRect(this.x, this.y, this.width, this.height);
  48.     }
  49.     this.newPos = function() {
  50.         this.gravitySpeed += this.gravity;
  51.         this.x += this.speedX;
  52.         this.y += this.speedY + this.gravitySpeed;
  53.         this.hitBottom();
  54.     }
  55.     this.hitBottom = function() {
  56.         var rockbottom = myGameArea.canvas.height - this.height;
  57.         if (this.y > rockbottom) {
  58.             this.y = rockbottom;
  59.         }
  60.     }
  61. }
  62.  
  63. function updateGameArea() {
  64.     myGameArea.clear();
  65.     myGamePiece.newPos();
  66.     myGamePiece.update();
  67. }
  68.  
  69.  
  70. <p>The red square will stop falling when it hits the floor.</p>
  71.  
  72. </body>
  73. </html>


출처 :

http://www.w3schools.com/games/game_gravity.asp

HTML5의 canvas태그를 이용하여 생성된 객체를 회전 시키는 예제입니다.


  1. <!DOCTYPE html>
  2. <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  3. canvas {
  4.     border:1px solid #d3d3d3;
  5.     background-color: #f1f1f1;
  6. }
  7. </head>
  8. <body onload="startGame()">
  9.  
  10. var myGamePiece;
  11.  
  12. function startGame() {
  13.     myGamePiece = new component(30, 30, "red", 80, 75);
  14.     myGameArea.start();
  15. }
  16.  
  17. var myGameArea = {
  18.     canvas : document.createElement("canvas"),
  19.     start : function() {
  20.         this.canvas.width = 480;
  21.         this.canvas.height = 270;
  22.         this.context = this.canvas.getContext("2d");
  23.         document.body.insertBefore(this.canvas, document.body.childNodes[0]);
  24.         this.frameNo = 0;
  25.         this.interval = setInterval(updateGameArea, 20);
  26.     },
  27.     stop : function() {
  28.         clearInterval(this.interval);
  29.     },    
  30.     clear : function() {
  31.         this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
  32.     }
  33. }
  34.  
  35. function component(width, height, color, x, y) {
  36.     this.width = width;
  37.     this.height = height;
  38.     this.angle = 0;
  39.     this.x = x;
  40.     this.y = y;    
  41.     this.update = function() {
  42.         ctx = myGameArea.context;
  43.         ctx.save();
  44.         ctx.translate(this.x, this.y);        
  45.         ctx.rotate(this.angle);
  46.         ctx.fillStyle = color;
  47.         ctx.fillRect(this.width / -2, this.height / -2, this.width, this.height);        
  48.         ctx.restore();    
  49.     }
  50. }
  51.  
  52. function updateGameArea() {
  53.     myGameArea.clear();
  54.     myGamePiece.angle += 1 * Math.PI / 180;    
  55.     myGamePiece.update();
  56. }
  57.  
  58.  
  59. <p>The red square will rotate one degree every time the gamearea updates (50 times per second).</p>
  60.  
  61. <p>Note: The angle property must be a radian. You can convert degrees into radians by using the formula x * Math.PI / 180</p>
  62. </body>
  63. </html>
  64.  


출처 :

http://www.w3schools.com/games/game_rotation.asp

HTML5의 canvas를 이용하여 객체를 생성한 후 해당 객체를 키보드 이벤트를 통하여 이동하는 예제입니다.

키보드의 방향키 ← → ↑↓를 이용하여 이동 할 수 이동합니다.



  1. <!DOCTYPE html>
  2. <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  3. canvas {
  4.     border:1px solid #d3d3d3;
  5.     background-color: #f1f1f1;
  6. }
  7. </head>
  8. <body onload="startGame()">
  9.  
  10. var myGamePiece;
  11.  
  12. function startGame() {
  13.     myGamePiece = new component(30, 30, "red", 225, 225);
  14.     myGameArea.start();
  15. }
  16.  
  17. var myGameArea = {
  18.     canvas : document.createElement("canvas"),
  19.     start : function() {
  20.         this.canvas.width = 480;
  21.         this.canvas.height = 270;
  22.         this.context = this.canvas.getContext("2d");
  23.         document.body.insertBefore(this.canvas, document.body.childNodes[0]);
  24.         this.frameNo = 0;
  25.         this.interval = setInterval(updateGameArea, 20);
  26.         window.addEventListener('keydown', function (e) {
  27.             e.preventDefault();
  28.             myGameArea.keys = (myGameArea.keys || []);
  29.             myGameArea.keys[e.keyCode] = (e.type == "keydown");
  30.         })
  31.         window.addEventListener('keyup', function (e) {
  32.             myGameArea.keys[e.keyCode] = (e.type == "keydown");
  33.         })
  34.     },
  35.     stop : function() {
  36.         clearInterval(this.interval);
  37.     },    
  38.     clear : function() {
  39.         this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
  40.     }
  41. }
  42.  
  43. function component(width, height, color, x, y, type) {
  44.  
  45.     this.type = type;
  46.     this.width = width;
  47.     this.height = height;
  48.     this.speed = 0;
  49.     this.angle = 0;
  50.     this.moveAngle = 0;
  51.     this.x = x;
  52.     this.y = y;    
  53.     this.update = function() {
  54.         ctx = myGameArea.context;
  55.         ctx.save();
  56.         ctx.translate(this.x, this.y);
  57.         ctx.rotate(this.angle);
  58.         ctx.fillStyle = color;
  59.         ctx.fillRect(this.width / -2, this.height / -2, this.width, this.height);
  60.         ctx.restore();    
  61.     }
  62.     this.newPos = function() {
  63.         this.angle += this.moveAngle * Math.PI / 180;
  64.         this.x += this.speed * Math.sin(this.angle);
  65.         this.y -= this.speed * Math.cos(this.angle);
  66.     }
  67. }
  68.  
  69. function updateGameArea() {
  70.     myGameArea.clear();
  71.     myGamePiece.moveAngle = 0;
  72.     myGamePiece.speed = 0;
  73.     if (myGameArea.keys && myGameArea.keys[37]) {myGamePiece.moveAngle = -1; }
  74.     if (myGameArea.keys && myGameArea.keys[39]) {myGamePiece.moveAngle = 1; }
  75.     if (myGameArea.keys && myGameArea.keys[38]) {myGamePiece.speed= 1; }
  76.     if (myGameArea.keys && myGameArea.keys[40]) {myGamePiece.speed= -1; }
  77.     myGamePiece.newPos();
  78.     myGamePiece.update();
  79. }
  80.  
  81. <p>Make sure the gamearea has focus, and use the arrow keys to move the red square around.</p>
  82.  
  83. </body>
  84. </html>
  85.  



참고 : 

http://www.w3schools.com/games/game_movement.asp

'DEVELOPMENT > HTML & CSS' 카테고리의 다른 글

[canvas] HTML5의 canvas 객체의 중력 예제  (0) 2016.06.01
[canvas] 2D를 이용한 객체 회전  (0) 2016.06.01
CSS framework  (0) 2014.01.17
[TIP] <IMG> 태그의 ALT에 줄바꿈 하기  (0) 2009.10.29
DOCTYPE.  (0) 2009.10.28

css framework 라이브러리를 제공해주는 사이트




이미지 태그의 속성인 ALT 속성의 내용중에 많은 양이 있을 경우 줄바꿈을 해야 되는 경우가 있다 그럴때 &#13; 를 사용하면 된다..

<IMG SRC="image.gif" alt="보통 이미지 입니다. &#13; 보통 이미지 입니다." />

'DEVELOPMENT > HTML & CSS' 카테고리의 다른 글

[canvas] 2D를 이용한 객체 회전  (0) 2016.06.01
[canvas] 키보드를 이용한 객체 이동  (0) 2016.06.01
CSS framework  (0) 2014.01.17
DOCTYPE.  (0) 2009.10.28
CSS 작성 기초 - 선택자 사용하기  (0) 2009.10.28

DOCTYPE.

DEVELOPMENT/HTML & CSS2009. 10. 28. 01:07

HTML 편집기를 이용하여 html 파일을 생성하면 상단에 DOCTYPE이라고 선언된 걸 볼 수가 있다. 이는 브라우저가 어떤 방식으로 렌더링 해야 하는지를 알려주는 역활을 한다.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 문서에 완벽한 DOCTYPE을 지정한 경우에 보통 표준 호환 모드로 화면을 표시하고,
HTML 문서에 Strict DTD를 지정한 경우는 표준 모드로 동작을 하게 된다. 또 한 transitional DTD를 지정한 경우는 비표준 확장 모드로 동작을 하게 된다.

만약, DOCTYPE을 선언하지 않았거나 잘못 쓴 경우는 HTML 문서나 XHTML 문서 모두 비표준 확장 모드로 표시가 된다. 하지만 모든 브라우저가 이러한 규칙을 따르는 것이 아니지만 가급적으면 사용하도록 하는것이 좋다. 
사이트 내의 모든 페이지에 완벽한 DOCTYPE 선언을 하고 HTML 문서일 경우에는 strict DTD를 사용하는 것이 좋다.

그리고 XHTML 문서를 작성하게 되면 DOCTYPE 선언 앞 부분에 XML 선언을 추가 해줘야 되는데 하지만 IE 6 에서는 DOCTYPE 선언이 제일 앞에 오지 않으면 자동으로 비표준 모드로 동작을 하기 때문에 페이지를 XML 문서로 서비스 하는 경우가 아니라면 XML 선언은 하지 않는게 좋다.    

<?xml version="1.0" encoding="utf-8"?>


   


선택자 활용 기초

1. 타입선택자(type selector)
타입 선택자는 앵커, 문단, 테이블등과 같이 제목 엘리먼트 같은 특정 유형의 엘리먼트를 지정하는것
p {color: block}
a {text-decaration: underline}
h1 {font-weight: blod}

2. 하위 선택자(descendant selector)
특정 엘리먼트나 엘리먼트 묶음의 하위에 나오는 엘리먼트를 지정하는것으로, 하위 선택자는 두 개의 선택자를 공백으로 분리해서 저장

li img {cursor: pointer;}

3. ID 선택자
ID선택자란 엘리먼트를 아이디 값으로 스타일일 지정하는 것으로 선택자는 #문자를 사용한다.

#title {font-align: center;}

4. 클래스 선택자
클래스 선택자란 엘리먼트의 클래스명을 선택하여 지정하는 방법으로 선택자는 .문자를 사용한다.

.intro {boarder-style: solid;}

5. 유사 클래스 선택자
문서 구조를 기반으로 엘리먼트를 지정하는 것이 아니라, 폼 요소나 링크의 다양한 상태에 대해서 스타일을 지정해야 하는 경우가 있다. 유사 클래스 선택자를 사용하면 이런 작업을 할수 있다.

/* 방문하지 않은 링크를 파란색으로 표시 */
a:link {color: blue;}

/* 방문하지 않은 링크를 녹색으로 표시 */
a:link {color: green;}

/* 마우스가 올라오거나 클릭했을 때 링크를 빨간색으로 표시 */
a:hover, a:active {color: red;}

/* 테이블 행에 마우스가 올라올 때 빨간색으로 표시 */
tr:hover {color: red;}

/* 입력요소에 포커스가 갔을 때 노란색으로 표시 */
input:focus {background-color: yellow;}

6. 전체 선택자

와일드 카드처럼 모든 가능한 엘리먼트를 지정하는데 사용한다.
전체 선택자는 * 문자를 사용하며 주로 페이지 안에 모든 엘리먼트에 스타일을 지정할 때 사용

* {
    padding: 0;
    margin: 0
}


'DEVELOPMENT > HTML & CSS' 카테고리의 다른 글

[canvas] 2D를 이용한 객체 회전  (0) 2016.06.01
[canvas] 키보드를 이용한 객체 이동  (0) 2016.06.01
CSS framework  (0) 2014.01.17
[TIP] <IMG> 태그의 ALT에 줄바꿈 하기  (0) 2009.10.29
DOCTYPE.  (0) 2009.10.28