이클립스(Eclipse) 정렬된 복잡한 CSS, 자바스크립트 소스 코드 정렬하는 방법

이클립스(Eclipse) 정렬된 복잡한 CSS, 자바스크립트 소스 코드 정렬하는 방법

 

환경: Eclipse Mars

 

참고할 만한 사이트가 있어서 CSS 파일을 다운받거나 열어 보면 소스가 정렬되어 있지 않고 한 줄로 연결된 경우가 있습니다. 원하는 소스를 검색해서 찾아도 어떤 형태인지 알기 힘듭니다. 보통 CSS, 자바스크립트 파일의 소스 양이 많기 때문에 자동으로 정리 해주는 프로그램이 필요합니다. Java 프로그램에 주로 쓰이는 이클립스로 코드를 정리하는 방법에 대해 알아 보겠습니다.

 

▼ 아래 그림은 네이버에서 쓰인 CSS 소스입니다. 정렬이 되어 있지 않고 일렬로 배치된 모습입니다. 이것을 일일이 정리한다는 것은 보통 일이 아니죠.

 

▼ 그럼 이클립스에서 소스 정리를 해 볼까요? 이클립스를 실행한 후 CSS 파일을 하나 생성합니다. 생성할 폴더 위치에서 오른 마우스를 눌러 New > Other 메뉴를 선택합니다. 

 

▼ 파일 생성 팝업창이 뜨면 Web 폴더로 갑니다. Web 폴더 안에 CSS file 을 선택하고 Next 버튼을 눌러 파일을 생성합니다. 그냥 일반 파일을 만들어서 확장자를 CSS 로 변경해도 됩니다. 

 

▼ CSS 파일 내용이 많으면 복사하는데 시간이 조금 걸리게 됩니다. 복사가 끝나면 아래 그림처럼 일렬로 나열이 됩니다. 이것을 보기 편하게 정렬해 보도록 하겠습니다. 

 

▼ 우선 Ctrl + A 를 눌러 소스를 전체 선택합니다. 그리고 오른 마우스를 눌러 [Source] > [Format] 메뉴를 선택합니다. 이 메뉴는 CSS 뿐만 아니라 모든 종류의 소스를 이클립스 환경 설정에 지정해 둔 형태대로 정렬 시켜 주는 기능을 합니다. 단축키는 Ctrl + Shift + F 입니다. 

 

▼ Format 명령을 실행한 결과 한 줄로 되어 있던 소스의 내용이 보기 편하게 정렬이 되었습니다. 이 명령어는 자주 사용하게 됩니다. 다른 곳에서 복사한 소스가 제대로 정렬되어 있지 않거나 자신의 정렬 방식과 틀릴 때 한방에 모든 것을 정리할 수 있기 때문입니다.