Emmet: HTML์„ ์•ฝ์–ด๋กœ ๋ณ€ํ™˜

์— ๋งŒ๋“  2012๋…„ 10์›” 13์ผ  ยท  25์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: emmetio/emmet

HTML ๋ธ”๋ก์„ ๊ตฌ๋ฌธ ๋ถ„์„ํ•˜๊ณ  ํ‘œํ˜„์‹์œผ๋กœ ๋ณ€ํ™˜ํ•˜๋Š” ๋ณ€ํ™˜๊ธฐ๋ฅผ ๋งŒ๋“ญ๋‹ˆ๋‹ค(์นด์šดํ„ฐ "์•ฝ์–ด ํ™•์žฅ").

์ด ๋ฌธ์ œ๋ฅผ ๋’ท๋ฐ›์นจํ•˜๊ณ  ์‹ถ์œผ์‹ ๊ฐ€์š”? ํ˜„์ƒ๊ธˆ์„ ๊ฒŒ์‹œํ•˜์‹ญ์‹œ์˜ค! ์šฐ๋ฆฌ๋Š” Bountysource ๋ฅผ ํ†ตํ•ด ํ˜„์ƒ๊ธˆ์„

Enhancement

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

์ž‘์„ฑ์ž์—๊ฒŒ ์ด๋ฉ”์ผ์„ ๋ณด๋ƒˆ์ง€๋งŒ ์š”์ฒญ์— ์ฐฌ์„ฑํ•˜๊ธฐ ์œ„ํ•ด ์—ฌ๊ธฐ์— ๋‹ค์‹œ ๊ฒŒ์‹œํ•ฉ๋‹ˆ๋‹ค.


์•ˆ๋…•,

์šฐ์„ , ๋‹น์‹ ์˜ ํ›Œ๋ฅญํ•œ ์ผ์— ๊ฐ์‚ฌ๋“œ๋ฆฝ๋‹ˆ๋‹ค. ๋‹น์‹ ์€ ํ›Œ๋ฅญํ•œ ์ผ์„ ํ•ด๋ƒˆ์Šต๋‹ˆ๋‹ค. ๋‚˜๋Š” ๊ทธ ๊ฒฐ๊ณผ์— ์ •๋ง ๊ฐํƒ„ํ•ฉ๋‹ˆ๋‹ค.

๊ท€ํ•˜์˜ ํ”„๋กœ๊ทธ๋žจ์— ๋Œ€ํ•œ ์ƒ๊ฐ:

'์—ญ์ฝ”๋”ฉ'์ด ๊ฐ€๋Šฅํ•œ๊ฐ€์š”?

์ฆ‰

<div id="container">
    <div class="header"></div>
    <div class="body">
        <div class="title">Title</div>
        <div class="text">Text</div>
    </div>
    <div class="footer"></div>
</div>

๊ทธ๋ฆฌ๊ณ  ๊ทธ๊ฒƒ์„ ๋ณ€ํ™˜

์ปจํ…Œ์ด๋„ˆ>.header+.body>.title{์ œ๋ชฉ}+.text{ํ…์ŠคํŠธ}^.๋ฐ”๋‹ฅ๊ธ€

??

์™œ์š”? ์Œ, ์šฐ์„  ๋‘ ๋ฒˆ์งธ ์ฝ”๋“œ๋กœ ์ž‘์—…ํ•œ ๋‹ค์Œ ์ •์ƒ์œผ๋กœ ๋˜๋Œ๋ฆฌ๋Š” ๊ฒƒ์ด ๋” ์‰ฝ์Šต๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ๊ฐ€์žฅ ์ค‘์š”ํ•œ ๊ฒƒ์€ ๊ฐ€๋Šฅํ•˜๋‹ค๋ฉด ํด๋ผ์ด์–ธํŠธ ์ธก ์ž๋ฐ” ์Šคํฌ๋ฆฝํŠธ๋ฅผ ์‚ฌ์šฉํ•˜๊ฑฐ๋‚˜ ์ž์› ๋ด‰์‚ฌ์ž๊ฐ€ emmet ์ฝ”๋“œ html ํŽ˜์ด์ง€์— _์ง์ ‘_ ์ž‘์„ฑํ•˜๋Š” ์„œ๋ฒ„ ์ธก ์ฝ”๋“œ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค.

