๐Ÿš€ ์›Œ๋“œํ”„๋ ˆ์Šค ๋ธ”๋ก ํŽธ์ง‘๊ธฐ(Gutenberg)์—์„œ CodePen ์‚ฌ์šฉ ๋ฐฉ๋ฒ•

์ฝ”๋“œํŽœ ๋ฒ„ํŠผ ์˜ˆ์ œ

์›Œ๋“œํ”„๋ ˆ์Šค์—์„œ CodePen์„ ์‚ฌ์šฉํ•˜๋ฉด ์›น์—์„œ ๊ณต์œ ๋œ HTML, CSS, JavaScript ์ฝ”๋“œ๋ฅผ ์‰ฝ๊ฒŒ ์ž„๋ฒ ๋“œ(embed)ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
ํŠนํžˆ, ๋ธ”๋ก ํŽธ์ง‘๊ธฐ(Gutenberg)๋ฅผ ์‚ฌ์šฉํ•  ๊ฒฝ์šฐ, ์ปค์Šคํ…€ HTML ๋ธ”๋ก์„ ํ™œ์šฉํ•˜๋ฉด ์ฝ”๋“œ๊ฐ€ ๊น”๋”ํ•˜๊ฒŒ ์‚ฝ์ž…๋ฉ๋‹ˆ๋‹ค.

์ด์ œ CodePen์„ ์›Œ๋“œํ”„๋ ˆ์Šค ๋ธ”๋ก ํŽธ์ง‘๊ธฐ์— ์‚ฝ์ž…ํ•˜๋Š” ์„ธ ๊ฐ€์ง€ ๋ฐฉ๋ฒ•์„ ์ฐจ๊ทผ์ฐจ๊ทผ ์„ค๋ช…ํ•ด ๋“œ๋ฆด๊ฒŒ์š”! ๐Ÿ˜Š


โœ… ๋ฐฉ๋ฒ• 1: “์ปค์Šคํ…€ HTML ๋ธ”๋ก”์„ ์‚ฌ์šฉํ•œ CodePen ์‚ฝ์ž… (๊ฐ€์žฅ ์ถ”์ฒœ!)

์ด ๋ฐฉ๋ฒ•์€ ๊ฐ€์žฅ ํ™•์‹คํ•˜๊ณ  ๊นจ๋—ํ•˜๊ฒŒ CodePen์„ ํ‘œ์‹œํ•˜๋Š” ๋ฐฉ๋ฒ•์ž…๋‹ˆ๋‹ค.

