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

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

조회 568회 댓글 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 압축은 서버관리자에게 요청하면 됩니다.

** 참고 **





  • 페이스북으로 공유
  • 트위터로  공유
  • 구글플러스로 공유
전체 14건 1 페이지
  • profile_image 뚱뚱하게 나온다고 자르면 더 보기가 좋지 않다. 입이나 코가 잘리는 경우 그렇다. 뚱뚱하게 나오면 보기가 좋지 않고 그래서 비율에 맞게 처리해 주는 방법이 제일 좋은데 아래 방법을 사용 하면 된다. 알아보기 쉽게 인라인으로 작성함. 이미지 주변에 옅은 테두리를 추가하고 이미지가 짤리지 않도록 조정하기 위해서 먼저 이미지를 감싸는 div 태그에 테두리(border)를 추가하고 이미지의 object-fit 속성을 contain으로 변경하여 이미지가…
  • profile_image 글자가 많을 경우 밀리지 않고 뒤쪽이 보이지 않게 처리하려면 텍스트가 넘치는 부분을 숨기는 CSS 속성인 overflow를 사용할 수 있습니다. 여기에 text-overflow 속성을 추가하여 넘치는 텍스트를 어떻게 처리할지 결정할 수 있으며 white-space 속성을 사용하여 텍스트가 한 줄에 표시되도록 설정할 수 있습니다.width 속성을 설정하여 <div>의 너비를 제한하는 것도 중요합니다. 이를 통해 텍스트가 넘치는 부분을 …
  • 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) 패딩 주기 입니다.기본은 너무 바짝 붙어서 패딩을 주었으면 하는데 위 이미지 참고 하면 됩니다.마진과 패딩 가끔 사용하다 보니 얼마나 헷갈리는지... 패딩은 겨울옷 패딩을 생각하면 되고 마진은 밖에서 남겨 먹는거라~