FrontEnd

Web ๊ณต๋ถ€ ๋ฆฌ์†Œ์Šค

lecor 2021. 7. 10. 11:30

 ๐Ÿ‘ป  ์ข‹์€ ์ž๋ฃŒ ์žˆ์œผ๋ฉด ์ถ”์ฒœ ๋ฐ”๋ž๋‹ˆ๋‹ค.

HTML

  • html์—์„œ ์“ฐ์ด๋Š” ํƒœ๊ทธ๋‚˜ CSS ์†์„ฑ์— ๋Œ€ํ•ด ํ•ญ๋ชฉ๋ณ„๋กœ ์„ค๋ช…์ด ์ž˜ ๋˜์–ด์žˆ๋‹ค.
 

HTML ๋งˆํฌ์—… | ์›น์ ‘๊ทผ์„ฑ๊ณผ ์›นํ‘œ์ค€

HTML ๋งˆํฌ์—… ๋งˆํฌ์—… ์–ธ์–ด์˜ ๋ถ„๋ฅ˜ ๋งˆํฌ์—… ์–ธ์–ด์—๋Š” ํฌ๊ฒŒ ์ˆœ์ฐจ์  ๋งˆํฌ์—… ์–ธ์–ด(procedural markup language)์™€ ์„œ์ˆ ์  ๋งˆํฌ์—… ์–ธ์–ด(descriptive markup language)๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. ์ˆœ์ฐจ์  ๋งˆํฌ์—… ์–ธ์–ด๋Š” ํ•œ ๋ฌธ์„œ์— ๊ธฐ๋ณธ

seulbinim.github.io

 

CSS

CSS ๋“ฑ์žฅ๋ฐฐ๊ฒฝ -> CSS ๋ฌธ๋ฒ• -> SCSS ์—์„œ ์ถ”๊ฐ€๋œ ๋‚ด์šฉ -> Bootstrap ์—์„œ ๋””์ž์ธ ๊ฐ€์ ธ๋‹ค ์“ฐ๋Š” ๋ฒ•
  • CSS ๊ธฐ๋ณธ ๊ฐ•์˜
 

[๋ฌด๋ฃŒ] CSS ๊ธฐ๋ณธ๋ถ€ํ„ฐ ํ™œ์šฉ๊นŒ์ง€ - ์ธํ”„๋Ÿฐ | ๊ฐ•์˜

CSS๋Š” HTML์„ ์•„๋ฆ„๋‹ต๊ฒŒ ๊พธ๋ฉฐ์ฃผ๋Š” ๋””์ž์ด๋„ˆ์˜ ์–ธ์–ด์ž…๋‹ˆ๋‹ค. CSS๋Š” ๋””์ง€ํ„ธ ์ปจํ…์ธ ๋ฅผ ์ƒ์‚ฐํ•˜๋Š” ์‚ฌ๋žŒ๋“ค์—๊ฒŒ๋Š” ๋ถ“ ์งˆ๊ณผ ๊ฐ™์€ ๊ฒƒ์ด ์•„๋‹๊นŒ ์‹ถ์Šต๋‹ˆ๋‹ค. ์ด ์ˆ˜์—…์—์„œ๋Š” ๋””์ง€ํ„ธ ๋ถ“ ์งˆ์„ ํ•˜๋Š” ๋ฒ•์„ ์•Œ๋ ค๋“œ๋ฆฝ๋‹ˆ

www.inflearn.com

  • CSS ์กฐ๊ธˆ ๋” ์‹ฌํ™” ๊ฐ•์˜
    • ์•ž๋ถ€๋ถ„์€ ์œ„ ๊ฐ•์˜๋ž‘ ์ข€ ๊ฒน์น˜๋Š”๋“ฏํ•˜์—ฌ Grid, MediaQuery ๋ถ€๋ถ„๋งŒ ๋ด๋„ ๋ ๋“ฏ
 

[๋ฌด๋ฃŒ] WEB2 - CSS - ์ธํ”„๋Ÿฐ | ๊ฐ•์˜