๐Ÿ“Œ 1๋‹จ๊ณ„: CodePen์—์„œ ์ฝ”๋“œ ๋ณต์‚ฌํ•˜๊ธฐ

  1. CodePen(https://codepen.io/)์— ์ ‘์†ํ•˜์—ฌ ์›ํ•˜๋Š” ์ฝ”๋“œ๋ฅผ ์ฐพ์Šต๋‹ˆ๋‹ค.
  2. ์ฝ”๋“œ ์ฐฝ ์•„๋ž˜์ชฝ์— ์žˆ๋Š” “Embed” ๋ฒ„ํŠผ์„ ํด๋ฆญํ•ฉ๋‹ˆ๋‹ค.
  3. CodePen์ด ์ œ๊ณตํ•˜๋Š” ๋‹ค์–‘ํ•œ ์ž„๋ฒ ๋“œ ์˜ต์…˜์ด ๋‚˜์˜ค๋Š”๋ฐ, ์—ฌ๊ธฐ์„œ “Copy Embed Code” ๋ฒ„ํŠผ์„ ๋ˆŒ๋Ÿฌ ์ฝ”๋“œ๋ฅผ ๋ณต์‚ฌํ•ฉ๋‹ˆ๋‹ค.

๐Ÿ’ก ์ฐธ๊ณ : CodePen์€ HTML <iframe> ํƒœ๊ทธ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์ฝ”๋“œ ์Šค๋‹ˆํŽซ์„ ์‚ฝ์ž…ํ•ฉ๋‹ˆ๋‹ค.


๐Ÿ“Œ 2๋‹จ๊ณ„: ์›Œ๋“œํ”„๋ ˆ์Šค์—์„œ “์ปค์Šคํ…€ HTML ๋ธ”๋ก” ์ถ”๊ฐ€ํ•˜๊ธฐ

  1. ์›Œ๋“œํ”„๋ ˆ์Šค ๋ธ”๋ก ํŽธ์ง‘๊ธฐ(Gutenberg)์—์„œ ์ƒˆ ๊ธ€์„ ์ž‘์„ฑํ•ฉ๋‹ˆ๋‹ค.
  2. ๋ธ”๋ก ์ถ”๊ฐ€ ๋ฒ„ํŠผ(“+” ๋ฒ„ํŠผ)์„ ํด๋ฆญํ•ฉ๋‹ˆ๋‹ค.
  3. ๊ฒ€์ƒ‰์ฐฝ์— **”์ปค์Šคํ…€ HTML”**์„ ์ž…๋ ฅํ•œ ํ›„ ํด๋ฆญํ•˜์—ฌ ์ถ”๊ฐ€ํ•ฉ๋‹ˆ๋‹ค.

๐Ÿ“Œ 3๋‹จ๊ณ„: CodePen ์ฝ”๋“œ ๋ถ™์—ฌ๋„ฃ๊ธฐ & ๋ฏธ๋ฆฌ ๋ณด๊ธฐ

  1. “์ปค์Šคํ…€ HTML” ๋ธ”๋ก์ด ์ถ”๊ฐ€๋˜๋ฉด, ๋ฐฉ๊ธˆ ๋ณต์‚ฌํ•œ CodePen ์ฝ”๋“œ๋ฅผ ๋ถ™์—ฌ๋„ฃ์Šต๋‹ˆ๋‹ค.
  2. “๋ฏธ๋ฆฌ๋ณด๊ธฐ” ๋ฒ„ํŠผ์„ ๋ˆŒ๋Ÿฌ CodePen์ด ์ •์ƒ์ ์œผ๋กœ ํ‘œ์‹œ๋˜๋Š”์ง€ ํ™•์ธํ•ฉ๋‹ˆ๋‹ค.
  3. ์ด์ƒ ์—†์ด ๋ณด์ด๋ฉด ๊ธ€์„ ๋ฐœํ–‰ํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค! ๐ŸŽ‰

๐Ÿ‘‰ ์ด ๋ฐฉ๋ฒ•์„ ์‚ฌ์šฉํ•˜๋ฉด CodePen์ด ์ •ํ™•ํ•˜๊ฒŒ ํ‘œ์‹œ๋˜๋ฉฐ, ๋ณ„๋„์˜ ์„ค์ • ์—†์ด๋„ ์ฝ”๋“œ๊ฐ€ ๋ฐ”๋กœ ์‹คํ–‰๋ฉ๋‹ˆ๋‹ค.


โœ… ๋ฐฉ๋ฒ• 2: CodePen ๋งํฌ๋ฅผ ์ง์ ‘ ์‚ฝ์ž…ํ•˜๊ธฐ

์ด ๋ฐฉ๋ฒ•์€ CodePen์˜ ์ „์ฒด ์ฝ”๋“œ๋ฅผ ๋ถ™์—ฌ๋„ฃ๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๋ผ, ๋‹จ์ˆœํ•œ ๋งํฌ(URL)๋งŒ ์‚ฝ์ž…ํ•˜๋Š” ๋ฐฉ์‹์ž…๋‹ˆ๋‹ค.

๐Ÿ“Œ 1๋‹จ๊ณ„: CodePen์—์„œ “Pen URL” ๋ณต์‚ฌํ•˜๊ธฐ

  1. CodePen์—์„œ ์›ํ•˜๋Š” ์ฝ”๋“œ ์Šค๋‹ˆํŽซ์„ ์—ฝ๋‹ˆ๋‹ค.
  2. ๋ธŒ๋ผ์šฐ์ € ์ฃผ์†Œ์ฐฝ์—์„œ ํ•ด๋‹น Pen์˜ URL์„ ๋ณต์‚ฌํ•ฉ๋‹ˆ๋‹ค.
    • ์˜ˆ์‹œ: https://codepen.io/username/pen/abcd123

๐Ÿ“Œ 2๋‹จ๊ณ„: ์›Œ๋“œํ”„๋ ˆ์Šค์—์„œ ๋งํฌ ์ถ”๊ฐ€ํ•˜๊ธฐ

  1. ์›Œ๋“œํ”„๋ ˆ์Šค ๋ธ”๋ก ํŽธ์ง‘๊ธฐ์—์„œ ์ƒˆ ๊ธ€ ์ž‘์„ฑ์„ ์‹œ์ž‘ํ•ฉ๋‹ˆ๋‹ค.
  2. “+” ๋ฒ„ํŠผ์„ ๋ˆŒ๋Ÿฌ “๋‹จ๋ฝ” ๋ธ”๋ก์„ ์ถ”๊ฐ€ํ•ฉ๋‹ˆ๋‹ค.
  3. ๋ณต์‚ฌํ•œ CodePen URL์„ ๊ทธ๋Œ€๋กœ ๋ถ™์—ฌ๋„ฃ์Šต๋‹ˆ๋‹ค.

๐Ÿ“Œ ์ถ”๊ฐ€ ํŒ:

  • ์ผ๋ถ€ ํ…Œ๋งˆ์—์„œ๋Š” ์ด ๋ฐฉ๋ฒ•์œผ๋กœ CodePen์ด ์ž๋™์œผ๋กœ ์ž„๋ฒ ๋“œ๋  ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค.
  • ํ•˜์ง€๋งŒ, ์ž๋™์œผ๋กœ ํ‘œ์‹œ๋˜์ง€ ์•Š๋Š”๋‹ค๋ฉด “๋งํฌ ์‚ฝ์ž…” ๋ฒ„ํŠผ์„ ๋ˆŒ๋Ÿฌ ์ง์ ‘ ์ถ”๊ฐ€ํ•  ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค.

โ— ์ด ๋ฐฉ๋ฒ•์˜ ๋‹จ์ :

  • CodePen์„ ์™„์ „ํ•œ ์ฝ”๋“œ ํ˜•ํƒœ๋กœ ํ‘œ์‹œํ•˜๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๋ผ, ํด๋ฆญํ•˜๋ฉด CodePen ์‚ฌ์ดํŠธ๋กœ ์ด๋™ํ•˜๋Š” ๋ฐฉ์‹์ž…๋‹ˆ๋‹ค.
  • ๋”ฐ๋ผ์„œ HTML ๋ธ”๋ก์„ ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•(๋ฐฉ๋ฒ• 1)์ด ๋” ์ถ”์ฒœ๋ฉ๋‹ˆ๋‹ค!

โœ… ๋ฐฉ๋ฒ• 3: <iframe> ํƒœ๊ทธ๋ฅผ ์ด์šฉํ•œ CodePen ์‚ฝ์ž…

CodePen์˜ HTML ์ฝ”๋“œ๋ฅผ ๊ฐ€์ ธ์™€์„œ ์ง์ ‘ <iframe> ํƒœ๊ทธ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์‚ฝ์ž…ํ•˜๋Š” ๋ฐฉ๋ฒ•์ž…๋‹ˆ๋‹ค.
์ด ๋ฐฉ๋ฒ•์€ HTML ๋ธ”๋ก ์‚ฌ์šฉ๋ฒ•๊ณผ ๋น„์Šทํ•˜์ง€๋งŒ, ์กฐ๊ธˆ ๋” ์ž์œ ๋กญ๊ฒŒ ์ปค์Šคํ„ฐ๋งˆ์ด์ง•ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๐Ÿ“Œ 1๋‹จ๊ณ„: CodePen์—์„œ <iframe> ์ฝ”๋“œ ๋ณต์‚ฌํ•˜๊ธฐ

  1. CodePen์—์„œ ์›ํ•˜๋Š” ์ฝ”๋“œ ํŽ˜์ด์ง€๋กœ ์ด๋™ํ•ฉ๋‹ˆ๋‹ค.
  2. “Embed” ๋ฒ„ํŠผ์„ ํด๋ฆญํ•˜๋ฉด HTML ์ฝ”๋“œ๊ฐ€ ๋‚˜ํƒ€๋‚ฉ๋‹ˆ๋‹ค.
  3. ์—ฌ๊ธฐ์„œ <iframe> ํƒœ๊ทธ๊ฐ€ ํฌํ•จ๋œ ๋ถ€๋ถ„์„ ๋ณต์‚ฌํ•ฉ๋‹ˆ๋‹ค.

๐Ÿ“Œ 2๋‹จ๊ณ„: ์›Œ๋“œํ”„๋ ˆ์Šค์—์„œ HTML ๋ธ”๋ก ์ถ”๊ฐ€ํ•˜๊ธฐ

  1. ์›Œ๋“œํ”„๋ ˆ์Šค ๋ธ”๋ก ํŽธ์ง‘๊ธฐ์—์„œ “+” ๋ฒ„ํŠผ์„ ๋ˆŒ๋Ÿฌ “์ปค์Šคํ…€ HTML” ๋ธ”๋ก์„ ์ถ”๊ฐ€ํ•ฉ๋‹ˆ๋‹ค.
  2. ๋ฐฉ๊ธˆ ๋ณต์‚ฌํ•œ <iframe> ์ฝ”๋“œ๋ฅผ ๊ทธ๋Œ€๋กœ ๋ถ™์—ฌ๋„ฃ์Šต๋‹ˆ๋‹ค.
  3. “๋ฏธ๋ฆฌ ๋ณด๊ธฐ” ๋ฒ„ํŠผ์„ ๋ˆŒ๋Ÿฌ CodePen์ด ์ •์ƒ์ ์œผ๋กœ ํ‘œ์‹œ๋˜๋Š”์ง€ ํ™•์ธํ•ฉ๋‹ˆ๋‹ค.

๐Ÿ’ก ์ถ”๊ฐ€ ์„ค์ •:

  • <iframe> ํƒœ๊ทธ์˜ ํฌ๊ธฐ๋ฅผ ์กฐ์ ˆํ•˜๋ ค๋ฉด width="100%" height="500" ๋“ฑ์œผ๋กœ ์„ค์ •ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
  • ์ด ๋ฐฉ๋ฒ•์„ ์‚ฌ์šฉํ•˜๋ฉด CodePen์˜ ํŠน์ • ๋ถ€๋ถ„๋งŒ ํ‘œ์‹œํ•˜๋Š” ๋“ฑ ๋งž์ถค ์กฐ์ •์ด ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.

๐Ÿ”น CodePen ์‚ฝ์ž… ์‹œ ์œ ์˜ํ•  ์ !

โœ” Gutenberg์—์„œ๋Š” ์ž๋™ ์ธ์‹๋˜์ง€ ์•Š์œผ๋ฏ€๋กœ “์ปค์Šคํ…€ HTML ๋ธ”๋ก”์„ ํ™œ์šฉํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.
โœ” CodePen์˜ JavaScript ๋ฐ CSS๊ฐ€ ์ œ๋Œ€๋กœ ๋กœ๋“œ๋˜๋„๋ก <script> ํƒœ๊ทธ๊ฐ€ ํฌํ•จ๋œ ์ฝ”๋“œ๋ฅผ ์‚ฌ์šฉํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.
โœ” CodePen์˜ ๋ฌด๋ฃŒ ํ”Œ๋žœ์—์„œ๋Š” ์ผ๋ถ€ ์™ธ๋ถ€ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์‚ฌ์šฉ์ด ์ œํ•œ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.


๐ŸŽฏ ๊ฒฐ๋ก : ์–ด๋–ค ๋ฐฉ๋ฒ•์ด ๊ฐ€์žฅ ์ข‹์„๊นŒ?

๋ฐฉ๋ฒ•์‚ฌ์šฉ ๋‚œ์ด๋„์žฅ์ ๋‹จ์ 
๋ฐฉ๋ฒ• 1: ์ปค์Šคํ…€ HTML ๋ธ”๋ก ์‚ฌ์šฉ (๊ฐ€์žฅ ์ถ”์ฒœ!)โญโญ์ฝ”๋“œ๊ฐ€ ์™„์ „ํ•˜๊ฒŒ ํ‘œ์‹œ๋จ์—†์Œ
๋ฐฉ๋ฒ• 2: CodePen ๋งํฌ ์‚ฝ์ž…โญ๊ฐ„๋‹จํ•˜๊ฒŒ ์ถ”๊ฐ€ ๊ฐ€๋ŠฅCodePen ์‚ฌ์ดํŠธ๋กœ ์ด๋™ํ•ด์•ผ ํ•จ
๋ฐฉ๋ฒ• 3: <iframe> ํƒœ๊ทธ ํ™œ์šฉโญโญโญ์ฝ”๋“œ ๋งž์ถค ์„ค์ • ๊ฐ€๋Šฅ์ง์ ‘ HTML ์ˆ˜์ • ํ•„์š”

๐Ÿ”ฅ ๊ฐ€์žฅ ์ถ”์ฒœํ•˜๋Š” ๋ฐฉ๋ฒ•์€ “์ปค์Šคํ…€ HTML ๋ธ”๋ก”์„ ์‚ฌ์šฉํ•œ ๋ฐฉ๋ฒ•(๋ฐฉ๋ฒ• 1)์ž…๋‹ˆ๋‹ค.
์‰ฝ๊ณ  ๋น ๋ฅด๋ฉฐ, CodePen ์ฝ”๋“œ๊ฐ€ ๊น”๋”ํ•˜๊ฒŒ ํ‘œ์‹œ๋ฉ๋‹ˆ๋‹ค! ๐Ÿ’ก