๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
๊ธฐํƒ€+๐›ผ/Web

[HTML] ํ‹ฐ์Šคํ† ๋ฆฌ Mac ์ฝ”๋“œ ์ ์šฉ ํ›„, ๋ถํด๋Ÿฝ ํ…Œ๋งˆ ๊ฒ€์ƒ‰ ๋ฒ„ํŠผ ๋จนํ†ต ํ•ด๊ฒฐ

by lucky__lucy 2023. 10. 30.

1. ๋ฌธ์ œ ๋ฐœ์ƒ

- Mac ์Šคํƒ€์ผ ์ฝ”๋“œ๋ธ”๋ก ์ ์šฉ

์šฐ์„ , ์•„๋ž˜ ํ‹ฐ์Šคํ† ๋ฆฌ ๊ฒŒ์‹œ๊ธ€์„ ๋”ฐ๋ผํ•˜๋ฉฐ ์ฝ”๋“œ๋ธ”๋ก์„ Mac ์Šคํƒ€์ผ๋กœ ๋ณ€๊ฒฝํ–ˆ๋‹ค.

๋ฐ”๊พผ ์ฝ”๋“œ๋ธ”๋ก ์Šคํƒ€์ผ

 

[ํ‹ฐ์Šคํ† ๋ฆฌ ๋ธ”๋กœ๊ทธ ํ…Œ๋งˆ] - 1. ์ฝ”๋“œ ๋ธ”๋ก ๋””์ž์ธ์„ mac ์ฝ”๋“œ ์Šคํƒ€์ผ๋กœ ๋ฐ”๊พธ๊ธฐ

๊ธ€์„ ์ฝ๊ธฐ ์ „ ๋ฏธ๋ฆฌ ๋ณด๋Š” ์™„์„ฑ๋ณธ์€ ๋‹ค์Œ๊ณผ ๊ฐ™๋‹ค. ์–ด๋–ป๊ฒŒ ๋งŒ๋“ค์—ˆ๊ณ  ์ ์šฉํ–ˆ๋Š”์ง€ ๊ถ๊ธˆํ•˜์‹  ๋ถ„๋“ค์€ ์•„๋ž˜๋กœ ์Šคํฌ๋กค! See the Pen tistory code block by MiJeong Kim (@sap03110) on CodePen. ๋ฐœ๋‹จ ์—ฌ๋Š ๋‚ ๊ณผ ๋‹ค๋ฆ„์—†์ด ํšŒ์‚ฌ

guiyomi.tistory.com

 

 

- ํ‹ฐ์Šคํ† ๋ฆฌ ๊ฒ€์ƒ‰์ฐฝ๊ณผ ํ”„๋กœํ•„ ๋จนํ†ต!

๊ทธ๋Ÿฌ๋‚˜ ์ฝ”๋“œ๋ธ”๋ก ์Šคํƒ€์ผ ๋ณ€๊ฒฝ ํ›„, ํ‹ฐ์Šคํ† ๋ฆฌ ๊ฒ€์ƒ‰์ฐฝ๊ณผ ํ”„๋กœํ•„ ๋ถ€๋ถ„์ด ๋จนํ†ต์ด ๋˜์—ˆ๋‹ค. ํ‰์†Œ ํ”„๋กœํ•„ > ๊ด€๋ฆฌ ๋˜๋Š” ๊ธ€์“ฐ๊ธฐ๋ฅผ ์ž์ฃผ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์—ˆ๊ธฐ ๋•Œ๋ฌธ์— ๋ถˆํŽธํ–ˆ๋‹ค.

 


 

2. ํ•ด๊ฒฐ๋ฒ•

- Javascript ํŒŒ์ผ ์ถ”๊ฐ€