์ด ์ˆ˜์—…์€ https://opentutorials.org(์ƒํ™œ์ฝ”๋”ฉ ์‚ฌ์ดํŠธ)๋ฅผ ๋งŒ๋“ค์–ด๊ฐ€๋ฉด์„œ CSS์— ๋Œ€ํ•œ ์ง€์‹๊ณผ ๊ฒฝํ—˜์„ ๋™์‹œ์— ์ฑ„์›Œ๋“œ๋ฆฌ๊ธฐ ์œ„ํ•œ ๋ชฉ์ ์œผ๋กœ ๋งŒ๋“ค์–ด์ง„ ์ˆ˜์—…์ž…๋‹ˆ๋‹ค., [์ž„๋ฒ ๋”ฉ ์˜์ƒ] 1. ์ƒํ™œ์ฝ”๋”ฉ์˜ Web2์‹œ๋ฆฌ์ฆˆ - CSS

www.inflearn.com

  • CSS ์„ ํƒ์ž ์—ฐ์Šตํ•  ์ˆ˜ ์žˆ๋Š” ๊ฒŒ์ž„
 

CSS Diner

A fun game to help you learn and practice CSS selectors.

flukeout.github.io

  • CSS flex ์—ฐ์Šตํ•  ์ˆ˜ ์žˆ๋Š” ๊ฒŒ์ž„
 

Flexbox Froggy

A game for learning CSS flexbox

flexboxfroggy.com

  • 100 Days CSS Challenge
 

100 Days CSS Challenge

 

100dayscss.com

  • [YouTube] Sass ํŠœํ† ๋ฆฌ์–ผ

https://www.youtube.com/watch?v=St5B7hnMLjg 

  • [YouTube] bootstrap5 ํŠœํ† ๋ฆฌ์–ผ

https://www.youtube.com/watch?v=O_9u1P5YjVc&list=PL4cUxeGkcC9joIM91nLzd_qaH_AimmdAR 

 

JavaScript

  • [BOOK] ์ฝ”์–ด ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ, ์ •์žฌ๋‚จ
  • [BOOK] ์ธ์‚ฌ์ด๋“œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ
  • https://ko.javascript.info/
 

๋ชจ๋˜ JavaScript ํŠœํ† ๋ฆฌ์–ผ

 

ko.javascript.info

  • vanillaJS ๋กœ ํ•  ์ˆ˜ ์žˆ๋Š” ๊ฐ„๋‹จํ•œ ํ”„๋กœ์ ํŠธ ๋ชจ์Œ
    • ์žฌ๋ฐŒ์–ด๋ณด์ด๋Š”๊ฑฐ๋งŒ ๊ณจ๋ผ์„œ ํ•ด๋ด๋„ ๋ ๋“ฏ
 

bradtraversy/vanillawebprojects

Mini projects built with HTML5, CSS & JavaScript. No frameworks or libraries - bradtraversy/vanillawebprojects

github.com

 

JavaScript 30

Build 30 things with vanilla JS in 30 days with 30 tutorials

javascript30.com

  • ๋ธ”๋ž™์ปคํ”ผ ์Šคํ„ฐ๋””
 

๋ธ”๋ž™์ปคํ”ผ ์Šคํ„ฐ๋”” ๋ ˆ๋ฒจ1

 

edu.nextstep.camp

 

 

ETC

 

HTTP ์™„๋ฒฝ ๊ฐ€์ด๋“œ - ๊ต๋ณด๋ฌธ๊ณ 

์›น์€ ์–ด๋–ป๊ฒŒ ๋™์ž‘ํ•˜๋Š”๊ฐ€ | ์›น ์„ธ์ƒ์„ ๋– ๋ฐ›์น˜๊ณ  ์žˆ๋Š” HTTP์— ๋Œ€ํ•œ ๋ชจ๋“  ๊ฒƒ๋ชจ๋“  ์„ฑ๊ณต์ ์ธ ์›น ํŠธ๋žœ์žญ์…˜ ๋’ค์—๋Š”, ์›น ํด๋ผ์ด์–ธํŠธ์™€ ์„œ๋ฒ„๊ฐ€ ๋ฌธ์„œ์™€ ์ •๋ณด๋ฅผ ๊ตํ™˜ํ•˜๋Š” ์–ธ์–ด์ธ HTTP๊ฐ€ ์žˆ๋‹ค. HTTP๋Š”, ํšŒ์‚ฌ ์ธํŠธ

www.kyobobook.co.kr

 

TOAST UI :: Make Your Web Delicious! | TOAST UI :: Make Your Web Delicious!

Calendar provides monthly, weekly, multi-weekly, daily views, and more, as well as a basic pop-up UI you can use to add/edit/delete your schedules. You can manage your schedule simply by dragging the schedules around. Managing your calendar has never been

ui.toast.com

 

์ €์ž‘์žํ‘œ์‹œ