본문 바로가기
front-end/css

CSS 코드 경량화 minify

by Dreaming Coder 2021. 1. 15. 08:28

 


이 포스팅은 PC로 작성되었습니다.

모바일로 보시는 분들에게는 가끔

줄 바꿈이 어색하게 보일 수 있습니다.

 


 

 

 

지난 포스트

 

CSS, link와 import

이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 지난 포스트 CSS 트랜지션으로 좀 더 역동적이고 고급스러운 느낌 주기 이 포스팅은

gogogameboy.tistory.com

CSS의 지난 포스트에서는 웹사이트를 제작하려는 분들에게는 아주 중요한 내용인 link와 import,

외부 CSS 파일을 HTML 파일로 불러오는 방법을 배웠습니다.

 

이번에 공부할 내용도 웹사이트를 만드시려는 분들에게는 아주 중요한 내용 중에 하나입니다.

아래의 생활코딩 강의 영상을 함께 봐봅시다.

 

 

 

 

 

 

 

코드 경량화 minify를 해야하는 이유와 장점

 

항상 가져오는 생활코딩의 강의 영상이 아닌 다른 영상을 잠시 가져와봤습니다.

영어로 된 영상인데.. 저도 영어는 모릅니다. 그냥 영상의 '3분'과 '3분16초'만 보시면 됩니다.

 

코드 경량화를 함으로 인해 87KB였던 파일이 43KB가 되었습니다.

이걸로 웹페이지의 로딩 속도도 확실히 차이가 나겠죠?

 

 

 

비주얼 스튜디오 코드 VSC에서 minify 하는 방법

 

 

비주얼 스튜디오 코드 VSC, 코드 경량화 minify

이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 코드 경량화 minify를 대신해주는 웹사이트들이 있는데, 여러모로 불편합니다. 일단

gogogameboy.tistory.com

요즘의 대세인 코드 에디터, 비주얼 스튜디오 코드 Visual Studio Code를 이용해서 코드 경량화를 하는 방법은 위의 포스트에 자세히 나와있습니다. 필요하신 분은 확인해주세요.

 

 

 

 

 

 

다음 포스트

 

CSS 전처리기 preprocessor

이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 지난 포스트 CSS 코드 경량화 minify 이 포스팅은 PC로 작성되었습니다. 모바일로 보시

gogogameboy.tistory.com

 

 

 


이 글이 도움이 됐다면 하단의 공감 버튼을 꾹 눌러서
빨간 하트로 만들어주세요.
지인에게 보여주고 싶은 글이었다면
공감 버튼 옆을 클릭해서 SNS 공유해주세요.
댓글은 블로그 운영에 큰 힘이 됩니다.

 


 

'front-end > css' 카테고리의 다른 글

CSS 폰텔로 fontello 사용법  (0) 2021.01.17
CSS 전처리기 preprocessor  (0) 2021.01.17
CSS, link와 import  (0) 2021.01.13
CSS 트랜지션으로 좀 더 역동적이고 고급스러운 느낌 주기  (0) 2021.01.13
CSS 트랜지션  (0) 2021.01.12

댓글