์ฑ„๋„ํ†ก ์•„์ด์ฝ˜

๋ชจ๋ฐ”์ผ, ํƒœ๋ธ”๋ฆฟ, pc ๋ฐ˜์‘ํ˜• ์ธ์Šคํƒ€๊ทธ๋žจ ํด๋ก ์ฝ”๋”ฉ

์ด ๊ฐ•์˜๋ฅผ ํ†ตํ•ด ์ˆ˜๊ฐ•์ƒ์€ HTML, CSS, JS๋กœ ์ธ์Šคํƒ€๊ทธ๋žจ๊ณผ ๋น„์Šทํ•œ ์›น์„œ๋น„์Šค๋ฅผ ๋งŒ๋“ค ์ˆ˜์žˆ์Šต๋‹ˆ๋‹ค. ( ํ”„๋ก ํŠธ๋งŒ ๊ตฌํ˜„ํ–ˆ์Šต๋‹ˆ๋‹ค! ๋ฐฑ์—”๋“œ ์„œ๋ฒ„ ๊ตฌ์ถ•์€ ์ฐจํ›„ ๊ฐ•์˜ ์ดฌ์˜ ์˜ˆ์ •์ž…๋‹ˆ๋‹ค.)

(5.0) ์ˆ˜๊ฐ•ํ‰ 1๊ฐœ

์ˆ˜๊ฐ•์ƒ 32๋ช…

๋‚œ์ด๋„ ์ดˆ๊ธ‰

์ˆ˜๊ฐ•๊ธฐํ•œ ๋ฌด์ œํ•œ

์ธ์Šคํƒ€๊ทธ๋žจ
์ธ์Šคํƒ€๊ทธ๋žจ
์ธ์Šคํƒ€๊ทธ๋žจ
์ธ์Šคํƒ€๊ทธ๋žจ
๋‚ ๊ฐœ ๋‹ฌ๋ฆฐ ๋™์ „

๊ฐ•์˜ ์ถ”์ฒœํ•˜๊ณ  ์„ฑ์žฅ๊ณผ ์ˆ˜์ต์„ ๋งŒ๋“ค์–ด ๋ณด์„ธ์š”!

๋‚ ๊ฐœ ๋‹ฌ๋ฆฐ ๋™์ „

๋งˆ์ผ€ํŒ… ํŒŒํŠธ๋„ˆ์Šค

๊ฐ•์˜ ์ถ”์ฒœํ•˜๊ณ  ์„ฑ์žฅ๊ณผ ์ˆ˜์ต์„ ๋งŒ๋“ค์–ด ๋ณด์„ธ์š”!

