HTML 3

LeeMir, 15 December 2020

HTML CSS JS 정렬과 한줄화


프론트엔드 삼대장 HTML CSS JS은 처음부터 끝까지 본인이 작성할 수도 있지만 여기저기서 소스를 가져와서 붙이다가 탭간격이 깨지는 일이 매우 빈번하다.

반대로, 다른 사람이 공유한 소스를 복붙했는데 간격들 때문에 여백의 미가 넘쳐흘러서 코드가 길어지는 바람에 내가 작성해야하는 부분을 찾기 쉽지 않는 일도 빈번하다.

한글 맞춤법 검사기처럼 띄어쓰기를 자동으로 조정해주는 프로그램이 있으면 얼마나 좋을까!

물론 이미 있어서 이렇게 소개해본다.

Tabifier - HTML CSS 정렬 사이트


image

https://tools.arantius.com/tabifier

정렬이 뒤죽박죽인 HTML / CSS / JSON 형식의 코드를 Code in에 입력하고 Tabify 버튼을 눌러주면 Code out에 정렬해서 출력해주는 사이트다.

한가지 특이한 점은 Type of code에서 코드 형식을 고를 수 있는데, C Style이라고해서 C, C++, C# 등의 코드도 정렬해주는 것 같다.

Javascript Compressor - JS 한줄화 사이트


image

http://javascriptcompressor.com/

Tabify와는 반대로, 정렬된 코드를 한줄로 만들어주는 사이트다.

이름은 Javascript Compressor인데, HTML이나 CSS를 넣어도 잘 된다.

이러한 형식의 사이트는 여러가지 있는데, 정렬해주는거랑 한줄로 만들어주는거 하나씩만 알아도 무방할 것 같아 이렇게 두 개만 소개해보았다.

사실 내가 쓰려고 올렸다.