๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ

๐Ÿ’ป Deep Wide Programming/Html & Css

[์ƒํ™œ์ฝ”๋”ฉ] Welcome back to Coding world!

728x90
๋ฐ˜์‘ํ˜•

์ฝ”๋”ฉ์ด ๋‚จ๊ธด ์“ฐ๋ผ๋ฆฐ ์ž”์ƒ

๋ฏฟ๊ฒจ์ง€์ง€ ์•Š๊ฒ ์ง€๋งŒ 2016๋…„ ๋ฉ‹์Ÿ์ด์‚ฌ์ž์ฒ˜๋Ÿผ์„ ํ–ˆ์—ˆ๋‹ค. ๋ฐ˜ํ•™๊ธฐ ์ˆ˜ํ–‰ํ•˜๊ณ , ์ž์ฒด ์ฐฝ์—…ํ”„๋กœ์ ํŠธ๋ฅผ ์ง„ํ–‰ํ•  ๋•Œ์ฏค ๋‚˜๋Š” ํƒˆํ‡ด๋ฅผ ํ–ˆ๋‹ค. ๊ทธ๋•Œ ๊ทธ ์ปค๋ฎค๋‹ˆํ‹ฐ์— ์ •๋ง ์œ ๋Šฅํ•œ ์„ ๋ฐฐ๋“ค์ด ๋งŽ์•˜๋˜ ๊ฒƒ์œผ๋กœ ๊ธฐ์–ตํ•œ๋‹ค. ์ •์„ ๋ถ™์ด์ง€ ๋ชปํ•œ๊ฒŒ ์ฐธ ์•„์‰ฝ๊ธด ํ•˜์ง€๋งŒ.. ๋‹น์‹œ ์ •๋ง ๋ญ๊ฐ€ ๋ญ”์ง€๋„ ๋ชจ๋ฅธ์ฑ„, ๋‚˜๋„ ๋ญ”๊ฐ€๋ฅผ.. ์–ดํ”Œ ๊ฐ™์€ ๊ฑธ ๋งŒ๋“ค๊ณ  ์‹ถ์–ด! ๋ผ๋Š” ํ๋ฆฌ๋ฉํ……ํ•œ ์ƒ๊ฐ ํ•˜๋‚˜๋กœ ํŒจ๊ธฐ ๋„˜์น˜๊ฒŒ ์ง€์›ํ•ด์„œ ์–ด์ฐŒ์ €์ฐŒ ํ•ฉ๊ฒฉ์„ ํ–ˆ๋‹ค. ์›น๊ณผ ์•ฑ์ด ๊ฐœ๋ฐœ์„ ํ•˜๋Š”๋ฐ ๋ญ๊ฐ€ ๋‹ค๋ฅธ์ง€, ๊ฐœ๋ฐœ์ด๋ผ๋Š”๊ฒŒ ์–ด๋–ค ์˜๋ฏธ์ธ์ง€ ์ •๋ง ํ•˜๋‚˜๋„ ๋ชจ๋ฅด๊ณ  ๋“ค์–ด๊ฐ”๋‹ค. ๊ทธ๋ž˜์„œ ๋”ฑ ํ•ฉ๊ฒฉํ–ˆ๋Š”๋ฐ, ์—ฌ๊ธฐ์„œ ์›น ๊ฐœ๋ฐœ์„ ํ•œ๋‹ค๋Š” ๊ฒƒ์„ ์•Œ๊ณ ์„œ ์—ฅ? ํ–ˆ๋‹ค. ์‚ฌ์‹ค ๋‹น์‹œ ์™œ ์—ฅ?ํ–ˆ๋Š”์ง€๋„ ๋ชจ๋ฅด๊ฒ ๋‹ค.. ์•ฑ์„ ์™œ ์„ ํ˜ธํ–ˆ๋Š”์ง€ ์ด์œ ๋„ ๋”ฑํžˆ ์—†๋‹ค. ๊ทธ๋ƒฅ ์•ฑ์ด ์™ ์ง€ ๋” ๊ฐ„์ง€๋‚˜๋ณด์˜€๊ธฐ ๋•Œ๋ฌธ์ด๋ฆฌ๋ผ.. ๋‚ด๊ฐ€ 16๋…„๋„๋ถ€ํ„ฐ ๊ฐœ๋ฐœ์— ๋งˆ์Œ์„ ๋ถ™์ผ ์ˆ˜ ์žˆ์—ˆ๋‹ค๋ฉด, ์ง€๊ธˆ์ฏค ๋‚ด ์ธ์ƒ์€ 180๋„ ๋‹ฌ๋ผ์ ธ์žˆ์„์ง€ ๋ชจ๋ฅธ๋‹ค. ๋‹น์‹œ์˜ ๋‚˜๋Š” ๋Ÿฌ๋‹์ปค๋ธŒ๋ฅผ ๋„˜์ง€ ๋ชปํ•˜๊ณ  ํ‘น ์ฃผ์ €์•‰์€ ๋Š๋‚Œ์ด์—ˆ๋‹ค. ๋จธ๋ฆฌ๊ฐ€ ๋”ฐ๋ผ์ฃผ์ง€ ์•Š์•˜๋‹ค. ๊ทธ๋ž˜๋„ html, css๊นŒ์ง€๋Š” ์žฌ๋ฏธ์žˆ๊ฒŒ ํ–ˆ๋˜ ๊ธฐ์–ต์ด ๋‚œ๋‹ค. ๊ทธ๋Ÿฐ๋ฐ ๋ฃจ๋น„์˜จ๋ ˆ์ผ์ฆˆ๋ฅผ ๋ฐฐ์šฐ๋ฉด์„œ ๋ญ”๊ฐ€ ๋จธ๋ฆฌ๊ฐ€ ๋Œ์ด ๋œ ๊ธฐ๋ถ„์„ ๋Š๊ผˆ๋‹ค. ๊ทธ๋•Œ ๋‚˜์˜ ๊ฐ€์žฅ ํฐ ๋ฌธ์ œ๋Š”, ์ˆ˜ํ•™๊ณต์‹์ฒ˜๋Ÿผ ๋ฌด์ž‘์ • ์™ธ์šฐ๋ ค๊ณ  ํ–ˆ๋‹ค๋Š” ๊ฒƒ์ด๋‹ค. ๊ทธ๋Ÿฐ๋ฐ ์‹ค์ œ ์ฝ”๋”ฉํ•˜๋Š” ์นœ๊ตฌ๋“ค์„ ๋ณด๋‹ˆ, ๊ตฌ๊ธ€๋ง์ด ๋””ํดํŠธ์˜€๋‹ค๋Š” ๊ฒƒ์ด๋‹ค. ๊ทธ๋ฆฌ๊ณ  2020๋…„. ๋‹ค์‹œ 4๋…„๋งŒ์— ๋Œ๊ณ  ๋Œ์•„ ์ฝ”๋”ฉ์˜ ์„ธ๊ณ„๋กœ ๋Œ์•„์™”๋‹ค. ๋‚˜๋Š” ๊ผญ ์ด๋ ‡๊ฒŒ ํ•œ ๋ฐ•์ž ๋Š๋ฆฌ๋‹ค. ์ด์ œ ๋†€๋ž์ง€๋„ ์•Š๊ณ  ๊ทธ๋Ÿฌ๋ ค๋‹ˆ ํ•œ๋‹ค. ํฌ๊ธฐํ–ˆ๋‹ค๊ฐ€ ๋‹ค์‹œ ์‹œ์ž‘ํ•˜๋Š” ๋จธ์“ฑํ•จ์ด ์žˆ์ง€๋งŒ, ์‹ ๋…์„ ๊ฐ–๊ณ  ํŒ๋‹จ์„ ๋ฐ”๊พธ๋Š” ์ผ์€ ๋ถ€๋„๋Ÿฌ์šด ์ผ์ด ์•„๋‹ˆ๋‹ค. ์žฌ๋„์ „์€ ์•„๋ฆ„๋‹ค์šด ์ผ์ด์ง€. 

 

 


