웹 소스코드, 쿼리 정렬 및 비교 사이트(HTML, CSS, JS, SQL)

 

웹 소스코드를 작성한 후에 또는

웹 소스코드가 정렬이 되어 있지 않은 경우에

정렬이 필요한 경우가 있습니다.

 

오늘은 정렬이 안된 소스코드 들을

형식에 맞춰 보기 좋게 만들어 주는 사이트를 소개하겠습니다.

 

웹 소스코드 정렬 사이트 주소는 아래와 같습니다.

https://wepplication.github.io/tools/beautifyCode/

 

1. 코드 정렬

코드 정렬을 하는 화면입니다.

원본에 정렬을 원하는 코드 문을 넣습니다.

아래의 '변환' 버튼을 눌러줍니다.

 

변환 버튼을 누르면 아래와 같이 정렬된 소스 코드를 보실 수 있습니다.

 

 

2. 코드 비교

이 사이트는 코드 정렬뿐만 아니라 다양한 기능을 제공하고 있습니다

그중에서 코드 비교 기능도 있는데 참 유용한 기능입니다.

상단에 '개발도구' - '코드비교'를 클릭합니다

 

코드 비교 화면입니다.

출력에 두페이지를 선택합니다.

원본에 비교를 코드를 입력합니다.

변환을 눌러서 비교를 진행합시다.

 

변환 버튼을 눌러서 코드를 비교해본 화면입니다.

아래와 같이 보기 쉽게 색깔로 표시를 해줍니다.

 

간편하게 소스 정렬 및 비교를 해보시기 바랍니다.

이상으로 웹 소스 코드정렬 사이트에 대한 포스팅을 마치겠습니다.