CSS, Javascript 파일 압축전송 및 PHP 구문 사용하기

css_js_compress.jpg
 tml 및 php는 gzip을 이용해서 압축전송하는 경우가 많습니다.

그런데, css와 javascript는 압축전송을 하기가 불편한 부분이 많습니다. 

mynufy를 이용해서 압축하는 방법이 있긴 하지만, 조금 불편한 부분이 있고, css와 js파일에서는 php의 기능을 사용하지 못하는 단점이 있습니다.

이러한 불편함을 간편하게 해결할 수 있는 방법을 소개합니다.


우선 .htaccess 파일에 아래 내용을 추가합니다.

<Files *.css>
Forcetype application/x-httpd-php
</files>

<Files *.js>
Forcetype application/x-httpd-php
</files>

위 내용은 css 와 js로 끝나는 확장자를 php형식으로 처리하라고 웹서버에 설정하는 기능입니다. 

아파치 설정자체에서 해도 무방하지만, 호스팅 사용자가 많기 때문에 아파치 설정보다는 .htaccess에 추가하는 방법이 더 수월합니다.


위와 같이 설정을 완료하였다면, 이제부터는 css와 js 파일은 모두 php로 해석을 하게 됩니다.

따라서 기존 그대로 파일을 두면 제대로 인식하지 못하기때문에, 각 파일마다 아래와 같은 내용을 추가하셔야 합니다.

- CSS 파일 -
<?php
header("Content-type: text/css; charset: UTF-8");  // css파일형태로 출력하도록 헤더설정
ob_start("ob_gzhandler"); // 압축전송을 수행하도록 설정
?>

- JS 파일 -
<?php
header("Content-type: text/javascript; charset: UTF-8");
ob_start("ob_gzhandler");
?>

이제부터는 모든 css와 js 파일을 압축하여 전송합니다. 

유용한 점은 css와js 파일 내부에서도 php 구문이 작동하기 때문에, 보다 동적으로 사이트를 만들 수 있습니다.

예를 들어 사용자에 따라서 css/javascript의 일부분을 변경하거나, 컨트롤 할 수 있습니다.

5분만 투자하면, 여러분의 사이트에도 금방 적용할 수 있습니다.



사이트에서 파일업로드 시 css 및 js 확장자 파일은 업로드 하지 못하도록 하셔야 합니다. 
주의하십시오

첨부파일

css_js_compress.jpg (57.2 KB)
0회 2012-02-29 14:00
|

댓글 2개

좋은 팁을 알게 되었네요. 감사합니다.
특히 css와 js 파일 내부에도 php를 사용할 수 있다는 것도 엄청 큰 매력 같은데
마지막에 빨간 글자로
파일업로드를 하지못하도록 주의해야 한다는 건 왜 그런건가요?
css 또는 js확장자로 업로드하고 실행시키면.. 큰일납니다. ^^

css확장자 말고 그냥 php파일을 css 또는 js 임포트하는 곳에 적어서 써도 상관은 없습니다...

위 예시를 응용해서 .nhn 파일을 php로 돌릴 수도 있고.. .gnu 와 같은 자신만의 확장자 파일을 php로 돌릴 수 있다는 이야기입니다. ^^
댓글을 작성하시려면 로그인이 필요합니다.

프로그램

태그 필터 (최대 3개) 전체 개발자 소스 기타 mysql 팁자료실 javascript php linux flash 정규표현식 jquery node.js mobile 웹서버 os 프로그램 강좌 썸네일 이미지관련 도로명주소 그누보드5 기획자 견적서 계약서 기획서 마케팅 제안서 seo 통계 서식 통계자료 퍼블리셔 html css 반응형 웹접근성 퍼블리싱 표준화 반응형웹 홈페이지기초 부트스트랩 angularjs 포럼 스크린리더 센스리더 개발자톡 개발자팁 퍼블리셔톡 퍼블리셔팁 기획자톡 기획자팁 프로그램강좌 퍼블리싱강좌
+
제목 글쓴이 날짜 조회
13년 전 조회 2,049
13년 전 조회 3,829
13년 전 조회 1,842
13년 전 조회 1,379
13년 전 조회 2,292
13년 전 조회 1,503
13년 전 조회 5,852
13년 전 조회 1,479
13년 전 조회 1,884
13년 전 조회 1,463
13년 전 조회 1,509
13년 전 조회 1,643
13년 전 조회 2,440
13년 전 조회 2,274
13년 전 조회 1,996
13년 전 조회 2,183
13년 전 조회 4,407
13년 전 조회 1,481
13년 전 조회 2,382
13년 전 조회 2,178
13년 전 조회 1,337
13년 전 조회 1,461
13년 전 조회 1,288
13년 전 조회 9,161
13년 전 조회 1,589
13년 전 조회 2,395
13년 전 조회 2,093
13년 전 조회 1,464
13년 전 조회 1,218
13년 전 조회 4,491
13년 전 조회 1,251
13년 전 조회 1,409
13년 전 조회 2,486
14년 전 조회 1,966
14년 전 조회 2,023
14년 전 조회 1,724
14년 전 조회 1,702
14년 전 조회 1,446
14년 전 조회 1,905
14년 전 조회 1,609
14년 전 조회 2,447
14년 전 조회 1,787
14년 전 조회 3,495
14년 전 조회 1,309
14년 전 조회 2,969
14년 전 조회 3,349
14년 전 조회 5,033
14년 전 조회 1,669
14년 전 조회 1,892
14년 전 조회 2,095
14년 전 조회 1,919
14년 전 조회 1,987
14년 전 조회 3,598
14년 전 조회 2,005
14년 전 조회 1,752
14년 전 조회 1,854
14년 전 조회 1,886
14년 전 조회 1,586
14년 전 조회 2,452
14년 전 조회 2,719
14년 전 조회 2,133
14년 전 조회 1,716
14년 전 조회 1,632
14년 전 조회 1,487
14년 전 조회 2,360
14년 전 조회 3,324
14년 전 조회 2,068
14년 전 조회 2,354
14년 전 조회 1,843
14년 전 조회 1,880
14년 전 조회 2,059
14년 전 조회 1,624
14년 전 조회 1,588
14년 전 조회 1,630
14년 전 조회 1,944
14년 전 조회 1,997
14년 전 조회 1,765
14년 전 조회 1,517
14년 전 조회 1,781
14년 전 조회 1,746
14년 전 조회 1,669
14년 전 조회 1,810
14년 전 조회 1,686
14년 전 조회 1,985
14년 전 조회 1,761
14년 전 조회 1,894
14년 전 조회 2,413
14년 전 조회 1,331
14년 전 조회 3,585
14년 전 조회 1,302
14년 전 조회 1,573
14년 전 조회 1,323
14년 전 조회 1,724
14년 전 조회 1,653
14년 전 조회 1,935
14년 전 조회 1,424
14년 전 조회 2,457
14년 전 조회 2,164
14년 전 조회 1,734
14년 전 조회 7,422