CSS minify (최소화)

css 파일 구성방식은 아래와 같이 한줄형 또는 들여쓰기를 사용하여 속성마다 한줄씩 표기하는 방식등이 있습니다.

 

한줄형  :

공백이 적기 때문에 파일 용량이 들여쓰기 보다 비교적 작지만 가독성이 떨어진다.

div { background: red; color: white; font-size: 16px; }

 

 들여쓰기

속성 마다 명확한 값을 확인 할 수 있기때문에 가독성은 좋지만 빈공백이 많아서 파일 용량이 한줄형 보다 크다.

div { 
	background: red; 
	color: white; 
	font-size: 16px; 
}

 

작업 파일로 사용할 경우 들여쓰기를 추천하며, 일반적으로 프로젝트를 진행할 경우 공동 작업으로 파일을 공유하여 사용하기 때문에 코드를 명확히 알 수 있는 들여쓰기가 작업이 용이해 보입니다. 코드 작성 방식은 개인 취향일 수 있으므로 팀원들 간 협의를 통하여 결정하는 것을 추천 드립니다.

 

작업이 완료되었다면 서버에 완료된 파일을 배포해야 합니다.

배포 시 파일을 읽는 것은 브라우저 엔진이고 사람과 같이 눈으로 식별하는 가독성을 필요로 하지 않기 때문에 파일 내 필요없는 공백은 모두 삭제하는 것이 효율 적입니다.

 

공백을 하나씩 삭제 할 수 도 있지만, 수천 줄의 코드라면  로직을 구성하는 일보다 힘든 작업이 될 겁니다.

그래서 오늘은 우리의 수거로움을 덜기 위해 css minify generator에 대하여 알아보겠습니다.

 

https://www.toptal.com/developers/cssminifier/

CSS Minifier

 

https://beautifytools.com/css-minifier.php

Online CSS Minifier - BeautifyTools.com

 

https://www.cleancss.com/css-minify/

CSS Minify

 

모두 사용하는 방식은 비슷하며,  기존  css 파일을 업로드 하고 변환 후 다시 css 파일로 다운로드 해서 웹페이지에 적용하세요.