BRONZE
BRONZE ๋“ฑ๊ธ‰์˜ ํŒ๋งค์ž ์ž๋ฃŒ

๋ฉฟ’ํ‹ฐ๋ฏธ๋””์–ด์›นํŽ˜์ด์่ง์ œ์ž‘๊ณผ์ œ๋ฌผ

"๋ฉฟ’ํ‹ฐ๋ฏธ๋””์–ด์›นํŽ˜์ด์่ง์ œ์ž‘๊ณผ์ œ๋ฌผ"์— ๋Œ€ํ•œ ๋‚ด์šฉ์ž…๋‹ˆ๋‹ค.
10 ํŽ˜์ด์งฟ’
ํ•œ์้œ์˜คํ”ผ์Šค
์ตœ์ดˆ๋“ฑ๋ก์ผ 2021.04.22 ์ตœ์ข…์ ฟ’์ž‘์ผ 2021.04
10P ๋ฏธ๋้ฉ๋ณด๊ธฐ
๋ฉฟ’ํ‹ฐ๋ฏธ๋””์–ด์›นํŽ˜์ด์่ง์ œ์ž‘๊ณผ์ œ๋ฌผ
  • ๋ฏธ๋้ฉ๋ณด๊ธฐ

    ๋ชฉ์ฐจ

    1. CSS
    2. ์ž๋ฐ” ์Šคํฌ๋ฆฝํŠธ
    3. Semantics
    4. Offline&Storage
    5. Device Access
    6. Web Socket
    7. Video & Audio
    8. 3D, Graphics & Effects
    9. Geo-Location
    10. Styling Effects

    ๋ณธ๋ๅฉ๋‚ด์šฉ

    CSS
    -HTML5 ๊ด€๋ จ ๊ธฐ์ˆ ๋“ค์ค‘์— ๋Œ€ํ‘œ์ ์ธ ๊ฒƒ์œผ๋กœ CSS3๊ฐ€ ์žˆ๋‹ค. HTML ํƒœ๊ทธ๋ฅผ ์ด์šฉํ•˜์—ฌ ์›น ๋ฌธ์„œ๋ฅผ ์„ค๊ณ„ํ•˜๊ณ  ๋ณ€๊ฒฝํ•˜๋Š” ๋ฐ์—๋Š” ๋งŽ์€ ์ œ์•ฝ์ด ๋”ฐ๋ฅธ๋‹ค. ๋ฌธ์„œ์˜ ์ „์ฒด์ ์ธ ๊ตฌ์กฐ์™ฟ’ ํ‹€์€ ํƒœ๊ทธ๋กœ ์ •์˜ํ•  ์ˆ˜ ์žˆ์ง€๋งŒ ํ™”๋ฉด์— ํ‘œํ˜„๋˜๋Š” ๋‹ค์–‘ํ•œ ์Šคํƒ€์ผ์€ ์ •์˜ํ•  ์ˆ˜ ์—†๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค.
    ์Šคํƒ€์ผ ์‹œํŠธ(STYLE SHEETS)๋Š” ์ด๋Ÿฐ ๋ฌธ์ œ์ ์„ ๋ณด์™„ํ•˜๊ณ  ์›น ๋ฌธ์„œ์— ๋‹ค์–‘ํ•œ ๋ ˆ์ด์•„์›ƒ๊ณผ ์žฅ์‹์„ ํ•˜๊ธฐ ์œ„ํ•˜์—ฌ ์‚ฌ์šฉํ•œ๋‹ค.
    CSS3๋Š” ์Šคํƒ€์ผ ์‹œํŠธ ํ‘œ์ค€์•ˆ์œผ๋กœ, ์›น ๋ฌธ์„œ์— ๊ธ€๊ผด, ์ƒ‰์ƒ, ์ •๋ ฌ๊ณผ ๊ฐ ์š”์†Œ์˜ ๋ฐฐ์น˜ ๋ฐฉ๋ฒ• ๋“ฑ๊ณผ ๊ฐ™์€ ๋””์ž์ธ ์š”์†Œ๋ฅผ ์ ์šฉํ•˜๋Š” ๋ฐ ์‚ฌ์šฉ๋œ๋‹ค. CSS3๋Š” ์„ ํƒ์ž, ์†์„ฑ, ์†์„ฑ๊ฐ’์œผ๋กœ ๊ตฌ์„ฑ๋œ๋‹ค.
    โ–ถ์„ ํƒ์ž(Selector) : ์Šคํƒ€์ผ ์‹œํŠธ๋ฅผ ์ ์šฉํ•  ๋Œ€์ƒ์„ ์ง€์ •ํ•œ๋‹ค.
    โ–ถ์†์„ฑ(Property) : ์–ด๋–ค ์†์„ฑ์„ ์ ์šฉํ• ์ง€ ์„ ํƒํ•œ๋‹ค.
    โ–ถ์†์„ฑ๊ฐ’(Value) : ์†์„ฑ์— ์–ด๋–ค ๊ฐ’์„ ๋ฐ˜์˜ํ• ์ง€ ์„ ํƒํ•œ๋‹ค.

    <์ค‘ ๋žต>

    โ–ถ์• ๋‹ˆ๋ฉ”์ด์…˜
    animation-name : @keyframes ์• ๋‹ˆ๋ฉ”์ด์…˜์˜ ์ด๋ฆ„์„ ์ง€์ •ํ•œ๋‹ค.
    animation-duration : ์• ๋‹ˆ๋งค์ด์…˜์˜ ์ง€์† ์‹œ๊ฐ„์„ ์ดˆ ๋‹จ์œ„๋กœ ์„ค์ •ํ•œ๋‹ค.
    animation-timing-function : ์• ๋‹ˆ๋ฉ”์ด์…˜์˜ ์‹œ์ž‘๊ณผ ๋ ํƒ€์ด๋ฐ์„ ์ง€์ •ํ•œ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด ๋น ๋ฅด๊ฒŒ ์‹œ์ž‘ํ•ด์„œ ๋А๋ฆฌ๊ฒŒ ๋๋‚˜๋Š” ์• ๋‹ˆ๋ฉ”์ด์…˜์„ ๋งŒ๋“ค ์ˆ˜ ์žˆ๋‹ค.
    animation-delay : ์• ๋‹ˆ๋ฉ”์ด์…˜ ์‹œ์ž‘์„ ์ง€์—ฐ์‹œํ‚ค๋Š” ์‹œ๊ฐ„์„ ์ดˆ ๋‹จ์œ„๋กœ ์„ค์ •ํ•œ๋‹ค.
    animation-iteration-count : ์• ๋‹ˆ๋ฉ”์ด์…˜์ด ๋ฐ˜๋ณต ์žฌ์ƒ๋˜๋Š” ํšŸ์ˆ˜๋ฅผ ์„ค์ •ํ•œ๋‹ค. infinite๋กœ ์„ค์ •ํ•˜๋ฉด ๋ฌดํ•œ ๋ฐ˜๋ณต๋œ๋‹ค.
    animation-direction : ์• ๋‹ˆ๋ฉ”์ด์…˜์˜ ๋ฐฉํ–ฅ์„ ์„ค์ •ํ•œ๋‹ค.
    animation-fill-mode : ์• ๋‹ˆ๋ฉ”์ด์…˜์„ ์žฌ์ƒํ•˜๊ณ  ์žˆ์ง€ ์•Š์„ ๋•Œ ์†์„ฑ๊ฐ’์„ ์„ค์ •ํ•œ๋‹ค.
    animation-play-state : ์• ๋‹ˆ๋ฉ”์ด์…˜ ์žฌ์ƒ ์ƒํƒœ๋ฅผ ์„ค์ •ํ•  ์ˆ˜ ์žˆ๋‹ค.

    ๋ฐ•์Šค๋ชจ๋ธ์€ ์›น ๋ฌธ์„œ์— ํ…์ŠคํŠธ, ์ด๋ฏธ์ง€, ํ…Œ์ด๋ธ” ๋“ฑ์˜ ์š”์†Œ๋ฅผ ๋ฐฐ์น˜ํ•˜๊ธฐ ์œ„ํ•ด ์‚ฌ์šฉํ•˜๋Š” ๊ฐœ๋…์ด๋‹ค.
    โ–ถcontent : ์‹ค์ œ ๋‚ด์šฉ์ด ํ‘œํ˜„๋˜๋Š” ๊ณณ
    โ–ถpadding : ์ฝ˜ํ…์ธ ์™ฟ’ ํ…Œ๋‘๋ฆฌ ์‚ฌ์ด์˜ ์—ฌ๋ฐฑ
    โ–ถborder : ๋ฐ•์Šค์˜ ํ…Œ๋‘๋ฆฌ ๋‘๊ป˜
    โ–ถmargin : ํ…Œ๋‘๋ฆฌ์™ฟ’ ๋ฐ•์Šค์˜ ์ตœ์ข… ๊ฒฝ๊ณ„ ์‚ฌ์ด์˜ ์—ฌ๋ฐฑ

    ์ฐธ๊ณ ์ž๋ฃŒ

    ยท e-๊ทธ๋ฆฐ ์›๊ฒฉ ํ‰์ƒ ๊ต์œก์› -์ปดํ“จํ„ฐ ๊ทธ๋ž˜ํ”ฝ1 ํ•™์Šต๊ต์•ˆ ์ž๋ฃŒ-
    ยท e-๊ทธ๋ฆฐ ์›๊ฒฉ ํ‰์ƒ ๊ต์œก์› -์›น ๋””์ž์ธ ํ•™์Šต๊ต์•ˆ ์ž๋ฃŒ-
    ยท e-๊ทธ๋ฆฐ ์›๊ฒฉ ํ‰์ƒ ๊ต์œก์› -๋ฉ€ํ‹ฐ๋ฏธ๋””์–ด ์›นํŽ˜์ด์งฟ’ ์ œ์ž‘ ํ•™์Šต๊ต์•ˆ ์ž๋ฃŒ-
    ยท e-๊ทธ๋ฆฐ ์›๊ฒฉ ํ‰์ƒ ๊ต์œก์› -์ธํ„ฐ๋„ท ํ”„๋กœ๊ทธ๋ž˜๋ฐ ํ•™์Šต๊ต์•ˆ ์ž๋ฃŒ-
    ยท ๋ง›์žˆ๋Š” ๋””์ž์ธ ํฌํ† ์ƒต&์ผ๋Ÿฌ์ŠคํŠธ๋ ˆ์ดํ„ฐ cc2021 -ํ•œ๋น›๋ฏธ๋””์–ด์ถœํŒ์‚ฌ 2021๋…„ 2์›” 17์ผ ์ถœ๊ฐ„ ๋นจ๊ฐ„๊ณ ๋ž˜,์œค์ด์‚ฌ๋ผ ์ง€์Œ-
    ยท Photoshop10๋…„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ํ…Œํฌ๋‹‰ ์‚ฌ์ „ -๊ธธ๋ฒ—์ถœํŒ์‚ฌ 2017๋…„ 1์›”25์ผ ์ดˆํŒ ๋ฐœํ–‰ ํ›„์ง€๋ชจํ†  ์ผ€์ด ์ง€์Œ-
    ยท ์ฐจ์„ธ๋Œ€ ์›น ํ”„๋กœ๊ทธ๋ž˜๋ฐ HTML5+CSS3+JavaScript โ€“ํ•œ๋น›์•„์นด๋ฐ๋ฏธ 2019๋…„ 8์›” 2์ผ ๋ฐœํ–‰ ํ™์„ฑ์šฉ ์ง€์Œ-
    ยท Do it! HTML5+CSS3 ์›น ํ‘œ์ค€์˜ ์ •์„ โ€“์ด์ง€์Šคํผ๋ธ”๋ฆฌ์‹ฑ ์ถœํŒ 2020๋…„ 1์›” 28์ผ ๊ฐœ์ •ํŒ๋ฐœํ–‰ ๊ณ ๊ฒฝํฌ ์ง€์Œ-
    ยท https://www.opentutorials.org/course/3083 -์ƒํ™œ์ฝ”๋”ฉ web๊ฐ•์˜ ๋™์˜์ƒ-
    ยท https://www.youtube.com/watch?v=vgrd5sY_gFo -์œ ํŠœ๋ธŒ Do it! HTML5+CSS3 ์›น ํ‘œ์ค€์˜ ์ •์„ ๋™์˜์ƒ ๊ฐ•์˜-
    ยท https://www.youtube.com/channel/UCBH3pRrWYB4mZLApy-ZCfLw -ํŒ๋‹ค์ฝ”๋”ฉ ๋™์˜์ƒ ๊ฐ•์˜-
    ยท https://namu.wiki/w/HTML5 -๋‚˜๋ฌด์œ„ํ‚ค-
    ยท https://itwiki.kr/w/HTML5 -IT์œ„ํ‚ค-
    ยท http://wiki.hash.kr/index.php/HTML5 -ํ•ด์‹œ๋„ท-
    ยท https://ko.wikipedia.org/wiki/HTML5 -์œ„ํ‚ค๋ฐฑ๊ณผ-
  • ์ž๋ฃŒํ›„๊ธฐ

      Ai ๋ฆฌ๋ทฐ
      ์งฟ’์‹ํŒ๋งค์ž๊ฐ€ ์ œ๊ณตํ•œ ์ž๋ฃŒ๋Š” ์ „๋ฌธ ์ง€์‹๋ฅผ ๋ฐ”ํƒ•์œผ๋กœ ํ•œ ๋‚ด์šฉ์ด ๋งŽ์•„, ๊ณผ์ œ์— ์‰ฝ๊ฒŒ ์ ์šฉํ•  ์ˆ˜ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค. ๋งค์šฐ ๋งŒ์กฑ์Šค๋Ÿฌ์› ์Šต๋‹ˆ๋‹ค. ์ •๋ง ๊ฐ์‚ฌ๋“œ๋ฆฝ๋‹ˆ๋‹ค!
    • ์ž์ฃผ๋ฌป๋Š”์งˆ๋ๅฉ์˜ ๋‹ต๋ณ€์„ ํ™•์ธํ•ด ์ฃผ์„ธ์š”

      ํ•ดํ”ผ์บ ํผ์Šค FAQ ๋”๋ต–๊ธฐ

      ๊ผญ ์•Œ์•„์ฃผ์„ธ์š”

      • ์ž๋ฃŒ์˜ ์ •๋ณด ๋ฐ ๋‚ด์šฉ์˜ ์ง„์‹ค์„ฑ์— ๋Œ€ํ•˜์—ฌ ํ•ดํ”ผ์บ ํผ์Šค๋Š” ๋ณด์ฆํ•˜์ง€ ์•Š์œผ๋ฉฐ, ํ•ด๋‹น ์ •๋ณด ๋ฐ ๊ฒŒ์‹œ๋ฌผ ์ €์ž‘๊ถŒ๊ณผ ๊ธฐํƒ€ ๋ฒ•์  ์ฑ…์ž„์€ ์ž๋ฃŒ ๋“ฑ๋ก์ž์—๊ฒŒ ์žˆ์Šต๋‹ˆ๋‹ค.
        ์ž๋ฃŒ ๋ฐ ๊ฒŒ์‹œ๋ฌผ ๋‚ด์šฉ์˜ ๋ถˆ๋ฒ•์  ์ด์šฉ, ๋ฌด๋‹จ ์ „์žฌโˆ™๋ฐฐํฌ๋Š” ๊ธˆ์ง€๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค.
        ์ €์ž‘๊ถŒ์นจํ•ด, ๋ช…์˜ˆํ›ผ์† ๋“ฑ ๋ถ„์Ÿ ์š”์†Œ ๋ฐœ๊ฒฌ ์‹œ ๊ณ ๊ฐ๋น„๋ฐ”์นด์ง€๋…ธ Viva์˜ ์ €์ž‘๊ถŒ์นจํ•ด ์‹ ๊ณ ๋น„๋ฐ”์นด์ง€๋…ธ Viva๋ฅผ ์ด์šฉํ•ด ์ฃผ์‹œ๊ธฐ ๋ฐ”๋ž๋‹ˆ๋‹ค.
      • ํ•ดํ”ผ์บ ํผ์Šค๋Š” ๊ตฌ๋งค์ž์™ฟ’ ํŒ๋งค์ž ๋ชจ๋‘๊ฐ€ ๋งŒ์กฑํ•˜๋Š” ์„œ๋น„์Šค๊ฐ€ ๋˜๋„๋ก ๋…ธ๋ ฅํ•˜๊ณ  ์žˆ์œผ๋ฉฐ, ์•„๋ž˜์˜ 4๊ฐ€์ง€ ์ž๋ฃŒํ™˜๋ถˆ ์กฐ๊ฑด์„ ๊ผญ ํ™•์ธํ•ด์ฃผ์‹œ๊ธฐ ๋ฐ”๋ž๋‹ˆ๋‹ค.
        ํŒŒ์ผ์˜ค๋ฅ˜ ์ค‘๋ณต์ž๋ฃŒ ์ €์ž‘๊ถŒ ์—†์Œ ์„ค๋ช…๊ณผ ์‹ค์ œ ๋‚ด์šฉ ๋ถˆ์ผ์น˜
        ํŒŒ์ผ์˜ ๋‹ค์šด๋กœ๋“œ๊ฐ€ ์ œ๋Œ€๋กœ ๋˜์ง€ ์•Š๊ฑฐ๋‚˜ ํŒŒ์ผํ˜•์‹์— ๋งž๋Š” ํ”„๋กœ๊ทธ๋žจ์œผ๋กœ ์ •์ƒ ์ž‘๋™ํ•˜์ง€ ์•Š๋Š” ๊ฒฝ์šฐ ๋‹ค๋ฅธ ์ž๋ฃŒ์™ฟ’ 70% ์ด์ƒ ๋‚ด์šฉ์ด ์ผ์น˜ํ•˜๋Š” ๊ฒฝ์šฐ (์ค‘๋ณต์ž„์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋Š” ๊ทผ๊ฑฐ ํ•„์š”ํ•จ) ์ธํ„ฐ๋„ท์˜ ๋‹ค๋ฅธ ์‚ฌ์ดํŠธ, ์—ฐ๊ตฌ๊ธฐ๊ด€, ํ•™๊ป“, ์„œ์  ๋“ฑ์˜ ์ž๋ฃŒ๋ฅผ ๋„์šฉํ•œ ๊ฒฝ์šฐ ์ž๋ฃŒ์˜ ์„ค๋ช…๊ณผ ์‹ค์ œ ์ž๋ฃŒ์˜ ๋‚ด์šฉ์ด ์ผ์น˜ํ•˜์ง€ ์•Š๋Š” ๊ฒฝ์šฐ

    ํ•จ๊ป˜ ๊ตฌ๋งคํ•œ ์ž๋ฃŒ๋„ ํ™•์ธํ•ด ๋ณด์„ธ์š”!

    ์ฐพ์œผ์‹œ๋˜ ์ž๋ฃŒ๊ฐ€ ์•„๋‹Œ๊ฐ€์š”?

    ์ง€๊ธˆ ๋ณด๋Š” ์ž๋ฃŒ์™ฟ’ ์—ฐ๊ด€๋˜์–ด ์žˆ์–ด์š”!
    ์™ผ์ชฝ ํ™”์‚ดํ‘œ
    ์˜ค๋ฅธ์ชฝ ํ™”์‚ดํ‘œ
    ๋ฌธ์„œ ์ดˆ์•ˆ์„ ์ƒ์„ฑํ•ด์ฃผ๋Š” EasyAI
    ์•ˆ๋…•ํ•˜์„ธ์š”. ํ•ดํ”ผ์บ ํผ์Šค์˜ ๋ฐฉ๋Œ€ํ•œ ์ž๋ฃŒ ์ค‘์—์„œ ์„ ๋ณ„ํ•˜์—ฌ ๋‹น์‹ ๋งŒ์˜ ์ดˆ์•ˆ์„ ๋งŒ๋“ค์–ด์ฃผ๋Š” EasyAI ์ž…๋‹ˆ๋‹ค.
    ์ €๋Š” ์•„๋ž˜์™ฟ’ ๊ฐ™์ด ์ž‘์—…์„ ๋„์™ฟ’๋“œ๋ฆฝ๋‹ˆ๋‹ค.
    - ์ฃผ์ œ๋งŒ ์ž…๋ ฅํ•˜๋ฉด ๋ชฉ์ฐจ๋ถ€ํ„ฐ ๋ณธ๋ๅฉ๋‚ด์šฉ๊นŒ์ง€ ์ž๋™ ์ƒ์„ฑํ•ด ๋“œ๋ฆฝ๋‹ˆ๋‹ค.
    - ์žฅ๋ฌธ์˜ ์ฝ˜ํ…์ธ ๋ฅผ ์‰ฝ๊ณ  ๋น ๋ฅด๊ฒŒ ์ž‘์„ฑํ•ด ๋“œ๋ฆฝ๋‹ˆ๋‹ค.
    - ์Šคํ† ์–ด์—์„œ ๋ฌด๋ฃŒ ์บ์‹œ๋ฅผ ๊ณ„์ •๋ณ„๋กœ 1ํšŒ ๋ฐœ๊ธ‰ ๋ฐ›์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ง€๊ธˆ ๋ฐ”๋กœ ์ฒดํ—˜ํ•ด ๋ณด์„ธ์š”!
    ์ด๋Ÿฐ ์ฃผ์ œ๋“ค์„ ์ž…๋ ฅํ•ด ๋ณด์„ธ์š”.
    - ์œ ์•„์—๊ฒŒ ์ ํ•ฉํ•œ ๋ฌธํ•™์ž‘ํ’ˆ์˜ ๊ธฐ์ค€๊ณผ ํŠน์„ฑ
    - ํ•œ๊ตญ์ธ์˜ ๊ฐ€์น˜๊ด€ ์ค‘์—์„œ ์ •์‹ ์  ๊ฐ€์น˜๊ด€์„ ์ด๋ฃจ๋Š” ๊ฒƒ๋“ค์„ ๋ฌธํ™”์  ๋ฌธ๋ฒ•์œผ๋กœ ์ •๋ฆฌํ•˜๊ณ , ํ˜„๋Œ€ํ•œ๊ตญ์‚ฌํšŒ์—์„œ ์ผ์–ด๋‚˜๋Š” ์‚ฌ๊ฑด๊ณผ ์‚ฌ๊ณ ๋ฅผ ๋น„๊ตํ•˜์—ฌ ์ž์‹ ์˜ ์˜๊ฒฌ์œผ๋กœ ๊ธฐ์ˆ ํ•˜์„ธ์š”
    - ์ž‘๋ณ„์ธ์‚ฌ ๋…ํ›„๊ฐ
    ํ•ด์บ  AI ์ฑ—๋ด‡๊ณผ ๋Œ€ํ™”ํ•˜๊ธฐ
    ์ฑ—๋ด‡์œผ๋กœ ๊ฐ„ํŽธํ•˜๊ฒŒ ์ƒ๋‹ดํ•ด๋ณด์„ธ์š”.
    2025๋…„ 06์›” 19์ผ ๋ชฉ์š”์ผ
    AI ์ฑ—๋ด‡
    ์•ˆ๋…•ํ•˜์„ธ์š”. ํ•ดํ”ผ์บ ํผ์Šค AI ์ฑ—๋ด‡์ž…๋‹ˆ๋‹ค. ๋ฌด์—‡์ด ๊ถ๊ธˆํ•˜์‹ ๊ฐ€์š”?
    12:37 ์˜คํ›„