์–ด๋–ค ์˜ํ–ฅ์„ ๋ฏธ์น ์ง€ ์ƒ๊ฐํ•ด ๋ณด์‹ญ์‹œ์˜ค.

๊ธ€์Ž„, ๊ทธ๊ฒƒ์€ ๋‹จ์ง€ ์ƒ๊ฐ์ž…๋‹ˆ๋‹ค :)

๋‹ค์‹œ ํ•œ ๋ฒˆ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค.

์ฆ๊ฑฐ์šด ์‹œ๊ฐ„ ๋ณด๋‚ด์„ธ์š”,
์ž๋‹ˆ์Šค,
์•„ํ…Œ๋„ค, ๊ทธ๋ฆฌ์Šค, ์œ ๋Ÿฝ, ์„ธ๊ณ„.


๊ทธ๋ž˜์„œ, ๊ทธ ์•„์ด๋””์–ด๋ฅผ ์ฐฌ์„ฑํ•˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค :+1: ๊ทธ๋ฆฌ๊ณ  ๊ทธ๊ฒƒ์ด ์™„๋ฃŒ๋˜๊ธฐ๋ฅผ ํฌ๋งํ•ฉ๋‹ˆ๋‹ค :)

๋ชจ๋“  25 ๋Œ“๊ธ€

์ž‘์„ฑ์ž์—๊ฒŒ ์ด๋ฉ”์ผ์„ ๋ณด๋ƒˆ์ง€๋งŒ ์š”์ฒญ์— ์ฐฌ์„ฑํ•˜๊ธฐ ์œ„ํ•ด ์—ฌ๊ธฐ์— ๋‹ค์‹œ ๊ฒŒ์‹œํ•ฉ๋‹ˆ๋‹ค.


์•ˆ๋…•,

์šฐ์„ , ๋‹น์‹ ์˜ ํ›Œ๋ฅญํ•œ ์ผ์— ๊ฐ์‚ฌ๋“œ๋ฆฝ๋‹ˆ๋‹ค. ๋‹น์‹ ์€ ํ›Œ๋ฅญํ•œ ์ผ์„ ํ•ด๋ƒˆ์Šต๋‹ˆ๋‹ค. ๋‚˜๋Š” ๊ทธ ๊ฒฐ๊ณผ์— ์ •๋ง ๊ฐํƒ„ํ•ฉ๋‹ˆ๋‹ค.

๊ท€ํ•˜์˜ ํ”„๋กœ๊ทธ๋žจ์— ๋Œ€ํ•œ ์ƒ๊ฐ:

'์—ญ์ฝ”๋”ฉ'์ด ๊ฐ€๋Šฅํ•œ๊ฐ€์š”?

์ฆ‰

<div id="container">
    <div class="header"></div>
    <div class="body">
        <div class="title">Title</div>
        <div class="text">Text</div>
    </div>
    <div class="footer"></div>
</div>

๊ทธ๋ฆฌ๊ณ  ๊ทธ๊ฒƒ์„ ๋ณ€ํ™˜

์ปจํ…Œ์ด๋„ˆ>.header+.body>.title{์ œ๋ชฉ}+.text{ํ…์ŠคํŠธ}^.๋ฐ”๋‹ฅ๊ธ€

??

