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

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

조회 1,407회 댓글 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'도 아닙니다.

아래를 보면 압축율이 높다고 합니다.
리눅스에서 공백제거 css 파일 용량 줄이는 방법(min 파일 만들기)
 
이렇게 용량을 줄이고.
gzip으로 압축을 하면 용량이 여기서 훨씬 더 줄어 듭니다. 이건 웹서버 하는 일입니다.
일반 프로그래머나 디자이너 퍼블리셔는 여기까지만 가능하고 gzip이나 brotli 압축은 서버관리자에게 요청하면 됩니다.

** 참고 **





  • 페이스북으로 공유
  • 트위터로 공유
  • 구글플러스로 공유
전체 17건 1 페이지
  • 부트스트랩5 우측정렬, 좌측정렬, 중앙정렬, 세로 중앙정렬
    profile_image 정렬에 관한 부분 많이 사용할 부분에 테스트 한것입니다.부트스트랩5 용량 크다고 뭐라 하시는분도 있던데 제가 보기엔 일반 사이트 이정도면 큰것 절대 아닙니다.다른것 많이 사용하지 않고 부트스트랩5 위줄 잘 사용하면 충분이 예쁘고 반응형인 사이트 만드는데 충분 합니다.위 페이지의 결과에 대한 부트스트랩5 코드는 아래와 같습니다. <!DOCTYPE html> <html lang="ko"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0…
  • [부트스트랩5] 화면 중앙에 알림모달 띄우기
    profile_image 화면의 정 중앙에 알림 모달을 띄우는 방법입니다.이부분은 아래 modal-dialog-centered 부분이 추가 되면 자동처리가 되면 화면 위쪽에 보여주고 싶으면 이 클래스명만 제외 시키면 됩니다.<div class="modal-dialog modal-dialog-centered"> 아래는 테스트 해볼 수 있는 소스 입니다.그리고 중요 부분만 있지만 이건 BODY 안에 넣어 두기만 하면 되는것이라서 확인이 무척 간단 합니다.mt-5 부분이 최상위 div에 있는데 상단 부분을 좀 떨어 트리는 부분인데 중앙 정렬에선 필요한 부분은 아닙니다. 중앙 정렬이 아닐때 상단에 너무 붙으면 이부분을 추가해주고 그리고 더 …
  • [부트스트랩5] 모바일 해상도에 따라 위치 변경
    profile_image 부트스트랩이 반응형 이기 때문에 자동으로 처리가 되는 부분이 있습니다.여기선 이부분에서 나와야 되는 순서 문제로 조정한 부분에 대한 것으로 아래 이미지를 보시면 쉽게 이해가는 부분입니다. 아래는 부트스트랩5 테스트 한 소스 입니다.중요한 부분만 올립니다. 이정도면 사실상 다 올린것과 다름이 없는 부분입니다.<head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>PABBURI Bootstrap 5 Layout</title&…
  • html 이미지 태그에서 옆으로 커지는 이미지 처리는 가로 세로 비율이 맞지 않아 사람이 뚱뚱하게 나오는 현상
    profile_image 뚱뚱하게 나온다고 자르면 더 보기가 좋지 않다. 입이나 코가 잘리는 경우 그렇다. 뚱뚱하게 나오면 보기가 좋지 않고 그래서 비율에 맞게 처리해 주는 방법이 제일 좋은데 아래 방법을 사용 하면 된다. 알아보기 쉽게 인라인으로 작성함. 이미지 주변에 옅은 테두리를 추가하고 이미지가 짤리지 않도록 조정하기 위해서 먼저 이미지를 감싸는 div 태그에 테두리(border)를 추가하고 이미지의 object-fit 속성을 contain으로 변경하여 이미지가 전체적으로 보이도록 조정할 수 있습니다. 이미지의 가로 세로 비율을 유지하면서 너비는 100%로 설정하여 부모 요소의 너비에 맞추고 높이는 원하는 값으로 고정합니다. 이렇게 하면…
  • DIV 글자가 많을 경우 밀리지 않고 뒤쪽이 보이지 않게 처리 하는 방법
    profile_image 글자가 많을 경우 밀리지 않고 뒤쪽이 보이지 않게 처리하려면 텍스트가 넘치는 부분을 숨기는 CSS 속성인 overflow를 사용할 수 있습니다. 여기에 text-overflow 속성을 추가하여 넘치는 텍스트를 어떻게 처리할지 결정할 수 있으며 white-space 속성을 사용하여 텍스트가 한 줄에 표시되도록 설정할 수 있습니다.width 속성을 설정하여 <div>의 너비를 제한하는 것도 중요합니다. 이를 통해 텍스트가 넘치는 부분을 '...' (ellipsis)로 표시하도록 설정할 수 있습니다.아래의 코드 예시는 이러한 속성들을 사용하여 긴 텍스트가 넘칠 경우 '...'으로 표시하는 방법을 보여줍니다.  &l…
  • 부트스트랩 레이아웃 관련된 사이트
    profile_image 반응형으로 만들기 좋은 부트스트랩에 관한 툴이 있는 사이트입니다.가끔씩 사용할때 레이아웃이 생각나지 않은 경우 이용하면 좋습니다.지원하는 버전은 현재 버전보다 낮은 4버전 이긴 하지만 기본적인것은 동일하기 때문에 사용하는데는 큰 문제는 없습니다. * 찾을 때 검색한 키워드bootstrap design toolbootstrap builder* 부트스트랩 레이아웃 관련된 사이트 https://www.bootstrapcdn.com/https://bootstrap.build/apphttps://www.layoutit.com/https://bootsnipp.com/builder
  • 현재 페이지의 스타일 정보를 엊는 방법
    profile_image 현재 페이지에서 표현이 되고 있는 스타일을 간단하게 자바스크립트로 볼 수 있는 방법입니다.const fontSize = Number(window.getComputedStyle(document.body).getPropertyValue('font-size').match(/\d+/)[0])위에대한 설명입니다.window.getComputedStyle(document.body) - HTML BODY에 대한 모든 스타일을 얻으려면getPropertyValue('font-size') -글꼴 크기의 문자열 값을 얻으려면 예 : (16px)match(/\d+/)[0]) - 숫자 부분 만 얻으려면 예 : (16) - 문자열Number(…