Welcome back!

์•ž์œผ๋กœ ๋‹ค์Œ์˜ ์„ธ๊ฐ€์ง€์™€ UXUI ๊ณต๋ถ€๋ฅผ ํ•จ๊ป˜ ํ•˜๋ฉฐ, UXUI์™€ ์ฝ”๋”ฉ์œผ๋กœ ์ด์–ด์ง€๋Š” ๊ทธ ๋งฅ๋ฝ์„ ํ•จ๊ป˜ ์ดํ•ดํ•ด๋ณด๋„๋ก ํ•˜๊ฒ ๋‹ค. 

1. HTML

2. CSS

3. Javascript

 

 

์ƒํ™œ์ฝ”๋”ฉ WEB1 - HTML & Internet ๊ฐ•์˜ ์ค‘ ์ผ๋ถ€ ์บก์ณ

๋‹ค์–‘ํ•œ ์ปดํ“จํ„ฐ ์–ธ์–ด๊ฐ€ ์žˆ๋Š”๋ฐ, ๊ทธ ์ค‘์— ์›นํŽ˜์ด์ง€๋ฅผ ๋งŒ๋“œ๋Š” ์–ธ์–ด๊ฐ€ ๋ฐ”๋กœ 'html'์ด๋‹ค. 

 

html์˜ ์ข‹์€ ์ 