ํ•ด๊ฒฐ๋ฒ•์€ ๊ฐ„๋‹จํ•˜๋‹ค. ์šฐ์„  ์•„๋ž˜ ๋งํฌ์— ๋“ค์–ด๊ฐ€์„œ ์˜ค๋ฅธ์ชฝ ๋ฒ„ํŠผ > ๋‹ค๋ฅธ ์ด๋ฆ„์œผ๋กœ ์ €์žฅ์œผ๋กœ ๋ถํด๋ฆฝ Javascript ์ฝ”๋“œ๋ฅผ ๋‹ค์šด๋กœ๋“œ ๋ฐ›๋Š”๋‹ค. 

https://tistory3.daumcdn.net/tistory/4545489/skin/images/script.js

 

 

ํ‹ฐ์Šคํ† ๋ฆฌ ์Šคํ‚จํŽธ์ง‘ > html ํŽธ์ง‘ > ํŒŒ์ผ ์—…๋กœ๋“œ ํƒญ์—์„œ ๋ฐฉ๊ธˆ ๋‹ค์šด๋ฐ›์€ Javascript ํŒŒ์ผ์„ ์—…๋กœ๋“œํ•œ๋‹ค.

 

 

HTML ํƒญ์œผ๋กœ ๋„˜์–ด๊ฐ€์„œ <script defer src="./images/codeblock.js"></script> ์œ„์— <script src="./images/script.js"></script> ํ•œ ์ค„์„ ์ถ”๊ฐ€ํ•œ๋‹ค.

<script src="./images/script.js"></script>
<script defer src="./images/codeblock.js"></script>

 

 

- ์ •์ƒ์ ์œผ๋กœ ๋Œ์•„์˜จ ๊ฒ€์ƒ‰์ฐฝ, ํ”„๋กœํ•„

๊ทธ๋Ÿผ ๋‹ค์‹œ ์ •์ƒ์ ์œผ๋กœ ๋Œ์•„์˜จ ๊ฒ€์ƒ‰์ฐฝ๊ณผ ํ”„๋กœํ•„์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.

 


 

+ ์ถ”๊ฐ€

์ฝ”๋“œ๋ธ”๋Ÿญ์—์„œ ๋งˆ์ง€๋ง‰ ๋นˆ ์ค„์ด ์ถ”๊ฐ€๋˜์–ด ํ‘œ์‹œ๋˜๋Š” ๋ฌธ์ œ๊ฐ€ ์žˆ์—ˆ๋Š”๋ฐ, ์•„๋ž˜ ๊ธ€์„ ์ฐธ๊ณ ํ•˜์—ฌ ์ˆ˜์ •ํ–ˆ๋”๋‹ˆ ์ œ๋Œ€๋กœ ๊ณ ์ณ์กŒ๋‹ค.

codeblock.js
0.00MB

 

[๋ธ”๋กœ๊ทธ] ํ‹ฐ์Šคํ† ๋ฆฌ ๋ธ”๋กœ๊ทธ ์ฝ”๋“œ๋ธ”๋Ÿญ ๋งฅ ์Šคํƒ€์ผ๋กœ ๋ณ€๊ฒฝํ•˜๊ธฐ

๋ธ”๋กœ๊ทธ ์ฝ”๋“œ๋ธ”๋Ÿญ์„ ์˜ˆ์˜๊ฒŒ ๋ณด์ด๋Š” ๊ฒƒ์„ ์ค‘์š”ํ•˜๊ฒŒ ์ƒ๊ฐํ•œ๋‹ค. ๋งฅ ์Šคํƒ€์ผ๋กœ ์ฝ”๋“œ๋ธ”๋Ÿญ์„ ๊พธ๋ฏธ๋Š” ๊ฒƒ์ด ์˜ˆ์˜๊ฒŒ ๋ณด์—ฌ, ํ•œ ๋ฒˆ ์‹œ๋„ํ•ด ๋ณด์•˜๋‹ค. https://guiyomi.tistory.com/132 [ํ‹ฐ์Šคํ† ๋ฆฌ ๋ธ”๋กœ๊ทธ ํ…Œ๋งˆ] - 1. ์ฝ”๋“œ ๋ธ”

knewnew.tistory.com

 

728x90
๋ฐ˜์‘ํ˜•