css 속성 정렬 바꿔주기

나는 원래 CSS를 모든 속성마다 ENTER를 했다.

 

그래서 CSS 파일이 정말 끝도없이 길어졌다. 1000줄은 기본으로 넘어가곤 했다. 그래도 난 불편한지 몰랐다. 처음부터 그렇게 작성했으므로.

 

그러다가 우연한 기회에 반드시 css를 인라인으로 써달라는 홈페이지를 코딩하게 됬는데, 세상에! 신세계 아닌가. CSS를 띄어서 쓰면 각 속성 찾기에는 편할지 몰라도 코드 찾는게 좀 어려웠는데 인라인으로 쓰니 속성이 아무리 길어봤자 1-2줄이면 끝나니까 바로바로 찾을수 있어서 너무너무 편했다. 상대적으로 띄어서 쓰는것이 불편하게 느껴졌다.

 

처음에는 손에 익은 코딩 방법을 바꾸려니 조금 어색했는데, 이제는 잘 적응해서 CSS를 인라인으로 쓰면서 편하게 코딩하고있다.

 

문제는 내가 이전에 코딩해둔 CSS파일들.

 

죄다 ENTER로 나뉘어 있는데 모두 공백을 지울 수도 없는 노릇이고, 그래서 찾다가 발견한 사이트.

cssAlign 이라는 사이트다.

 

http://util.clearboth.org/cssAlign.html

 

옵션을 보면 css압축과 줄바꿈 방법으로 나뉘어 있는데,

 

주석 제거

공백 제거

모든속성 한줄로 표시하기 (enter방법 ->inline 방법)

속성 하나당 한줄로 표시하기 (inline방법 -> enter방법)

 

이렇게 옵션이 있다.

 

그중에서 나는 모든 속성을 한줄로 표시하기 옵션을 굉장히 잘 쓰고있는중이다.

 

 

 

UI도 간단해서, textarea 부분에 정렬하고픈 css를 복사 붙여넣기 한다음 바로 아래서 옵션을 선택하고, 정렬 버튼만 클릭하면 자동으로 정렬이 된다.

 

그리고 다시 css를 복사해서 기존 css파일 내용을 날려버리고 붙여넣기하면 끝 !

 

이런 간단한 툴 만들어준 모든 분들 넘나 감사합니다....♥