리눅스에서 공백제거 css 파일 용량 줄이는 방법(min 파일 만들기) > CSS
CSS

리눅스에서 공백제거 css 파일 용량 줄이는 방법(min 파일 만들기)

조회 532회 댓글 0건

공백을 제거 하는 방법 입니다.

이렇게 되면 줄바꿈 문자도 같이 버리는 작업이 들어가기 때문에 한줄로 나옵니다. 이에 대한 프로그램은 vscode에서 Beautify 확장 프로그램을 사용하면 들여쓰기와 줄바꿈을 해줍니다. 이런 역활은 웹사이트에도 있으니 "온라인 Beautify" 같은 키워드로 검색하면 쉽게 찾을 수 있습니다.


CentOS에서 아래 명령으로 설치 하고 명령을 내리면 min 파일을 만들 수 있습니다.

yum -y install yuicompressor

yuicompressor s.css -o s.min.css


웹서버를 직접 관리 할 수 있다면 서버 설정으로 자동으로 gzip 으로 압축하여 전송하는 방법이 있습니다.


* 참고한 곳

https://00110022.xyz/seo/how-to-minify-css-and-js-in-linux 


* 옵션
자바스크립트 옵션
   --nomunge 축소만 가능, 난독화하지 않음
   --preserve-semi 모든 세미콜론 유지
   --disable-optimizations 모든 마이크로 최적화 비활성화

입력 파일을 지정하지 않으면 기본값은 stdin입니다. 이 경우 '유형'
옵션이 필요합니다. 그렇지 않으면 'type' 옵션은 입력이
파일 확장자가 'js'도 'css'도 아닙니다.

아래를 보면 압축율이 높다고 합니다.
8b9997089e635c65221977a2d872fbca_1657976607_656.png
 
이렇게 용량을 줄이고.
gzip으로 압축을 하면 용량이 여기서 훨씬 더 줄어 듭니다. 이건 웹서버 하는 일입니다.
일반 프로그래머나 디자이너 퍼블리셔는 여기까지만 가능하고 gzip이나 brotli 압축은 서버관리자에게 요청하면 됩니다.

** 참고 **





  • 페이스북으로 공유
  • 트위터로  공유
  • 구글플러스로 공유
전체 12건 1 페이지
  • profile_image 반응형으로 만들기 좋은 부트스트랩에 관한 툴이 있는 사이트입니다.가끔씩 사용할때 레이아웃이 생각나지 않은 경우 이용하면 좋습니다.지원하는 버전은 현재 버전보다 낮은 4버전 이긴 하지만 기본적인것은 동일하기 때문에 사용하는데는 큰 문제는 없습니다. * 찾을 때 검색한 키워드bootstrap design toolbootstrap builder* 부트스트랩 레이아웃 관련된 사이트 https://www.bootstrapcdn.com/https://bo…
  • profile_image 현재 페이지에서 표현이 되고 있는 스타일을 간단하게 자바스크립트로 볼 수 있는 방법입니다.const fontSize = Number(window.getComputedStyle(document.body).getPropertyValue('font-size').match(/\d+/)[0])위에대한 설명입니다.window.getComputedStyle(document.body) - HTML BODY에 대한 모든 스타일을 얻으려면getPropertyVa…
  • profile_image 글자색을 지정하는 방법에 대한 것입니다. font-color 같은것을 사용해도 되겠지만 가능하면 프레임워크 사용할때는 프레임워크에서 지웒는것이 있는지 찾아본 다음 있으면 그것을 사용하는것이 좋기 때문입니다.텍스트 컬러에 대한 표준적인 형태로 잘 정리된 표 입니다.
  • profile_image 일반적으로 제목이 길면 2줄로 나오게 됩니다. 너무 긴 경우 더 나올수도 있겠지요.그런 경우 백엔드에서 잘라서 보여주기도 하곤 합니다.이런 경우 css 처리 방법에선 hidden을 주면 됩니다.부트스트랩에선 overflow-hidden 클래스만 추가해주면 기본적인 길이에서 넘치게 되면 보이지 않게 처리를 합니다.높이게 대한것과 길이에 대한 부분은 필요하면 style 속성을 추가해서 해주면 됩니다.a 태그도 필요하면 style 줘서 높이와 길이 …
  • profile_image 부트스트랩 배지(badge) 패딩 주기 입니다.기본은 너무 바짝 붙어서 패딩을 주었으면 하는데 위 이미지 참고 하면 됩니다.마진과 패딩 가끔 사용하다 보니 얼마나 헷갈리는지... 패딩은 겨울옷 패딩을 생각하면 되고 마진은 밖에서 남겨 먹는거라~
  • profile_image 다음에 찾을때 필요할듯 하여 올림.!!반응형을 처리 하는 방식에 대한 이름(명칭) 입니다. 화면의 크기와 더불어 요즘은 해상도가 커지면서 글자 크기에대 한 부분도 같이 신경써야 합니다. squish, scroll, collapse rows, collapse columns 방식의 반응형 모델 입니다.
  • profile_image 버튼을 클릭하면 아작스를 통해서 서버로 보낸다음 버튼의 색을 변경하고 명칭도 변경하여 목록으로 이동 할 수 있게 하는 기능을 만들다 보니 이런것이 필요하게 되었습니다.처음의 버튼은 '글 삭제하기'였습니다.그리고 클릭하여 정상적으로 삭제가 되면 메시지를 하나 보여주고 '정상적으로 삭제 되었습니다.' 그리곤 아래의 jquery 명령으로 버튼를 변경해 줍니다.  - 버튼의 명칭을 변경합니다.  - onclick 특성을 줘서 클릭하면 주소를 이동합니다…