인터넷 사이트를 통해 CSS 소스코드 한번에 정렬하는 방법

인터넷 사이트를 통해 CSS 소스코드 한번에 정렬하는 방법

 

환경: Chrome

 

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

 

▼ 아래 그림은 네이버에서 쓰인 CSS 소스입니다. 보기 좋게 정렬된 모습이 아닙니다. 사람 손으로 일일이 정리할 수는 없습니다. 오늘 소개할 사이트를 통해서 간단하게 정렬해 보세요. 

 

▼ 아래 링크 주소를 클릭해서 메인 페이지에 접속한 후 상단에 있는 [Function] 란에 두 번째 [Beautify] 을 선택합니다. 다음은 소스를 왼쪽 칸에 넣어야 하는데 소스의 내용이 작을 때는 복사하면 되지만 내용이 많은 경우 찾아보기를 통해 코드를 올리세요. 

http://prettydiff.com/

 

▼ 그림처럼 찾아보기 버튼을 눌러서 다운받은 CSS 나 자바스크립트 파일을 올리면 자동으로 에디터 안에 내용이 들어갑니다.

 

▼ 에디터에 소스가 들어가는 순간 오른쪽 에디터 화면에는 정렬된 소스가 나타납니다. 만약 아무 반응도 없다면 에디터 아래에 Execute 버튼을 눌러 줍니다. 이렇게 정렬이 끝나면 오른쪽에 나와 있는 소스를 보고 분석하는데 좀더 편하겠죠.

 

▼ 만약 자신이 원하는 대로 정렬이 되지 않는다면 옵션을 살펴볼 필요가 있습니다. 소스마다 템플릿이 틀리기 때문입니다. 화면 아래로 내려가서 Main Options 을 보시면 소스 종류를 지정하는 옵션이 있습니다. 콤보 박스를 클릭해서 자신이 올린 소스의 종류와 일치하는지 확인해 보세요.