์™œ์š”? ์Œ, ์šฐ์„  ๋‘ ๋ฒˆ์งธ ์ฝ”๋“œ๋กœ ์ž‘์—…ํ•œ ๋‹ค์Œ ์ •์ƒ์œผ๋กœ ๋˜๋Œ๋ฆฌ๋Š” ๊ฒƒ์ด ๋” ์‰ฝ์Šต๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ๊ฐ€์žฅ ์ค‘์š”ํ•œ ๊ฒƒ์€ ๊ฐ€๋Šฅํ•˜๋‹ค๋ฉด ํด๋ผ์ด์–ธํŠธ ์ธก ์ž๋ฐ” ์Šคํฌ๋ฆฝํŠธ๋ฅผ ์‚ฌ์šฉํ•˜๊ฑฐ๋‚˜ ์ž์› ๋ด‰์‚ฌ์ž๊ฐ€ emmet ์ฝ”๋“œ html ํŽ˜์ด์ง€์— _์ง์ ‘_ ์ž‘์„ฑํ•˜๋Š” ์„œ๋ฒ„ ์ธก ์ฝ”๋“œ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค.

์–ด๋–ค ์˜ํ–ฅ์„ ๋ฏธ์น ์ง€ ์ƒ๊ฐํ•ด ๋ณด์‹ญ์‹œ์˜ค.

๊ธ€์Ž„, ๊ทธ๊ฒƒ์€ ๋‹จ์ง€ ์ƒ๊ฐ์ž…๋‹ˆ๋‹ค :)

๋‹ค์‹œ ํ•œ ๋ฒˆ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค.

์ฆ๊ฑฐ์šด ์‹œ๊ฐ„ ๋ณด๋‚ด์„ธ์š”,
์ž๋‹ˆ์Šค,
์•„ํ…Œ๋„ค, ๊ทธ๋ฆฌ์Šค, ์œ ๋Ÿฝ, ์„ธ๊ณ„.


๊ทธ๋ž˜์„œ, ๊ทธ ์•„์ด๋””์–ด๋ฅผ ์ฐฌ์„ฑํ•˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค :+1: ๊ทธ๋ฆฌ๊ณ  ๊ทธ๊ฒƒ์ด ์™„๋ฃŒ๋˜๊ธฐ๋ฅผ ํฌ๋งํ•ฉ๋‹ˆ๋‹ค :)

๋‚ด ์ฐฌ์„ฑ! ํŽ˜์ด์ง€๋ฅผ HTML๋กœ ์ฝ”๋”ฉํ•˜๊ณ  emmet์œผ๋กœ ๋ฒˆ์—ญํ•œ ๋‹ค์Œ HTML๋กœ ๋™์ ์œผ๋กœ ํ™•์žฅ๋˜๋Š” emmet ์ฝ”๋“œ๋ฅผ ํฌํ•จํ•˜๋Š” PHP ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•  ์ˆ˜ ์žˆ๋‹ค๊ณ  ์ƒ์ƒํ•ด ๋ณด์‹ญ์‹œ์˜ค.

:์†: ๋‚ด ๋“œ๋ผ์ด๋ธŒ ๋ฐ”์ด 2์„ผํŠธ:

@icb931023 ์ฒ˜์Œ์—

๋ชจ๋“  ํƒœ๊ทธ๊ฐ€ ์ž๋™์œผ๋กœ ์ƒ์„ฑ๋˜๊ธฐ ๋•Œ๋ฌธ์— ์˜คํƒ€(์˜ˆ: ๋‹ซ๋Š” ํƒœ๊ทธ์˜ ์Šฌ๋ž˜์‹œ ๋ˆ„๋ฝ)์— ๋Œ€ํ•ด ๊ฑฑ์ •ํ•  ํ•„์š”๊ฐ€ ์—†์„ ๊ฒƒ ๊ฐ™์ง€๋งŒ ํ™•์žฅ๋œ HTML๋กœ ์ž‘์—…ํ•˜๊ณ  ์žˆ๋‹ค๊ณ  ๊ฐ€์ •ํ•ฉ๋‹ˆ๋‹ค. ๊ฐ„๊ฒฐํ•œ ๊ตฌ๋ฌธ) ๊ทธ๋ž˜์„œ ๊ทธ๊ฒƒ์ด ๊ทธ๊ฒƒ์— ๋Œ€ํ•œ ๊ฐ•๋ ฅํ•œ ์ฃผ์žฅ์ธ์ง€ ํ™•์‹คํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๋˜๋Š” ๊ฐ„๊ฒฐํ•œ/์ถ•์†Œ๋œ ๊ตฌ๋ฌธ์œผ๋กœ ์™„์ „ํžˆ ์ž‘๋™ํ•˜์ง€ ์•Š์„ ๊ฒƒ์ด๋ผ๊ณ  ๊ฐ€์ •ํ•˜๋Š” ๊ฒƒ์ด ํ‹€๋ฆด ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค.

