
์๋ํ๋ ์ค์์ CodePen์ ์ฌ์ฉํ๋ฉด ์น์์ ๊ณต์ ๋ HTML, CSS, JavaScript ์ฝ๋๋ฅผ ์ฝ๊ฒ ์๋ฒ ๋(embed)ํ ์ ์์ต๋๋ค.
ํนํ, ๋ธ๋ก ํธ์ง๊ธฐ(Gutenberg)๋ฅผ ์ฌ์ฉํ ๊ฒฝ์ฐ, ์ปค์คํ
HTML ๋ธ๋ก์ ํ์ฉํ๋ฉด ์ฝ๋๊ฐ ๊น๋ํ๊ฒ ์ฝ์
๋ฉ๋๋ค.
์ด์ CodePen์ ์๋ํ๋ ์ค ๋ธ๋ก ํธ์ง๊ธฐ์ ์ฝ์ ํ๋ ์ธ ๊ฐ์ง ๋ฐฉ๋ฒ์ ์ฐจ๊ทผ์ฐจ๊ทผ ์ค๋ช ํด ๋๋ฆด๊ฒ์! ๐
๋ชฉ์ฐจ
โ ๋ฐฉ๋ฒ 1: “์ปค์คํ HTML ๋ธ๋ก”์ ์ฌ์ฉํ CodePen ์ฝ์ (๊ฐ์ฅ ์ถ์ฒ!)
์ด ๋ฐฉ๋ฒ์ ๊ฐ์ฅ ํ์คํ๊ณ ๊นจ๋ํ๊ฒ CodePen์ ํ์ํ๋ ๋ฐฉ๋ฒ์ ๋๋ค.
๐ 1๋จ๊ณ: CodePen์์ ์ฝ๋ ๋ณต์ฌํ๊ธฐ
- CodePen(https://codepen.io/)์ ์ ์ํ์ฌ ์ํ๋ ์ฝ๋๋ฅผ ์ฐพ์ต๋๋ค.
- ์ฝ๋ ์ฐฝ ์๋์ชฝ์ ์๋ “Embed” ๋ฒํผ์ ํด๋ฆญํฉ๋๋ค.
- CodePen์ด ์ ๊ณตํ๋ ๋ค์ํ ์๋ฒ ๋ ์ต์ ์ด ๋์ค๋๋ฐ, ์ฌ๊ธฐ์ “Copy Embed Code” ๋ฒํผ์ ๋๋ฌ ์ฝ๋๋ฅผ ๋ณต์ฌํฉ๋๋ค.
๐ก ์ฐธ๊ณ : CodePen์ HTML <iframe>
ํ๊ทธ๋ฅผ ์ฌ์ฉํ์ฌ ์ฝ๋ ์ค๋ํซ์ ์ฝ์
ํฉ๋๋ค.
๐ 2๋จ๊ณ: ์๋ํ๋ ์ค์์ “์ปค์คํ HTML ๋ธ๋ก” ์ถ๊ฐํ๊ธฐ
- ์๋ํ๋ ์ค ๋ธ๋ก ํธ์ง๊ธฐ(Gutenberg)์์ ์ ๊ธ์ ์์ฑํฉ๋๋ค.
- ๋ธ๋ก ์ถ๊ฐ ๋ฒํผ(“+” ๋ฒํผ)์ ํด๋ฆญํฉ๋๋ค.
- ๊ฒ์์ฐฝ์ **”์ปค์คํ HTML”**์ ์ ๋ ฅํ ํ ํด๋ฆญํ์ฌ ์ถ๊ฐํฉ๋๋ค.
๐ 3๋จ๊ณ: CodePen ์ฝ๋ ๋ถ์ฌ๋ฃ๊ธฐ & ๋ฏธ๋ฆฌ ๋ณด๊ธฐ
- “์ปค์คํ HTML” ๋ธ๋ก์ด ์ถ๊ฐ๋๋ฉด, ๋ฐฉ๊ธ ๋ณต์ฌํ CodePen ์ฝ๋๋ฅผ ๋ถ์ฌ๋ฃ์ต๋๋ค.
- “๋ฏธ๋ฆฌ๋ณด๊ธฐ” ๋ฒํผ์ ๋๋ฌ CodePen์ด ์ ์์ ์ผ๋ก ํ์๋๋์ง ํ์ธํฉ๋๋ค.
- ์ด์ ์์ด ๋ณด์ด๋ฉด ๊ธ์ ๋ฐํํ๋ฉด ๋ฉ๋๋ค! ๐
๐ ์ด ๋ฐฉ๋ฒ์ ์ฌ์ฉํ๋ฉด CodePen์ด ์ ํํ๊ฒ ํ์๋๋ฉฐ, ๋ณ๋์ ์ค์ ์์ด๋ ์ฝ๋๊ฐ ๋ฐ๋ก ์คํ๋ฉ๋๋ค.
โ ๋ฐฉ๋ฒ 2: CodePen ๋งํฌ๋ฅผ ์ง์ ์ฝ์ ํ๊ธฐ
์ด ๋ฐฉ๋ฒ์ CodePen์ ์ ์ฒด ์ฝ๋๋ฅผ ๋ถ์ฌ๋ฃ๋ ๊ฒ์ด ์๋๋ผ, ๋จ์ํ ๋งํฌ(URL)๋ง ์ฝ์ ํ๋ ๋ฐฉ์์ ๋๋ค.
๐ 1๋จ๊ณ: CodePen์์ “Pen URL” ๋ณต์ฌํ๊ธฐ
- CodePen์์ ์ํ๋ ์ฝ๋ ์ค๋ํซ์ ์ฝ๋๋ค.
- ๋ธ๋ผ์ฐ์ ์ฃผ์์ฐฝ์์ ํด๋น Pen์ URL์ ๋ณต์ฌํฉ๋๋ค.
- ์์:
https://codepen.io/username/pen/abcd123
- ์์:
๐ 2๋จ๊ณ: ์๋ํ๋ ์ค์์ ๋งํฌ ์ถ๊ฐํ๊ธฐ
- ์๋ํ๋ ์ค ๋ธ๋ก ํธ์ง๊ธฐ์์ ์ ๊ธ ์์ฑ์ ์์ํฉ๋๋ค.
- “+” ๋ฒํผ์ ๋๋ฌ “๋จ๋ฝ” ๋ธ๋ก์ ์ถ๊ฐํฉ๋๋ค.
- ๋ณต์ฌํ CodePen URL์ ๊ทธ๋๋ก ๋ถ์ฌ๋ฃ์ต๋๋ค.
๐ ์ถ๊ฐ ํ:
- ์ผ๋ถ ํ ๋ง์์๋ ์ด ๋ฐฉ๋ฒ์ผ๋ก CodePen์ด ์๋์ผ๋ก ์๋ฒ ๋๋ ์๋ ์์ต๋๋ค.
- ํ์ง๋ง, ์๋์ผ๋ก ํ์๋์ง ์๋๋ค๋ฉด “๋งํฌ ์ฝ์ ” ๋ฒํผ์ ๋๋ฌ ์ง์ ์ถ๊ฐํ ์๋ ์์ต๋๋ค.
โ ์ด ๋ฐฉ๋ฒ์ ๋จ์ :
- CodePen์ ์์ ํ ์ฝ๋ ํํ๋ก ํ์ํ๋ ๊ฒ์ด ์๋๋ผ, ํด๋ฆญํ๋ฉด CodePen ์ฌ์ดํธ๋ก ์ด๋ํ๋ ๋ฐฉ์์ ๋๋ค.
- ๋ฐ๋ผ์ HTML ๋ธ๋ก์ ์ฌ์ฉํ๋ ๋ฐฉ๋ฒ(๋ฐฉ๋ฒ 1)์ด ๋ ์ถ์ฒ๋ฉ๋๋ค!
โ
๋ฐฉ๋ฒ 3: <iframe>
ํ๊ทธ๋ฅผ ์ด์ฉํ CodePen ์ฝ์
CodePen์ HTML ์ฝ๋๋ฅผ ๊ฐ์ ธ์์ ์ง์ <iframe>
ํ๊ทธ๋ฅผ ์ฌ์ฉํ์ฌ ์ฝ์
ํ๋ ๋ฐฉ๋ฒ์
๋๋ค.
์ด ๋ฐฉ๋ฒ์ HTML ๋ธ๋ก ์ฌ์ฉ๋ฒ๊ณผ ๋น์ทํ์ง๋ง, ์กฐ๊ธ ๋ ์์ ๋กญ๊ฒ ์ปค์คํฐ๋ง์ด์งํ ์ ์์ต๋๋ค.
๐ 1๋จ๊ณ: CodePen์์ <iframe>
์ฝ๋ ๋ณต์ฌํ๊ธฐ
- CodePen์์ ์ํ๋ ์ฝ๋ ํ์ด์ง๋ก ์ด๋ํฉ๋๋ค.
- “Embed” ๋ฒํผ์ ํด๋ฆญํ๋ฉด HTML ์ฝ๋๊ฐ ๋ํ๋ฉ๋๋ค.
- ์ฌ๊ธฐ์
<iframe>
ํ๊ทธ๊ฐ ํฌํจ๋ ๋ถ๋ถ์ ๋ณต์ฌํฉ๋๋ค.
๐ 2๋จ๊ณ: ์๋ํ๋ ์ค์์ HTML ๋ธ๋ก ์ถ๊ฐํ๊ธฐ
- ์๋ํ๋ ์ค ๋ธ๋ก ํธ์ง๊ธฐ์์ “+” ๋ฒํผ์ ๋๋ฌ “์ปค์คํ HTML” ๋ธ๋ก์ ์ถ๊ฐํฉ๋๋ค.
- ๋ฐฉ๊ธ ๋ณต์ฌํ
<iframe>
์ฝ๋๋ฅผ ๊ทธ๋๋ก ๋ถ์ฌ๋ฃ์ต๋๋ค. - “๋ฏธ๋ฆฌ ๋ณด๊ธฐ” ๋ฒํผ์ ๋๋ฌ 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 ์ฝ๋๊ฐ ๊น๋ํ๊ฒ ํ์๋ฉ๋๋ค! ๐ก