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

스타일시트 CSS

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

 

환경: Internet Explorer 11

 

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

 

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

 

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

 

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

http://prettydiff.com/

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

 

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

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

 

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

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

 

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

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

 

저작자 표시 비영리 변경 금지
신고
Posted by 녹두장군