๋‚˜๋Š” ์ด๊ฒƒ์„ ์›ํ•œ๋‹ค. ์„ค๋“๋ ฅ ์žˆ๋Š” ์‚ฌ์šฉ ์‚ฌ๋ก€๋ฅผ ๋ณผ ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด CSS ์ „์ฒ˜๋ฆฌ๋งŒํผ ๋ถ„๋ช…ํžˆ ์œ ์ตํ•˜์ง€๋Š” ์•Š์Šต๋‹ˆ๋‹ค.

๋ธŒ๋ผ์šฐ์ €/ํ…œํ”Œ๋ฆฟ ์—”์ง„์ด Emmet ๊ตฌ๋ฌธ์„ ์ดํ•ดํ–ˆ๋‹ค๋ฉด ์ด์•ผ๊ธฐ๊ฐ€ ๋‹ฌ๋ผ์งˆ ๊ฒƒ์ž…๋‹ˆ๋‹ค. ํฅ๋ฏธ๋กœ์šธ ๊ฒƒ์ž…๋‹ˆ๋‹ค!

์Œ, ๊ทธ๊ฒƒ์„ traduceํ•˜๊ธฐ ์œ„ํ•ด JS ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ๋งŒ๋“œ๋Š” ๊ฒƒ์€ ๋งค์šฐ ํฅ๋ฏธ ๋กญ์Šต๋‹ˆ๋‹ค ;)

๋‹ค์Œ์€ ํด๋ผ์ด์–ธํŠธ์˜ ๊ด€์ ์—์„œ ์‹œ์ž‘ํ•˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์—๋ฐ‹์˜ ์ฝง์ˆ˜์—ผ . ์ž์œ ๋กญ๊ฒŒ ๊ธฐ์—ฌํ•˜์„ธ์š”.

@๋ฐ”๋ฐ”ํƒ€ :)

์–ด๋–ค ์—…๋ฐ์ดํŠธ?

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

_์ถฉ๋Œ_

HTML์„ emmet์œผ๋กœ ๋ณ€ํ™˜ํ•  ์ˆ˜ ์žˆ๊ธฐ๋ฅผ ๋ฐ”๋ž๋‹ˆ๋‹ค. ๋‚ด๊ฐ€ ์ž์ฃผ ์‚ฌ์šฉํ•˜๋Š” ์ฝ”๋“œ ๋ธ”๋ก์˜ ์น˜ํŠธ ์‹œํŠธ๋ฅผ ๋งŒ๋“œ๋Š” ๋ฐ ๋งค์šฐ ์œ ์šฉํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค.

๋ณ€๊ฒฝ ์‚ฌํ•ญ์ด ์žˆ์Šต๋‹ˆ๊นŒ?

@Kcko ์—…๋ฐ์ดํŠธ๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค. ์ด ๊ธฐ๋Šฅ์€ ์šฐ์„  ์ˆœ์œ„๊ฐ€ ๊ฐ€์žฅ ๋‚ฎ์Šต๋‹ˆ๋‹ค.

์ข‹์€ ๊ธฐ๋Šฅ์ด ๋  ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๊ณ„์ธต ๊ตฌ์กฐ๋Š” emmet/zen ๊ตฌ๋ฌธ์—์„œ ์ฝ๊ธฐ ์‰ฝ๊ณ  ๋•Œ๋กœ๋Š” HTML ์กฐ๊ฐ ๋””์ž์ธ์„ ๋ฐ˜๋ณตํ•  ๋•Œ ์•ฝ์–ด์— ์ผ์ข…์˜ ๋Œ€๋žต์ ์ธ ์ดˆ์•ˆ์„ ๊ฐ–๋Š” ๊ฒƒ์ด ๋„์›€์ด ๋ฉ๋‹ˆ๋‹ค.

