๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
Lect & Tip/vscode

css,html ์ด์˜๊ฒŒ ์ •๋ฆฌ ์‚ฌ์ดํŠธ c style,json,js javascript beautifier Tabifier

by ๋‚ฏ์„ ๊ณต๊ฐ„2019 2023. 11. 8.

๋ชฉ์ฐจ

    css, html ์ด์˜๊ฒŒ ์ •๋ฆฌ ์‚ฌ์ดํŠธ c style, json, js javascript beautifier Tabifier  ์›น์‚ฌ์ดํŠธ ์†Œ๊ฐœ

    ์›น ๊ฐœ๋ฐœ ๋ฐ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์ž‘์—…์—์„œ ๊ฐ€๋…์„ฑ ์ข‹๊ณ  ์ฒด๊ณ„์ ์œผ๋กœ ์ •๋ฆฌ๋œ ์ฝ”๋“œ๋Š” ๋งค์šฐ ์ค‘์š”ํ•ฉ๋‹ˆ๋‹ค. ์ฝ”๋“œ๋ฅผ ๊น”๋”ํ•˜๊ฒŒ ์œ ์ง€ํ•˜๋Š” ๊ฒƒ์€ ๊ฐœ๋ฐœ์ž์˜ ๊ธฐ๋ณธ ์†Œ์–‘ ์ค‘ ํ•˜๋‚˜์ด๋ฉฐ, ์ด๋ฅผ ๋•๋Š” ๋‹ค์–‘ํ•œ ์˜จ๋ผ์ธ ๋„๊ตฌ๋“ค์ด ์กด์žฌํ•ฉ๋‹ˆ๋‹ค. ์ด๋ฒˆ ๊ธ€์—์„œ๋Š” HTML, CSS, JavaScript, C์–ธ์–ด ์Šคํƒ€์ผ, JSON, SQL ๋“ฑ ๋‹ค์–‘ํ•œ ์–ธ์–ด์˜ ์ฝ”๋“œ๋ฅผ ์•„๋ฆ„๋‹ต๊ฒŒ ์ •๋ฆฌํ•ด ์ฃผ๋Š” ์œ ์šฉํ•œ ์›น์‚ฌ์ดํŠธ๋“ค์„ ์†Œ๊ฐœํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.

    ์•„๋‹ˆ ๊ทผ๋ฐ, vscode๋“ , ์ดํด๋ฆฝ์Šค๋“  IDE์‚ฌ์šฉํ•˜๋ฉด ํ”Œ๋Ÿฌ๊ทธ์ธ์œผ๋กœ ๋ทฐํ‹ฐํŒŒ์ด์–ด ์ง€์›ํ•˜๋Š”๋ฐ ์ด๋Ÿฐ ์‚ฌ์ดํŠธ ์™œ ํ•„์š”ํ•จ? ์ด๋ผ๊ณ  ๋ฌด์„ ์‹ ๋‹ค๋ฉด... ๋‚ด ์ปด์ด ์•„๋‹Œ ๋ฐ์„œ ๊ฐ„๋‹จํ•˜๊ฒŒ ๋ฉ”๋ชจ์žฅ์—์„œ ์ฝ”๋“œ ์งœ์„œ ๋ง‰ FBIํ•ดํ‚นํ•˜๊ณ  ๊ทธ๋Ÿด ๋•Œ ํ•„์š”ํ•จ๋ . ใ…‹ใ…‹ใ…‹

    1. HTML ๋ฐ CSS ์ฝ”๋“œ ์ •๋ฆฌ: Tabifier

    Tabifier๋Š” HTML๊ณผ CSS ์ฝ”๋“œ๋ฅผ ๊น”๋”ํ•˜๊ฒŒ ์ •๋ฆฌํ•ด์ฃผ๋Š” ์˜จ๋ผ์ธ ๋„๊ตฌ์ž…๋‹ˆ๋‹ค. ๊ฐœ๋ฐœ์ž์˜ ๊ฐœ์ธ์ ์ธ ์„ ํ˜ธ์™€ ๊น”๋”ํ•œ ์†Œ์Šค ์ƒ์„ฑ์„ ์œ„ํ•œ ํ”„๋กœ๊ทธ๋ž˜๋ฐ์ด ๊ฒฐํ•ฉ๋œ ์Šคํƒ€์ผ๋กœ ์ฝ”๋“œ๋ฅผ ์ •๋ฆฌํ•ด ์ค๋‹ˆ๋‹ค. CSS์™€ HTML๋ฟ๋งŒ ์•„๋‹ˆ๋ผ C์–ธ์–ด ์Šคํƒ€์ผ์˜ ์ฝ”๋“œ์—๋„ ์ ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด ๋„๊ตฌ๋Š” arantius.com์—์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

     

    Tools - Tabifier (HTML and CSS code beautifier) - arantius.com

    Tabifier The tabifier is a tool to properly indent computer code. The style it produces is a mix of my personal preferences for indentation plus what I could manage to make a program produce from dirty source. The tabifier currently supports CSS, HTML, and

    tools.arantius.com

    2. JavaScript ์ฝ”๋“œ ์ •๋ฆฌ: Beautifier.io

    JavaScript ๊ฐœ๋ฐœ์ž๋“ค์—๊ฒŒ ๋งค์šฐ ์œ ์šฉํ•œ ์‚ฌ์ดํŠธ์ธ Beautifier.io๋Š” JavaScript, JSON, React.js, HTML, CSS, SCSS, SASS ๋“ฑ์˜ ์ฝ”๋“œ๋ฅผ ๋ณด๊ธฐ ์ข‹๊ฒŒ ์ •๋ฆฌํ•ด ์ค๋‹ˆ๋‹ค. ์ด ์‚ฌ์ดํŠธ๋Š” ๊ฐœ๋ฐœ ์ค‘์ด๊ฑฐ๋‚˜ ์œ ์ง€๋ณด์ˆ˜ ์ž‘์—…์„ ํ•  ๋•Œ ์ฝ”๋“œ์˜ ๊ฐ€๋…์„ฑ์„ ๋†’์ด๋Š” ๋ฐ ํฐ ๋„์›€์ด ๋ฉ๋‹ˆ๋‹ค. ์ด ์‚ฌ์ดํŠธ๋Š” beautifier.io์—์„œ ์ ‘์†ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

     

    Online JavaScript beautifier

    Beautify JavaScript, JSON, React.js, HTML, CSS, SCSS, and SASS

    beautifier.io

    3. SQL ์ฟผ๋ฆฌ ์ •๋ฆฌ: SQLFormat

    SQLFormat์€ SQL ์ฟผ๋ฆฌ๋ฌธ์„ ๊น”๋”ํ•˜๊ฒŒ ์ •๋ฆฌํ•ด์ฃผ๋Š” ๋˜ ๋‹ค๋ฅธ ์œ ์šฉํ•œ ์›น์‚ฌ์ดํŠธ์ž…๋‹ˆ๋‹ค. ์ด ์‚ฌ์ดํŠธ๋Š” MS ACCESS, DB2, MSSQL, MySQL, Oracle/PLSQL, MDX, Generic ๋“ฑ ๋‹ค์–‘ํ•œ SQL ์–ธ์–ด๋ฅผ ์ง€์›ํ•ฉ๋‹ˆ๋‹ค. ํŠนํžˆ ๋ณต์žกํ•œ ์ฟผ๋ฆฌ๋ฌธ์„ ์ž‘์„ฑํ•˜๊ฑฐ๋‚˜ ๋ถ„์„ํ•  ๋•Œ ์ด ์‚ฌ์ดํŠธ์˜ ๋„์›€์„ ๋ฐ›์œผ๋ฉด ํšจ์œจ์ ์œผ๋กœ ์ž‘์—…ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด ์‚ฌ์ดํŠธ๋Š” dpriver.com์—์„œ ์ด์šฉ ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.

     

    Instant SQL Formatter

     

    www.dpriver.com

    ๊ฒฐ๋ก 

    ์œ„์—์„œ ์†Œ๊ฐœํ•œ ์›น์‚ฌ์ดํŠธ๋“ค์€ ๊ฐœ๋ฐœ์ž๋“ค์ด ๋ณด๋‹ค ํšจ์œจ์ ์œผ๋กœ ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•˜๊ณ  ๊ด€๋ฆฌํ•  ์ˆ˜ ์žˆ๋„๋ก ๋„์™€์ค๋‹ˆ๋‹ค. ์ฝ”๋“œ ์ •๋ฆฌ๋Š” ํ”„๋กœ์ ํŠธ์˜ ์œ ์ง€๋ณด์ˆ˜์™€ ํ˜‘์—…์— ์žˆ์–ด ์ค‘์š”ํ•œ ์—ญํ• ์„ ํ•˜๋ฉฐ, ์ด๋Ÿฌํ•œ ๋„๊ตฌ๋“ค์€ ๊ทธ ๊ณผ์ •์„ ๊ฐ„ํŽธํ•˜๊ฒŒ ๋งŒ๋“ค์–ด์ค๋‹ˆ๋‹ค. HTML, CSS, JavaScript, C์–ธ์–ด ์Šคํƒ€์ผ, JSON, SQL ์–ธ์–ด์— ๋Œ€ํ•œ ์ฝ”๋“œ ์ •๋ฆฌ๊ฐ€ ํ•„์š”ํ•˜๋‹ค๋ฉด ์œ„์˜ ์‚ฌ์ดํŠธ๋“ค์„ ํ™œ์šฉํ•ด ๋ณด์‹œ๊ธฐ ๋ฐ”๋ž๋‹ˆ๋‹ค.

    ๋ฐ˜์‘ํ˜•

    ๋Œ“๊ธ€