1) ์‰ฝ๋‹ค

2) ์ค‘์š”ํ•˜๋‹ค (์ธ๋ฅ˜๊ฐ€ ์ƒ์‚ฐํ•˜๋Š” ๊ฑฐ์˜ ๋ชจ๋“  ๋””์ง€ํ„ธ ์ •๋ณด๋ฅผ ๋‹ค๋ฃจ๋Š” ๊ฒƒ์ด ์›นํŽ˜์ด์ง€์ด๋ฉฐ, ๊ทธ๊ฒƒ์„ ๋งŒ๋“œ๋Š” ์–ธ์–ด๊ฐ€ ๋ฐ”๋กœ html์ด๋‹ค)

3) ์›น= Public Domain

 

์ค€๋น„๋ฌผ

1. ์›น๋ธŒ๋ผ์šฐ์ €

2. ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•˜๋Š” ํ”„๋กœ๊ทธ๋žจ = ํŽธ์ง‘ํ•˜๋Š” ํ”„๋กœ๊ทธ๋žจ = ์—๋””ํ„ฐ

(์ด๋ฏธ ์šฐ๋ฆฌ์˜ ์ปดํ“จํ„ฐ์—๋Š” ํ›Œ๋ฅญํ•œ ์—๋””ํ„ฐ๊ฐ€ ์กด์žฌํ•˜๊ณ  ์žˆ๋‹ค.)
ex. ์œˆ๋„์šฐ -> ๋ฉ”๋ชจ์žฅ

๊ทธ๋Ÿฌ๋‚˜ ๊ฐ๊ฐ์˜ ์—๋””ํ„ฐ๋งˆ๋‹ค ์‚ฌ์šฉ๋ฒ•์ด ์ข€ ๋‹ค๋ฅด๊ณ , ์ฝ”๋”ฉ์„ ๋ชฉ์ ์œผ๋กœ ํ•œ ๊ฒƒ์ด ์•„๋‹ˆ๊ธฐ ๋•Œ๋ฌธ์—, 

์ด ์ „์šฉ ๋„๊ตฌ = atom์„ ์‚ฌ์šฉํ•˜๊ฒ ๋‹ค! 

ํ•ต์‹ฌ์€, ์—๋””ํ„ฐ๋ฅผ ์ฐพ์•„๋‚ผ ์ˆ˜ ์žˆ๋Š” ๋Šฅ๋ ฅ! ๋” ์ข‹์€ ๋ฒ„์ „, ํ˜„ ์‹œ์  ์ตœ์‹  ์—๋””ํ„ฐ๋“ค์ด ์—…๋กœ๋“œ ๋˜์–ด์žˆ์„ ๊ฒƒ์ด๋‹ค!

HTML Editor ๊ฒ€์ƒ‰ or best HTML Editor 2020 ๊ฒ€์ƒ‰

 

 

๋‚˜๋Š” atom์ด ์•ˆ ๊น”๋ ค์„œ ํ•œ ์‹œ๊ฐ„๋™์•ˆ ์”จ๋ฆ„ํ•˜๋‹ค๊ฐ€.. Visual studio Code๋ฅผ ๊น”์•˜๋‹ค. ๋‚ด์ผ๋ถ€ํ„ฐ ์‹œ์ž‘๋  ๋‚˜์˜ ์ฝ”๋”ฉ ์—ฌ์ •.. ์ปค๋ฐ ์‘จ.!

728x90
๋ฐ˜์‘ํ˜•