Programming/HTML/CSS2015.04.28 11:08

부스트랩 무료 테마 모아둔 사이트

 - http://www.bootstrapstage.com/free-themes/



관리자 페이지 작업할때 쓰면 좋은 템플릿도 많다!! 나중에 참고하기~!


 




Posted by 시니^^
Programming/HTML/CSS2014.09.27 16:14

canvas 이용 머리쪽은 세모 아래쪽은 네모 대각선 그리기


  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title> canvas 이용 화살표 있는 대각선 그리기</title>
  5. </head>
  6. <body>
  7. <div style="width:402px;height:402px;border:1px solid;">
  8. <div style="position:absolute;"><canvas id="lineDiv1" height="400" width="400"></canvas></div>
  9. </div>
  10. <script type="text/javascript">
  11. function ArrowLine(id){
  12. this.headSize=10;
  13. this.endSize=6;
  14. this.canvas=document.getElementById(id);
  15. this.ctx=this.canvas.getContext("2d");
  16. this.ctx.lineWidth=1;
  17. this.ctx.strokeStyle='blue';
  18. this.ctx.fillStyle='blue';
  19. // var gradient=this.ctx.createLinearGradient(0,0,170,0);
  20. // gradient.addColorStop("0","red");
  21. // gradient.addColorStop("0.5","magenta");
  22. // gradient.addColorStop("1.0","blue");
  23. // this.ctx.strokeStyle=gradient;
  24. // this.ctx.fillStyle=gradient;
  25. };
  26. ArrowLine.prototype.draw=function(x1,y1,x2,y2){
  27. // draw the line
  28. this.ctx.beginPath();
  29. this.ctx.moveTo(x1,y1);
  30. this.ctx.lineTo(x2,y2);
  31. this.ctx.stroke();
  32. var radians = Math.atan((y2-y1)/(x2-x1));
  33. //Head
  34. headRadians = radians + ((x2>x1)?-90:90)*Math.PI/180;
  35. this.drawhead(this.ctx,x1,y1,headRadians);
  36. //End
  37. endRadians = radians + ((x2>x1)?90:-90)*Math.PI/180;
  38. this.drawEnd(this.ctx,x2,y2,endRadians);
  39. };
  40. ArrowLine.prototype.drawhead=function(ctx,x,y,radians){
  41. ctx.save();
  42. ctx.beginPath();
  43. ctx.translate(x,y);
  44. ctx.rotate(radians);
  45. ctx.moveTo(0,0);
  46. ctx.lineTo(5,this.headSize);
  47. ctx.lineTo(-5,this.headSize);
  48. ctx.closePath();
  49. ctx.restore();
  50. ctx.fill();
  51. };
  52. ArrowLine.prototype.drawEnd=function(ctx,x,y,radians){
  53. ctx.save();
  54. ctx.beginPath();
  55. ctx.translate(x,y);
  56. ctx.rotate(radians);
  57. ctx.moveTo(0,0);
  58. ctx.lineTo(-this.endSize,0);
  59. ctx.lineTo(this.endSize,0);
  60. ctx.lineTo(this.endSize,-this.endSize);
  61. ctx.lineTo(-this.endSize,-this.endSize);
  62. ctx.lineTo(-this.endSize,0);
  63. ctx.closePath();
  64. ctx.restore();
  65. ctx.fill();
  66. };
  67. var ArrowLine=new ArrowLine("lineDiv1");
  68. ArrowLine.draw(45,90,250,275);
  69. </script>
  70. </body>
  71. </html>


원본 참고 자료

http://stackoverflow.com/questions/16025326/html-5-canvas-complete-arrowhead

http://jsfiddle.net/m1erickson/Sg7EZ/


Posted by 시니^^
TAG Canvas, html
Programming/HTML/CSS2014.09.26 17:18

간단하게 프로트타입 웹앱 개발용


  1. <!-- 모바일용웹 -->
  2. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  3. <!-- 안드로이드 홈화면추가시 상단 주소창 제거 -->
  4. <meta name="mobile-web-app-capable" content="yes">
  5. <link rel="icon" href="/img/favicon.ico">
  6. <!-- ios홈화면추가시 상단 주소창 제거 -->
  7. <meta name="apple-mobile-web-app-capable" content="yes">
  8. <link rel="apple-touch-icon" href="/img/favicon.ico">



설명 잘되어있는 곳 링크

http://www.html5rocks.com/ko/mobile/fullscreen/


Posted by 시니^^
Programming/HTML/CSS2014.04.24 12:27

Bootstrap 보면 Glyphicons 를 무료로 제공해주는 걸 볼 수 있다 



Glyphicons

사용가능한 기호

Glyphicon Halflings 세트의 폰트 기반의 180 개의 아이콘을 포함하고 있습니다. 

Glyphicons Halflings 은 원래 무료가 아닙니다. 

하지만 제작자가 부트스트랩을 위해 무료로 사용할 수 있도록 만들었습니다. 

그에 대한 보답으로, 우리는 당신이 가능한 때에 Glyphicons 로 가는 링크를 포함하기를 요청드립니다.



자세한 내용과 아이콘리스트는 아래 사이트 참조

http://bootstrapk.com/BS3/components


그런데 사용하기 위해서는 bootstrap.min.css쪽에 아래 4개 font관련 파일 경로 사이트에 맞게 URL지정 해줘야된다

(Bootstrap2에서는 이미지파일로 했는데 3에서 변경된 듯함)



glyphicons-halflings-regular.ttf

glyphicons-halflings-regular.svg

glyphicons-halflings-regular.eot

glyphicons-halflings-regular.woff



그리고 나서 예제처럼 사용하면됨


그리고 여기서 사이즈와 색깔을 다르게 하고 싶으면 style 설정이나 h태그를 활용하면됨

그런데 진짜 이런것 보면 10년전 웹사이트 만들때보다 편해진 부분은 있는 것 같다.

하지만 디바이스가 다양해지면서 체크 할것은 더 많이 생기긴 했지만 ㅠㅠ

Posted by 시니^^
Programming/HTML/CSS2014.04.23 17:15


다음에서 제공하는 사이트

http://troy.labs.daum.net/




좀 된 사이트긴 한데 아이폰이랑 아이패드 모양으로 해주는 사이트 ㅎㅎ

http://www.ipadpeek.com/


그리고.. 크롬 웹스토어에서 확장 프로그램 사용 하는 방법도 있음

website test 또는 Responsive으로 검색하면 몇가지 나오는 듯


https://chrome.google.com/webstore/search/website%20test?hl=ko

https://chrome.google.com/webstore/search/Responsive?hl=ko



해상도 설정을 해줘야 되는 듯하지만 어느정도 셋팅해서 사용하면 아래꺼 깔끔한게 괜찮은듯...

https://chrome.google.com/webstore/detail/responsive-web-design-tes/objclahbaimlfnbjdeobicmmlnbhamkg?hl=ko







Posted by 시니^^
Programming/HTML/CSS2014.04.23 16:12

티스토리 툴바