카테고리 보관물: Tip

Front-End Development, Tip

LiveReload (소스 코드 변경시 브라우저 자동 Reload)

댓글 남기기

LiveReload 소스 코드 변경시 자동으로 브라우저를 Reload 해주는 편리한 툴 입니다.

사용을 위해서 간단한 1. 프로그램과 2. 브라우저 확장기능 설치 를 하시면 바로 사용 가능합니다.
Window, Mac OS 모두 지원합니다.

설치과정은 Window 기준 설명입니다.

  1. 브라우저 사이에서 변경사항을 전달해주는 프로그램 [다운로드] (windows 0.0.3 pre-alpha)
  2. 브라우저 확장기능 설치 [다운로드페이지] (파이어폭스, 크롬, 사파리 지원)

LiveReload 프로그램 화면

공식 홈페이지 http://livereload.com

Tip

Fix youtube iframe z-index

댓글 한 개

iframe으로 불러온 youtube 영상의 z-index가 말을 듣지 않아서 찾아보니,
영상 URL 뒤에 ?wmode=opaque 라는 옵션을 추가해 주어야 합니다.

<iframe src=”http://www.youtube.com/embed/96L1KafnqN4?wmode=opaque></iframe>

Front-End Development, Tip

SyntaxHighlighter

댓글 남기기

자바스크립트 와 CSS등…을 편집기처럼
스타일링 해서 게시글에 표현하고 싶을때 사용하시면 됩니다.

사용법은 아래와 같습니다.

  1. http://alexgorbatchev.com 에 접속한다.
  2. 우측 Download 페이지로 이동한다.
  3. 다운받은 파일에서 아래 파일을 자신의 경로에 맞춰서 페이지 <head> 내부 또는 </body> 위에 입력시킨다.
    <link href=”stylesheets/shCoreDefault.css” rel=”stylesheet” type=”text/css” /> (필수)
    <script src=”javascripts/lib/shCore.js” type=”text/javascript”></script> (필수)
    <script src=”javascripts/lib/shBrushJScript.js” type=”text/javascript”></script> (스크립트 스타일링시 필요)
    <script src=”javascripts/lib/shBrushCss.js” type=”text/javascript”></script> (CSS 스타일링시 필요)
    <script type=”text/javascript”>SyntaxHighlighter.all();</script>  (스타일링 실행 필요)
  4. 아래와 같이 js스타일링, css스타일링을 원하는 곳에 <pre class=”brush: js;”>, <pre class=”brush: css;”>태그로 감싸준다.
  5. 짠~! 잘나오면 성공~!

 

  function myFunction(){
    var foo;
    if(foo == true){

    }
 }