페이지 리프레시 없이 CSS만 리로드하기

웹페이지 개발할 때 CSS 수정하고 확인을 위해서 수시로 페이지 리프레시를 하다보면 무척 귀찮습니다. 더욱이 AJAX를 사용하는 경우에는, 작업중인 화면을 보기 위해 여러 번 클릭을 해서 들어가야 하는 번거로움도 있고요.
이럴 때 편하게 페이지 리프레시 없이 CSS만 다시 불러올 수 있는 방법을 소개합니다.

파이어폭스의 부가기능(도구 > 부가기능) 메뉴로 들어가서, “CSS”로 검색을 해보면 다양한 플러그-인 들을 찾을 수 있습니다.
css reloader search result

이 중에서 마음에 드는 녀석을 골라서 사용하면 되겠습니다.
물론 크롬에도 비슷한 부가기능 들을 쉽게 찾을 수 있습니다.

그런데, 이미 Web Developer Toolbar를 사용하고 있다면, 굳이 새로운 플러그-인을 설치할 필요가 없습니다.
웹 디벨로퍼 툴바에서 CSS > Reload Likned Style Sheets 메뉴를 실행하면, 페이지를 새로고침하지 않고 CSS 파일만 새로 불러와서 수정된 내용을 바로 확인 할 수 있습니다.

그러나 매번 두 번씩 클릭을 해야하는 것이 여간 불편한 것이 아닙니다. 이 점에 대해서도 대비책이 있는데, 그것은 바로 단축키를 지정하는 것입니다.
툴바에서 Options > Options 메뉴를 실행하고, Keyboard 탭으로 이동합니다.

Keyboard options

“Add” 버튼을 클릭하고, “Reload Linked Style Sheets” 기능에 대한 단축키를 설정해 주면 됩니다.

Add keyboard shortcut

이제부터는 여러 번 클릭할 필요 없이, 단축키로 빠르게 테스트가 가능합니다.

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 항목은 *(으)로 표시합니다