ํ›Œ๋ฅญํ•œ ๊ธฐ๋Šฅ์ด ๋  ๊ฒƒ์ž…๋‹ˆ๋‹ค!
*n ๊ธฐ๋Šฅ์„ ์‚ฌ์šฉํ•˜์—ฌ ์—ฌ๋Ÿฌ ๋ธ”๋ก์„ ์ƒ์„ฑํ•˜๊ณ  ๋‚˜์ค‘์— ๋ธ”๋ก์„ ๋ณ€๊ฒฝํ•ด์•ผ ํ•œ๋‹ค๋Š” ์‚ฌ์‹ค์„ ์•Œ๊ฒŒ ๋œ๋‹ค๊ณ  ์ƒ์ƒํ•ด ๋ณด์‹ญ์‹œ์˜ค. ์ด์ œ ๋ธ”๋ก์„ ์‚ญ์ œํ•˜๊ณ  emmet ์ฝ”๋“œ๋ฅผ ๋‹ค์‹œ ์ž‘์„ฑํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ๋Œ์•„๊ฐ€์„œ ๋ถ€๋ถ„๋งŒ ์ˆ˜์ •ํ•œ ๋‹ค์Œ ๋‹ค์‹œ ์ƒ์„ฑํ•˜๋„๋ก ํ•˜๋ฉด ํ›จ์”ฌ ๋” ๋น ๋ฅผ ๊ฒƒ์ž…๋‹ˆ๋‹ค!