์ˆ˜๊ฐ• ํ›„ ์ด๋Ÿฐ๊ฑธ ์–ป์„ ์ˆ˜ ์žˆ์–ด์š”

  • vscode ์„ธํŒ…, ํ•„์ˆ˜ extension ์„ธํŒ…

  • CSS BEM ๊ทœ์น™

  • reset.css๋ฅผ ํ™œ์šฉํ•œ ์ดˆ๊ธฐ์„ธํŒ…, ํด๋” ๋ฐ ํŒŒ์ผ๊ตฌ์กฐ ๋งŒ๋“ค๊ธฐ

  • ๋ฏธ๋””์–ด ์ฟผ๋ฆฌ๋ฅผ ํ™œ์šฉํ•œ ๋ชจ๋ฐ”์ผ, ํƒœ๋ธ”๋ฆฟ, pc ๋””๋ฐ”์ด์Šค ์ตœ์ ํ™”

  • flexbox๋ฅผ ํ™œ์šฉํ•œ ์ •๋ ฌ

  • (position, transition, transform(translate ํ•จ์ˆ˜))๋ฅผ ํ™œ์šฉ

  • grid๋ฅผ ํ™œ์šฉํ•œ ํ™”๋ฉด ๋ฐฐ์น˜

  • ๊ฒ€์ƒ‰, ์•Œ๋ฆผ, ๋”๋ณด๊ธฐ ์• ๋‹ˆ๋ฉ”์ด์…˜ ๊ตฌํ˜„

  • ์ˆœ์ˆ˜ javascript๋ฅผ ํ™œ์šฉํ•œ ์›น์บ๋Ÿฌ์…€, ๋ชจ๋ฐ”์ผ ํ„ฐ์น˜ ์บ๋Ÿฌ์…€ ๊ตฌํ˜„

  • javascript ๊ธฐ๋ณธ๋ฌธ๋ฒ•(๋ณ€์ˆ˜, ํ•จ์ˆ˜, ์กฐ๊ฑด๋ฌธ, ๋ฐ˜๋ณต๋ฌธ(for, forEach, while), ๋ฐฐ์—ด, ๊ฐ์ฒด, ์˜ต์…”๋„์ฒด์ด๋‹, arrow function, ์ด๋ฒคํŠธ์œ„์ž„(์บก์ฒ˜๋ง, ๋ฒ„๋ธ”๋ง)) ํ™œ์šฉ

  • javasript DOM ์กฐ์ž‘์„ ํ™œ์šฉํ•œ ๋žœ๋”๋ง ( createElement, appendChild, parentNode, removechild, querySelector, querySelectorAll,getElementById, children, getAttribute, setAttribute, classList.add, classList.contains, classList.toggle ... )

  • ์ˆœ์ˆ˜ javascript๋ฅผ ํ™œ์šฉํ•ด ์นดํ…Œ๊ณ ๋ฆฌ ํ•„ํ„ฐ๋ง ๊ตฌํ˜„

  • ๊ธ€์“ฐ๊ธฐ, ๋Œ“๊ธ€, ๊ณต์œ  ๋ชจ๋‹ฌ์ฐฝ, dim ์ฒ˜๋ฆฌ ๊ตฌํ˜„

  • ์ด๋ฏธ์ง€ ์—…๋กœ๋“œ, ๋น„๋””์˜ค ์žฌ์ƒ ๋ฐ ๋น„๋””์˜ค ๋ฌด์Œ์ฒ˜๋ฆฌ ๊ตฌํ˜„

  • navBar(์‚ฌ์ด๋“œ๋ฐ”, ํƒ‘, ๋ฐ”ํ…€๋ฐ”)๊ตฌํ˜„, ๋ชจ๋ฐ”์ผ์›น์— ๋งž๊ฒŒ ๋„ค๋น„๊ฒŒ์ด์…˜๋ฐ” ์ตœ์ ํ™”

  • ๋กœ๊ทธ์ธ, ํšŒ์›๊ฐ€์ž…, ํ™ˆ, ๋ฆด์Šค, ํƒ์ƒ‰, ๋ฉ”์‹œ์ง€, ํ”„๋กœํ•„ ํŽ˜์ด์ง€ ๊ตฌํ˜„

  • ๋ถ๋งˆํฌ, ์ข‹์•„์š” ๊ตฌํ˜„

  • ํฐํŠธ์–ด์ธ์„ ํ™œ์šฉํ•ด ์•„์ด์ฝ˜ ์ ์šฉํ•˜๊ธฐ

  • ๊ณตํ†ต ์ปดํฌ๋„ŒํŠธ ์ชผ๊ฐœ๊ธฐ

  • github-pages๋ฅผ ์ด์šฉํ•œ ๋ฐฐํฌ

ํ•ด๋‹น ๊ฐ•์˜๋ฅผ ์ˆ˜๊ฐ•ํ•˜๋ฉด ๊ตฌํ˜„ํ•˜๋Š” ๊ธฐ๋Šฅ๋“ค

๋กœ๊ทธ์ธ

๋”๋ณด๊ธฐ ์• ๋‹ˆ๋ฉ”์ด์…˜

ํšŒ์›๊ฐ€์ž…

๊ฒ€์ƒ‰, ์•Œ๋žŒ

๋ฉ”์‹œ์ง€

์บ๋Ÿฌ์…€

๋ฆด์Šค

์นด๋“œ ๋ฆฌ์ŠคํŠธ

๊ณต์œ  ๋ชจ๋‹ฌ

์ข‹์•„์š”, ๋ถ๋งˆํฌ

๋Œ“๊ธ€ ๋ชจ๋‹ฌ

๊ฒŒ์‹œ๋ฌผ ์ƒ์„ฑ ๋ชจ๋‹ฌ

ํƒ์ƒ‰ ํŽ˜์ด์ง€

ํ”„๋กœํ•„ ํ•„ํ„ฐ๋ง

์ผ๋ฐ˜์ธ 99%๋ฅผ ์œ„ํ•œ IT ๊ธฐ์ดˆ์ง€์‹ ๊ฐ•์˜, HTMl, CSS, JS ๋ฌธ๋ฒ• ๊ฐ•์˜์— ์ด์€ ์„ธ๋ฒˆ ์งธ ๊ฐ•์˜์ž…๋‹ˆ๋‹ค!

์ด๋ฒˆ์—๋Š” html, css, js๋ฅผ ํ™œ์šฉํ•ด ์›น์„œ๋น„์Šค๋ฅผ ๋งŒ๋“ค๊ณ  ์‹ถ์œผ์‹  ๋ถ„๋“ค์„ ์œ„ํ•ด ์ค€๋น„ํ•œ ๊ฐ•์˜์ž…๋‹ˆ๋‹ค.

