✔ 소스 코드 정렬 방법 |
|
용량을 줄인 HTML, CSS, JS 파일들에 대해서 확인 및 수정이 필요할 경우 한줄로 되어 있거나 빈칸 등이 삭제되어 소스 코드를 확인하는 것이 굉장히 불편합니다. 그래서 보기 불편해진 소스 코드를 정렬해서 처리할 업무를 완료 후 다시 압축을 해서 파일을 반영하는 방법이 필요한데, 파일을 직접 수정해서 사용하는 분은 아래와 같은 방법으로 진행을 하면 될 것 같습니다.
1. HTML, CSS 소스 코드 정렬
2. JS 소스 코드 정렬
순서로 진행하였습니다.
✔ HTML, CSS 소스 코드 정렬 |
|
소스 코드를 정렬해주는 사이트는 많은데 개인적으로 CSS Beautifier라는 사이트에서 테스트 해본 결과 괜찮다는 생각이 들어서 이 곳을 이용하였습니다. 참고로 JS파일의 테스트 결과 정상적으로 정렬이 되지 않습니다.
CSS Beautifier 사이트 바로가기 |
✔ 압축된 HTML이나 CSS파일을 복사하여 붙혀넣기 한 후 Format Code 버튼을 선택하면 소스 코드가 정렬이 되어 나옵니다. |
✔ JS 소스 코드 정렬 |
|
JS 소스 코드 정렬 역시 여러 군데 사이트에서 테스트하면서 괜찮다고 생각이 든 Online JavaScript beautifier라는 사이트를 이용하였습니다. 참고로 HTML, CSS파일의 테스트 결과 정상적으로 정렬이 되지 않습니다.
Online JavaScript Beautifier 사이트 바로가기 |
✔ 압축된 JS파일을 복사하여 붙혀넣기 한 후 Beautify JavaScript or HTML 버튼을 선택하면 소스 코드가 정렬이 되어 나옵니다. |
✔ 마치면서 |
|
꼭 위에서 나온 사이트에서 작업 할 필요는 없습니다. 구글링을 조금만 해보아도 소스 코드를 정렬하는 사이트는 많이 있습니다. 확인해 보고 본인이 쓰기에 가장 괜찮은 사이트를 이용하면 될 것 같습니다.
관련글 보기 |