@MarcoWilli Emmet์—๋Š” ๊ธฐ์กด ์ฝ”๋“œ๋ฅผ ๋น ๋ฅด๊ฒŒ ์ˆ˜์ •ํ•  ์ˆ˜ ์žˆ๋Š” ์ถฉ๋ถ„ํ•œ ๋ฐฉ๋ฒ•์ด ์žˆ์Šต๋‹ˆ๋‹ค.

  • (์•ฝ์–ด๋กœ ์ค„๋ฐ”๊ฟˆ)[http://docs.emmet.io/actions/wrap-with-abbreviation/]
  • (์—…๋ฐ์ดํŠธ ํƒœ๊ทธ)[http://emmet.io/blog/beta-v1-1/]

๋˜ํ•œ ๋ฐ˜๋ณต๋˜๋Š” ์š”์†Œ์— ๋‹ค๋ฅธ ๋‚ด์šฉ์ด ํฌํ•จ๋œ ๊ฒฝ์šฐ("๋‚˜์ค‘์— ์ˆ˜์ •"์œผ๋กœ ์„ค๋ช…ํ•œ ๋Œ€๋กœ) ์—ญ ์•ฝ์–ด ๋ฌธ์ž์—ด์€ ์ฝ”๋“œ ์ƒ์„ฑ์— ์‚ฌ์šฉํ•œ ๊ฒƒ๊ณผ ๋™์ผํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

๋‚˜์—๊ฒŒ ํˆฌํ‘œํ•˜์‹ญ์‹œ์˜ค. Emmet์„ ์ฒ˜์Œ ์ ‘ํ•˜๊ณ  ์ œ ๊ธฐ์ˆ ์„ ํ–ฅ์ƒ์‹œํ‚ค๋Š” ํ™˜์ƒ์ ์ธ ๋ฐฉ๋ฒ•์ด ๋  ๊ฒƒ์ž…๋‹ˆ๋‹ค.

์ด ๊ธฐ๋Šฅ์ด ์ •๋ง ํ•„์š”ํ–ˆ์Šต๋‹ˆ๋‹ค. ์ œ ๊ฒฝ์šฐ๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.

๋‚˜๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์€ ์ผ๋ถ€ ๋ธ”๋ก์„๋ฐ›์Šต๋‹ˆ๋‹ค.
<record class="main1 text"> <field name id="1">1</field> <field name id="2">2</field> <field name id="3">3</field> <field name id="4">4</field> </record>

๊ทธ๋ž˜์„œ ์ฒซ ๋ฒˆ์งธ ๋ ˆ์ฝ”๋“œ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋” ๋งŽ์€ ๋ ˆ์ฝ”๋“œ๋ฅผ ์ƒ์„ฑํ•˜๊ณ  ์‹ถ์œผ๋ฏ€๋กœ ์ด์ œ ๋ ˆ์ฝ”๋“œ ์•ฝ์–ด๋ฅผ ์–ป๊ธฐ ์œ„ํ•ด ์•ฝ์–ด๋ฅผ ์žฌํ˜„ํ•˜๋ ค๊ณ  ์‹œ๋„ํ•œ ๋‹ค์Œ (record...)*10 ์™€ ๊ฐ™์€ ๊ฒƒ์„ ์ž…๋ ฅํ•ฉ๋‹ˆ๋‹ค.

๊ฐ์‚ฌ ํ•ด์š”

@chermed ...๋˜๋Š” ๋‹จ์ˆœํžˆ ์ฝ”๋“œ ์กฐ๊ฐ์„ ๋ณต์‚ฌํ•˜์—ฌ ๋ถ™์—ฌ๋„ฃ์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ท€ํ•˜๊ฐ€ ์ œ๊ณตํ•œ ์ฝ”๋“œ๋Š” ๋งค์šฐ ๊ฐ„๋‹จํ•˜์ง€๋งŒ ๋งค์šฐ ๋“œ๋ฌธ ์‚ฌ์šฉ ์‚ฌ๋ก€์ž…๋‹ˆ๋‹ค. ๋Œ€๋ถ€๋ถ„์˜ ๊ฒฝ์šฐ record>field[name=name1]{text1}+field[name=name2]{text2}+field[name=name3]{text3}+... ์™€ ๊ฐ™์€ ์•ฝ์–ด๋กœ ๋๋‚˜๊ฒŒ ๋˜์–ด ๊ทธ๋‹ค์ง€ ์œ ์šฉํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

๋ฐ์ดํ„ฐ๊ฐ€ ํฌํ•จ๋œ ํ…œํ”Œ๋ฆฟ + JSON ๊ฐœ์ฒด์—์„œ HTML ๋ฌธ์ž์—ด์„ ๋ Œ๋”๋งํ•˜๊ณ  ๋ Œ๋”๋ง๋œ HTML ๋ฌธ์ž์—ด๋กœ POST ์š”์ฒญ์— ์‘๋‹ตํ•˜๋Š” ๋งˆ์ดํฌ๋กœ์„œ๋น„์Šค๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. HTTP ์‘๋‹ต์—์„œ ๊ฑฐ๋Œ€ํ•œ HTML ๋ฌธ์ž์—ด์„ ๋ณด๋‚ด์•ผ ํ•˜๋Š” ๊ฒƒ์€ ์šฐ๋ฆฌ์˜ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ํ๋ฆ„์— ๋ณ‘๋ชฉ ํ˜„์ƒ์„ ์•ผ๊ธฐํ•ฉ๋‹ˆ๋‹ค.

์ด ๋ Œ๋”๋ง๋œ HTML์„ ๋Œ€์‹  ์‘๋‹ต์œผ๋กœ ์ „์†ก๋˜๋Š” Emmet ์•ฝ์–ด๋กœ ๋ณ€ํ™˜ํ•˜๋Š” ๋ฐฉ๋ฒ•์ด ์žˆ์œผ๋ฉด ์‘๋‹ต ๋ฐ์ดํ„ฐ ํฌ๊ธฐ๊ฐ€ ๋” ์ž‘์€ ๋ฐ”์ดํŠธ ์ˆ˜๋ฅผ ์ฐจ์ง€ํ•˜๋ฏ€๋กœ ๋ณ‘๋ชฉ ํ˜„์ƒ์ด ์ œ๊ฑฐ๋ฉ๋‹ˆ๋‹ค. ์‘๋‹ต์„ ๋ฐ›๋Š” ๋งˆ์ดํฌ๋กœ์„œ๋น„์Šค๋Š” ํด๋ผ์ด์–ธํŠธ ์ธก ๋ Œ๋”๋ง์„ ์œ„ํ•œ ์•ฝ์–ด๋ฅผ emmet-expandํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

@kizzlebot ์‹คํ–‰ ๊ฐ€๋Šฅํ•œ ์‚ฌ์šฉ ์‚ฌ๋ก€์ฒ˜๋Ÿผ ๋ณด์ด์ง€๋งŒ ๋‹ค์Œ์„ ๊ณ ๋ คํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

  • ๊ฑฐ๋Œ€ํ•œ HTML์„ Emmet์œผ๋กœ ๋ณ€ํ™˜ํ•˜๋Š” ๊ฒƒ๋„ ๋ณ‘๋ชฉ ํ˜„์ƒ์ด ๋  ์ˆ˜ ์žˆ์ง€๋งŒ ์ด ๊ฒฝ์šฐ CPU ์ธก
  • ์ถœ๋ ฅ gzipping์ด ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•ฉ๋‹ˆ๊นŒ?
  • ํด๋ผ์ด์–ธํŠธ ์ธก์—์„œ Emmet์„ ํ™•์žฅํ•œ๋‹ค๋Š” ๊ฒƒ์€ ๋ Œ๋”๋ง์„ ์œ„ํ•ด ํŠน๋ณ„ํ•œ ๋Ÿฐํƒ€์ž„์ด ํ•„์š”ํ•˜๋‹ค๋Š” ๊ฒƒ์„ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ ์ž์ฒด ํ…œํ”Œ๋ฆฟ๊ณผ JSON ๋ฐ์ดํ„ฐ๋ฅผ ํด๋ผ์ด์–ธํŠธ์— ์ง์ ‘ ๋ณด๋‚ด๊ณ  ์ž์ฒด ๋Ÿฐํƒ€์ž„์„ ์‚ฌ์šฉํ•˜์—ฌ ๋ Œ๋”๋งํ•  ์ˆ˜ ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ๋งˆ์ดํฌ๋กœ ์„œ๋น„์Šค๊ฐ€ ์ „ํ˜€ ํ•„์š”ํ•˜์ง€ ์•Š์€ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

@kizzlebot Messagepack ๋ฐ/๋˜๋Š” Apache Avro๊ฐ€ ์•„๋‹Œ ์ด์œ ๋Š” ๋ฌด์—‡์ž…๋‹ˆ๊นŒ?

@sergeche ๋ฅผ ์ข€ ๋” ๊ตฌ์ฒด์ ์œผ๋กœ ์„ค๋ช…

์ƒ˜ํ”Œ ์‚ฌ์ดํŠธ๋ฅผ ๊ตฌ์ถ•ํ•˜๊ณ  ์ด๋ฅผ ๋‹ค์‹œ emmet ์Šค๋‹ˆํŽซ์œผ๋กœ ๋ณ€ํ™˜ํ•˜์—ฌ ํ”„๋ ˆ์  ํ…Œ์ด์…˜ ํƒ€์ดํ•‘์„ ๋” ๋น ๋ฅด๊ฒŒ ๋งŒ๋“ค๊ณ  ์‹ถ์Šต๋‹ˆ๋‹ค(ํ”„๋กœ์„ธ์Šค ๋ฐ๋ชจ emmet).

์•„๋งˆ๋„ Hyperscript / JSX ๋ฐ AST๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๊ฐ€๋Šฅํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค.

์ด๊ฒƒ์€ ๋งŽ์€ ์ž ์žฌ๋ ฅ์„ ๊ฐ€์ง€๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.
์š”์ „์—๋Š” Jade ๋ฐ HAML๊ณผ ๊ฐ™์€ HTML ํ”„๋ ˆ์ž„์›Œํฌ๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์—ˆ๋Š”๋ฐ ์ด๊ฒƒ์ด ๋ถˆ๋ถ„๋ช…ํ•œ HTML ๊ตฌ๋ฌธ์— ๋Œ€ํ•œ ํ›Œ๋ฅญํ•œ ๋Œ€์ฒดํ’ˆ์ด๋ผ๊ณ  ์ƒ๊ฐํ–ˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ์ถ”๊ฐ€ ์„ค์น˜ ๋ฐ ๋ณ€ํ™˜์ด ํ•„์š”ํ–ˆ๊ธฐ ๋•Œ๋ฌธ์— ๋‚ด ํ”„๋กœ์ ํŠธ์— ๋“ค์–ด๊ฐˆ ์ˆ˜ ์—†์—ˆ์Šต๋‹ˆ๋‹ค. ๋‚˜๋Š” ํ•ญ์ƒ Emmet๊ณผ ๊ฑฐ์˜ ๊ฐ™์€ ์ˆ˜์ค€์˜ Emmet์„ ์‚ฌ์šฉํ–ˆ์Šต๋‹ˆ๋‹ค(์กฐ๊ธˆ๋งŒ ์ง€์›ํ•˜๊ณ  ์„ค์น˜๊ฐ€ ํ•„์š”ํ•˜์ง€ ์•Š์Œ).
ํ•˜์ง€๋งŒ ์˜ค๋Š˜ ์‚ฌ์ดํŠธ ํ…œํ”Œ๋ฆฟ์„ ๊ตฌ์ถ•ํ•  ๋•Œ Emmet์—์„œ ์ž‘์„ฑํ•˜๋Š” ๋™์•ˆ ๋“ค์—ฌ์“ฐ๊ธฐ๋ฅผ ์‚ฌ์šฉํ•˜๊ธฐ๋กœ ๊ฒฐ์ •ํ•˜๊ณ  ๋‹ค์Œ์„ ์ƒ๊ฐํ•ด ๋ƒˆ์Šต๋‹ˆ๋‹ค.

.navbar>
  .logo+
  ul.menu_v>
    li.menu_itm*2+
    li.menu_item.dropd
  ^
  ul.menu_v>
    li.item_dd

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

์›น ๊ตฌ์„ฑ ์š”์†Œ, ํ•˜์ดํผ ์Šคํฌ๋ฆฝํŠธ, JSX ๋ฐ pug๋ฅผ ์˜๋ฏธํ•ฉ๋‹ˆ๊นŒ? ๊ธ€์Ž„, imho ์ด๊ฒƒ์€ ์ฝ๊ธฐ๊ฐ€ ์‰ฝ์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

Emmet์€ ์ฃผ๋กœ PhpStorm ํ”„๋กœ์ ํŠธ์—์„œ ๋น ๋ฅธ ํ”„๋กœํ† ํƒ€์ดํ•‘ ๋ฐ ๋ช…๋ น ์™„์„ฑ/์Šค์บํด๋”ฉ์— ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ Emmet ๊ตฌ๋ฌธ์€ ์ผ๋ฐ˜์ ์œผ๋กœ ์–ด๋–ค ํ”„๋กœ์ ํŠธ์—๋„ ์ €์žฅ๋˜์ง€ ์•Š๊ณ  ์ตœ์ข… html์—๋งŒ ์ €์žฅ๋ฉ๋‹ˆ๋‹ค.

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰

๊ด€๋ จ ๋ฌธ์ œ

deathmood picture deathmood  ยท  15์ฝ”๋ฉ˜ํŠธ

DanielRuf picture DanielRuf  ยท  5์ฝ”๋ฉ˜ํŠธ

planetoftheweb picture planetoftheweb  ยท  3์ฝ”๋ฉ˜ํŠธ

renatorib picture renatorib  ยท  26์ฝ”๋ฉ˜ํŠธ

corysimmons picture corysimmons  ยท  5์ฝ”๋ฉ˜ํŠธ