์ด ๊ฐ•์˜๋ฅผ ์ˆ˜๊ฐ•ํ•˜๊ธฐ ์ „์— ์ผ๋ฐ˜์ธ 99%๋ฅผ ์œ„ํ•œ IT ๊ธฐ์ดˆ์ง€์‹ ๊ฐ•์˜๋ฅผ ์„ ์ˆ˜๊ฐ• ํ•˜์‹œ๋ฉด ๋”์šฑ๋” ์ดํ•ด๊ฐ€ ๋น ๋ฅด์ง€๋งŒ, ๋“ฃ์ง€ ์•Š์•˜๋”๋ผ๋„ ์ˆ˜๊ฐ•ํ•˜์‹œ๋Š” ๋ฐ๋Š” ๋ฌธ์ œ ์—†์Šต๋‹ˆ๋‹ค.

>> ์ผ๋ฐ˜์ธ 99%๋ฅผ ์œ„ํ•œ IT ๊ธฐ์ดˆ์ง€์‹ ๊ฐ•์˜ ๋ฌด๋ฃŒ๋กœ ๋“ค์œผ๋Ÿฌ ๊ฐ€๊ธฐ (ํด๋ฆญ)

๋‹ค๋งŒ ์ด ๊ฐ•์˜๋ฅผ ์ˆ˜๊ฐ• ํ•˜๊ธฐ์ „์— HTML, CSS, JS ์— ๋Œ€ํ•œ ๊ธฐ๋ณธ ์ง€์‹์€ ์žˆ์–ด์•ผ ์ˆ˜๊ฐ•ํ•  ๋•Œ ์ดํ•ด๊ฐ€ ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.

-> html, css, js ์™•์ดˆ๋ณด ๋ฌด๋ฃŒ๋กœ ํƒˆ์ถœํ•˜๊ธฐ ํด๋ฆญ

์ €์˜ ํ˜„์—… ๊ฒฝํ—˜์„ ๋…น์—ฌ๋‚ธ ๊ฐ•์˜์ž…๋‹ˆ๋‹ค!

์ œ๊ฐ€ ์‹œํ–‰์ฐฉ์˜ค๋ฅผ ๊ฒช์œผ๋ฉฐ ๋ฐฐ์› ๋˜ ๋…ธํ•˜์šฐ๋ฅผ ๋‹ด์•˜์Šต๋‹ˆ๋‹ค. HTML, CSS, JS์„ ํ™œ์šฉํ•˜์‹œ๊ณ  ์‹ถ์œผ์‹  ๋ถ„๋“ค์„ ์œ„ํ•ด ์ค€๋น„ ํ–ˆ์Šต๋‹ˆ๋‹ค.

ํ•ด๋‹น๊ฐ•์˜ ์ด๋ฏธ์ง€ ๋ฐ ๋น„๋””์˜ค๋Š”

https://picsum.photos

https://pravatar.cc

https://fontawesome.com/search?q=card&o=r&m=free

https://unsplash.com/ko

https://pixabay.com/ko/

๋ฅผ ์ฐธ์กฐํ–ˆ์Šต๋‹ˆ๋‹ค.

์ˆ˜๊ฐ•ํ•˜์‹ค ๋•Œ ํ•„์š”ํ•œ ์ž๋ฃŒ์™€ ์†Œ์Šค์ฝ”๋“œ๋“ค์€ ์ฒซ๊ฐ•์˜ ๋ฐ ์„น์…˜ ํ‹ˆํ‹ˆ์ด ๊ฐ•์˜์ž๋ฃŒ๋กœ ์ฒจ๋ถ€ํ–ˆ์Šต๋‹ˆ๋‹ค.

๊ธด ๊ธ€ ์ฝ์–ด์ฃผ์…”์„œ ๊ฐ์‚ฌ๋“œ๋ฆฌ๊ณ  ํ–‰๋ณตํ•œ ์ผ๋งŒ ๊ฐ€๋“ํ•˜์‹œ๊ธธ ๋ฐ”๋ž๋‹ˆ๋‹ค.

์ด๋Ÿฐ ๋ถ„๋“ค๊ป˜
์ถ”์ฒœ๋“œ๋ ค์š”

ํ•™์Šต ๋Œ€์ƒ์€
๋ˆ„๊ตฌ์ผ๊นŒ์š”?

  • ์„œ๋น„์Šค๋ฅผ ๋งŒ๋“ค์–ด๋ณด๊ณ  ์‹ถ์œผ์‹  ๋ถ„

  • ์›น ๋ฐ ์•ฑ๊ฐœ๋ฐœ์— ํฅ๋ฏธ๊ฐ€ ์žˆ์œผ์‹  ๋ถ„

  • ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ,ํ”„๋ ˆ์ž„์›Œํฌ ์‚ฌ์šฉ ์•ˆํ•˜๊ณ  ์ˆœ์ˆ˜ html, css, javascript๋งŒ ์ด์šฉํ•ด์„œ ์„œ๋น„์Šค๋ฅผ ๋งŒ๋“ค๊ณ  ์‹ถ์œผ์‹  ๋ถ„

