html/css 코드,코딩 깔끔하게 정리하는 방법(웹이용)


html/css 코드,코딩 깔끔하게 정리하는 방법(웹이용)


html/css 작업을 하다보면 지저분하게 되있거나 보기 어렵게 되있는 경우가 종종 있습니다. 귀찮다고 그냥 두면 나중에 보기 어려워 소스찾기가 매우 곤란해집니다.
수작업으로 하기는 시간이 오래걸리고 어렵습니다. 이러문제를 해결해주는 웹사이트가 있어 소개합니다.
간단하게 소스를 복사 /붙여넣기 하면 소스를 압축하거나 정리할수 있습니다.

 
http://prettydiff.com 라는  사이트로 자신이 원하는 소스를 비교하거나 압축,정리해주는 아주 유용한 사이트입니다.

소스 정리



1.사이트 접속 초기화면 입니다.
좌측의 FUNCTION 부분만 설정해도 쉽게 사용할 수 있습니다. 
Compare code : 소스비교 
Beautify code : 소스정리
Minify code : 소스압축



코딩 정리



2.우리는 소스정리를 해야하므로 2번째 Beautify Code를 선택하고  좌측칸에 소스를 붙여넣기 해줍니다.
그리고 하단의 excute를 클릭해줍니다.

(참고로 소스압축(Minify Code)의 경우 소스가 유실되는 버그가 있어 사용시 주의를 요합니다.)

코드 정리



3. 실행이 완료되면 우측에 깔끔하게 정리된 코드가 보입니다.
이를 복사해서 사용하시면 됩니다^^

이상으로 마치겠습니다.