프로그램/html52014. 4. 29. 11:39

크롬(chrome) 브라우저에서 html5 웹 사이트 확인하기

Chrome 웹 스토어 확장 프로그램 바로가기 : https://chrome.google.com/webstore/detail/html5-powered/klleofbhhghgacodijohlacbfhfcefom

크롬 브라우저에서 지원하는 확장 프로그램을 설치하면 쉽게 웹 사이트가 html5로 만들어졌는지를 확인할 수 있다.

확장 프로그램 이름 : HTML5 Powered

 

1. 크롬을 실행한 후 오른쪽 위에 있는 Chrome 맞춤설정 및 제어 아이콘(줄무늬 모양)을 눌러 나타난 메뉴 중 도구>확장 프로그램을 선택한다. 

 

 

 

2. 확장 프로그램 아래 더 많은 확장 프로그램 다운로드를 누른다.

 

 

 

3. Chrome 웹 스토어 화면이 실행되면 왼쪽 상단에 검색입력란에 html5 powered를 입력후 검색한다.(엔터)

- 검색이 되지 않으면 아래 링크를 클릭해서 바로 접속을 한다.

Chrome 웹 스토어 확장 프로그램 바로가기 : https://chrome.google.com/webstore/detail/html5-powered/klleofbhhghgacodijohlacbfhfcefom 

 

 

 

 4. 오른쪽 상단의 + 무료 버튼을 클릭한다.

 

 

 

 

5. HTML5 Powered 추가한다.

 

 

 

 

6. 추가가 완료되면 알려준다.

 

 

 

 

7. 추가되었다. 

 

 

 

 

8. 확장 프로그램 목록에서 추가된 것을 확인할 수 있다.

 

 

 

 

9. html5로 만들어진 사이트에 접속해보면 오른쪽 상단에 HTML5 로고를 볼 수 있다.

 

 

 

더보기>

- 크롬(Chrome) 브라우저 시작 빈 페이지 설정

- 크롬(Chrome) 브라우저 새탭 빈 페이지 설정

Posted by 은둔고수
프로그램/html52013. 12. 10. 17:27

html5 canvas 사각형 선 그리기 strokeRect

 

<!DOCTYPE HTML>
<html>
 <head>
  <title>HTML5 Canvas 사각형 선 그리기</title>
  <script type="text/javascript">
  var ctx;

  function init()
  {
   ctx = document.getElementById('canvas').getContext('2d');

   ctx.lineWidth = 1;
   ctx.strokeStyle = "rgb(0, 0, 0)";
   ctx.strokeRect(100, 50, 50, 50); // 사각형 그리기
  }
  </script>
 </head>
<body onLoad="init()">
 <canvas id="canvas" width="400" height="140" style="border:1px solid;">
  이 브라우저는 HTML5의 canvas 요소를 지원하지 않습니다.
 </canvas>
</body>
</html>

 

 

설명>

ctx.lineWidth = "선 굵기";

ctx.strokeStyle = "선 색상";

ctx.strokeRect(x위치, y위치, 넓이, 높이);

 

사각형 그리기 더보기

Posted by 은둔고수
프로그램/html52013. 12. 10. 17:03

html5 canvas 사각형 채워서 그리기 fillRect

 

<!DOCTYPE HTML>
<html>
 <head>
  <title>HTML5 Canvas 사각형 채워서 그리기</title>
  <script type="text/javascript">
  var ctx;

  function init()
  {
   ctx = document.getElementById('canvas').getContext('2d');

   ctx.fillStyle = "rgb(0, 0, 0)";
   ctx.fillRect(100, 50, 50, 50); // 사각형 그리기
  }
  </script>
 </head>
<body onLoad="init()">
 <canvas id="canvas" width="400" height="140" style="border:1px solid;">
  이 브라우저는 HTML5의 canvas 요소를 지원하지 않습니다.
 </canvas>
</body>
</html>

 

설명>

ctx.fillRect(x위치, y위치, 넓이, 높이);

 

사각형 그리기 더보기

Posted by 은둔고수
프로그램/html52013. 12. 10. 16:35

html5 canvas text font color 글자 색상 fillStyle

 

<!DOCTYPE HTML>
<html>
 <head>
  <title>HTML5 Canvas Text Font Color</title>
  <script type="text/javascript">
  var ctx;

  function init()
  {
   ctx = document.getElementById('canvas').getContext('2d');
   ctx.font = "20px Gulim";
   ctx.fillText("Hello World - 보통 20px 굴림", 20, 30);
   ctx.font = "bold 20px Gulim";
   ctx.fillText("Hello World - 굵게 20px 굴림", 30, 60);
   ctx.font = "italic 20px Gulim";
   ctx.fillText("Hello World - italic 20px 굴림", 40, 90);
   ctx.font = "20px Gulim";
   ctx.fillStyle = "red";
   ctx.fillText("Hello World - 보통 20px 굴림", 50, 120);
  }
  </script>
 </head>
<body onLoad="init()">
 <canvas id="canvas" width="400" height="140" style="border:1px solid;">
  이 브라우저는 HTML5의 canvas 요소를 지원하지 않습니다.
 </canvas>
</body>
</html>

 

설명>

ctx.fillStyle = "색상";

ctx.fillStyle = "#ff0000";

ctx.fillStyle = "rgb(255, 0, 0)";

ctx.fillStyle = "red";

Posted by 은둔고수
프로그램/html52013. 12. 10. 15:42

html5 canvas text font 글자 fillText

<!DOCTYPE HTML>
<html>
 <head>
  <title>HTML5 Canvas Text Font</title>
  <script type="text/javascript">
  var ctx;

  function init()
  {
   ctx = document.getElementById('canvas').getContext('2d');
   ctx.font = "20px Gulim";
   ctx.fillText("Hello World - 보통 20px 굴림", 20, 30);
   ctx.font = "bold 20px Gulim";
   ctx.fillText("Hello World - 굵게 20px 굴림", 30, 60);
   ctx.font = "italic 20px Gulim";
   ctx.fillText("Hello World - italic 20px 굴림", 40, 90);
   ctx.font = "20px Gulim";
   ctx.fontStyle = "red";
   ctx.fillText("Hello World - 보통 20px 굴림", 50, 120);
  }
  </script>
 </head>
<body onLoad="init()">
 <canvas id="canvas" width="400" height="150" style="border:1px solid;">
  이 브라우저는 HTML5의 canvas 요소를 지원하지 않습니다.
 </canvas>
</body>
</html>

 

설명>

ctx.font = "글자 스타일(normal, italic, bold) 지정, 글자 크기, 글자 종류"; // 기본 normal

ctx.fillText("출력할 내용", x위치, y위치);

Posted by 은둔고수

티스토리툴바