์„ ์ˆ˜ ์ง€์‹,
ํ•„์š”ํ• ๊นŒ์š”?

  • html

  • css

  • javascript

์•ˆ๋…•ํ•˜์„ธ์š”
๋”์ฝ”๋”ฉํด๋Ÿฝ์ž…๋‹ˆ๋‹ค.

8,632

๋ช…

์ˆ˜๊ฐ•์ƒ

194

๊ฐœ

์ˆ˜๊ฐ•ํ‰

4

๊ฐœ

๋‹ต๋ณ€

4.5

์ 

๊ฐ•์˜ ํ‰์ 

9

๊ฐœ

๊ฐ•์˜

์ˆ˜๊ฐ•ํ•˜์‹œ๋Š” ๋ถ„๋“ค์€ IT ๊ณ„์—ด์— ๊ด€์‹ฌ ์žˆ์œผ์‹ค ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.
์ˆ˜๊ฐ•ํ•˜์‹œ๋Š” ๋ชจ๋“  ๋ถ„๋“ค์ด ์›ํ•˜๋Š” ๋ชฉํ‘œ ์„ฑ์ทจํ•˜์…จ์œผ๋ฉด ์ข‹๊ฒ ์Šต๋‹ˆ๋‹ค.

๋งŽ์€ ์ˆ˜๊ฐ• ๋ฐ”๋ž˜์š”.

 

 [ํ˜„์—…๊ฐœ๋ฐœ ์ด๋ ฅ] 
2019.03.02 ~ ํ˜„์žฌ ๊ฐœ๋ฐœ

 

[ํ•™๋ ฅ]

๊ฒฝํฌ๋Œ€ํ•™๊ต ์ „์ž๊ณตํ•™๊ณผ ์กธ์—… ( ํ•™์‚ฌ )

๋”๋ณด๊ธฐ

์ปค๋ฆฌํ˜๋Ÿผ

์ „์ฒด

91๊ฐœ โˆ™ (12์‹œ๊ฐ„ 57๋ถ„)

ํ•ด๋‹น ๊ฐ•์˜์—์„œ ์ œ๊ณต:

์ˆ˜์—…์ž๋ฃŒ
๊ฐ•์˜ ๊ฒŒ์‹œ์ผ: 
๋งˆ์ง€๋ง‰ ์—…๋ฐ์ดํŠธ์ผ: 

์ˆ˜๊ฐ•ํ‰

์ „์ฒด

1๊ฐœ

5.0

1๊ฐœ์˜ ์ˆ˜๊ฐ•ํ‰

  • ์ด์ข…์šด๋‹˜์˜ ํ”„๋กœํ•„ ์ด๋ฏธ์ง€
    ์ด์ข…์šด

    ์ˆ˜๊ฐ•ํ‰ 35

    โˆ™

    ํ‰๊ท  ํ‰์  5.0

    5

    100% ์ˆ˜๊ฐ• ํ›„ ์ž‘์„ฑ

    ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ž‘ html css ๋ฐฐ์›Œ๋†“๊ณ  ๋น„๋””์˜ค๋ž‘ ์Šฌ๋ผ์ด๋“œ ๋ฐ˜์‘ํ˜• ๋งŒ๋“ค์ง€ ๋ชฐ๋ผ์„œ ๋ง‰๋ง‰ํ–ˆ๋Š”๋ฐ ๊ฐ•์˜๋•๋ถ„์— ์–ด๋–ป๊ฒŒ ํ•ด์•ผํ•˜๋Š”์ง€ ์•Œ๊ฒŒ๋˜์„œ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค

    ๋”์ฝ”๋”ฉํด๋Ÿฝ๋‹˜์˜ ๋‹ค๋ฅธ ๊ฐ•์˜

    ์ง€์‹๊ณต์œ ์ž๋‹˜์˜ ๋‹ค๋ฅธ ๊ฐ•์˜๋ฅผ ๋งŒ๋‚˜๋ณด์„ธ์š”!

    ๋น„์Šทํ•œ ๊ฐ•์˜

    ๊ฐ™์€ ๋ถ„์•ผ์˜ ๋‹ค๋ฅธ ๊ฐ•์˜๋ฅผ ๋งŒ๋‚˜๋ณด์„ธ์š”!

    โ‚ฉ29,700