TIL010_210330

keepcalmยท2021๋…„ 3์›” 30์ผ
0

TIL

๋ชฉ๋ก ๋ณด๊ธฐ
10/33
post-thumbnail

TIL

๐Ÿงธ ๊ฐ์ƒ

CSS ์ง์ ‘ ํ•ด๋ณด๋‹ˆ ์–ด๋ ต๋‹ค

๐Ÿ“™ ์—ดํ’ˆํƒ€ 13hour
๐Ÿ‘๐Ÿผ -
๐Ÿ‘Ž๐Ÿผ -

๐Ÿš€ ๋ชฉํ‘œ

  • ~~๋…ธ๋งˆ๋“œ ์ฝ”๋” React ๋ณต์Šต (๋‚˜์ค‘์—)~~
  • Udemy์—์„œ Javascript ๊ฐ•์ขŒ ์ˆ˜๊ฐ•ํ•˜๊ธฐ (222/682)
  • ๋งค์ผ ์ปค๋ฐ‹ ์—ฐ์† 30์ผ ๋‹ฌ์„ฑํ•˜๊ธฐ (10/30, 3.30 ์™„๋ฃŒ)
  • 3.24 ๋ฐœ๊ฒฌ ๋…ธ์…˜์œผ๋กœ ์˜ฎ๊ธฐ๊ธฐ
  • ๋‚ด์ผ๋ฐฐ์›€์นด๋“œ ์‹ ์ฒญ
  • Jump to Python ์™„๋ฃŒ
  • CSS ํŒŒํŠธ ์™„๋ฃŒ, ์œ„ํ‚ค๋กœ ๋ณต์Šตํ•ด๋ณด๊ธฐ(์ง„ํ–‰์ค‘)
  • ~~1์ผ์ฐจ ๋ณต์Šต(๋‚˜์ค‘์—)~~

๐Ÿ’ก TIP

๋ฐ˜์‘ํ˜• ๋งŒ๋“ค ๊ฒƒ
react๋‚˜ vue๊ฐ™์€ ์ตœ์‹  ๋ฌธ๋ฒ•์„ ์“ฐ๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํ”„๋ ˆ์ž„์›Œํฌ์˜ best practice๋ฅผ ์“ฐ๊ธฐ
๋ถ€ํŠธ์ŠคํŠธ๋žฉ ์˜์กดํ•˜์ง€ ๋ง๊ธฐ
ํ”„๋ก ํŠธ์—”๋“œ ์ฃผ๋‹ˆ์–ด๋Š” html, css๋งŒ ์ œ๋Œ€๋กœ ํ•ด๋„ ์†Œ์›์ด ์—†๋‹ค...
<dl> <dd> <strong>
๋ช…์‹œ์ ์ธ ํด๋ž˜์Šค ์ž‘๋ช…์œผ๋กœ ์œ ์ง€ ๋ณด์ˆ˜ ๊ด€๋ฆฌ, ํ”„๋กœ์ ํŠธ ์ง„ํ–‰์— ๋ฌธ์ œ ์—†๊ฒŒ - ํ˜‘์—…
img๋Š” alt ๋Œ€์ฒดํ…์ŠคํŠธ ํ•„์ˆ˜
button type ๋นผ๋จน์ง€ ์•Š๊ณ  -> ๊ธฐ๋ณธ๊ธฐ ์ค‘์š”
github commit ํ†ต์œผ๋กœ ์˜ฌ๋ฆฌ์ง€ ๋ง๊ณ  commit ์ž˜๊ฒŒ ์ชผ๊ฐœ์„œ ์˜ฌ๋ ค์•ผ ํ•จ (ํฌํŠธํด๋ฆฌ์˜ค์—๋„, ๋ฒ„์ „ ๊ด€๋ฆฌ์—๋„ ์ข‹์Œ)
์ƒ๊ฐํ•˜๋ฉด์„œ ์ฝ”๋“œ ์งฐ๋Š”๊ฐ€, ๋ณต๋ถ™ ์•„๋‹Œ ์ƒ๊ฐํ•˜๋ฉด์„œ ์ผ๋Š”์ง€์˜ ๋””ํ…Œ์ผ
CSS๋„ ๋…ผ๋ฆฌ์ ์œผ๋กœ ์ž‘์„ฑํ•  ๊ฒƒ
์ค‘๋ณต ์„ ์–ธ ์ ˆ๋Œ€ ์•ˆ ๋จ

title: ๋ฌธ์„œ์˜ ์ œ๋ชฉ์ด๊ธฐ ๋•Œ๋ฌธ์— seo์— ์ค‘์š”ํ•œ ์—ญํ• , ๋ฌธ์„œ๋งˆ๋‹ค ๋‹ค๋ฅด๊ฒŒ ํ•  ๊ฒƒ, ๊ฐ™๊ฒŒ ํ•˜๊ณ  ์‹ถ๋‹ค๋ฉด
about | KEEPCALM ์ด๋Ÿฐ์‹์œผ๋กœ
์„ ์–ธ๊ณผ ์„ ์–ธ ์‚ฌ์ด๋Š” ํ•ญ์ƒ ๋„์šฐ๊ธฐ

dark ๋ชจ๋“œ๋Š” darkmode.css ๋”ฐ๋กœ ๋งŒ๋“ค์–ด์„œ body.dark ๋ณ€๊ฒฝ์‚ฌํ•ญ ๋”ฐ๋กœ ์„ ์–ธํ•˜๊ธฐ
๊ทธ๋Ÿผ ์–ด๋–ป๊ฒŒ ๊ฐ€์ ธ์˜ค๋Š”๊ฐ€
link lightmode.css
link darkmode.css ์ˆœ์„œ๋กœ ๊ฐ€์ ธ์˜ค๋ฉด ํŽธํ•˜๊ฒŒ ๋ฎ์–ด์”Œ์šธ ์ˆ˜ ์žˆ์Œ -> cascading ์šฐ์„ ์ˆœ์œ„ ๊ทœ์น™

  • aa
    • [X] bb
    • [ ] cc
* aa
  - [X] bb
  - [ ] cc

[๋‹จ๊ณ„๋ณ„ ํฌํŠธํด๋ฆฌ์˜ค]

์›น ํผ๋ธ”๋ฆฌ์‹ฑ: HTML, CSS

html, css - ๋””์ž์ธ์„ ์™„๋ฒฝํ•˜๊ฒŒ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ๋Š”๊ฐ€ (๋ฐ˜์‘ํ˜• ์›น์œผ๋กœ, ํผ๋ธ”๋ฆฌ์‹ฑ ์—ญ๋Ÿ‰ ๋ณด์—ฌ์ฃผ๊ธฐ)
-> ์‹œ์•ˆ์€ ์–ด๋””์„œ ์ฐพ๋‚˜ : google ๊ฒ€์ƒ‰ - free web design psd (Behance,Sketch App sources - ํฌํ† ์ƒต, ์Šค์ผ€์น˜, ํ”ผ๊ทธ๋งˆ)

  • ๋””์ž์ด๋„ˆ์—๊ฒŒ์„œ ๋ฐ›์€ ์‹œ์•ˆ์„ ๊ทธ๋Œ€๋กœ ๊ตฌํ˜„ํ•ด์•ผ ํ•  ์˜๋ฌด๊ฐ€ ์žˆ๋‹ค -> ๋ฐ˜์‘ํ˜• 3์ข…(๋ชจ๋ฐ”์ผ, ๋ฐ์Šคํฌํƒ‘, ํƒœ๋ธ”๋ฆฟ)

UI๊ฐœ๋ฐœ: JavaScript, DOM API

๊ฐ„๋‹จํ•œ ๊ฒƒ ์™ธ๋ถ€ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ๊ฐ–๋‹ค ์“ฐ์ง€ ๋ง ๊ฒƒ

[๋งํฌ ๋ชฉ๋ก]

The Web Developer Bootcamp 2021
Jump to Python WikiDocs
๋…ธ๋งˆ๋“œ ์ฝ”๋”
React JS crash Course 2021
๋ฆฌ์•กํŠธ ๊ฐ•์˜
๋ฐ˜์‘ํ˜• 3์ข… ์‹œ์•ˆ
Front-End RoadMap
JS Bin

๐ŸŠ ๋ณต์Šต: TIL: 001

component -> childern component ์ •๋ณด ๋ณด๋‚ด๊ธฐ
html: <tag attribute= value></div>
jsx: <Component property = value/>

axios๋ฅผ ํ†ตํ•ด api ํ˜ธ์ถœ

npm install react-router-dom

react-router-dom

box-sizing

css ๊ธฐ๋ณธ ํฐํŠธ ์„ค์ •

css ์†์„ฑ ์„ ํƒ์ž

React

A library for building user interfaces
Runs on the client as a SPA(Single Page App), but can be used to build full stack apps by communicating with a server/API (eg.MERN stack)

front-end framework - Angular or Vue

์ƒˆ๋กœ๊ณ ์นจ ์—†์ด ์›น ํƒ์ƒ‰์ด ๊ฐ€๋Šฅํ•˜๋‹ค -> Web-app (๋ฆฌ์•กํŠธ, ์•ต๊ทค๋Ÿฌ, ๋ทฐ)

  1. ๋ชจ๋ฐ”์ผ์•ฑ์œผ๋กœ ๋ฐœํ–‰์ด ์‰ฌ์›€ (PWA, React Native)
  2. ์•ฑ์ฒ˜๋Ÿผ ๋›ฐ์–ด๋‚œ UX
  3. ๋น„์ฆˆ๋‹ˆ์Šค์  ๊ฐ•์ 

json -> fake backend
JSX (html๊ฐ™์€ ๋ฌธ๋ฒ•) - class -> className (
function App() { retrun();} -> html ์ฝ”๋”ฉํ•˜๋ฉด ๋œ๋‹ค

  • ์•ˆ ๋˜๊ฒ ๋‹ค...react๋Š” javascript ํ›„์— ๋ณต์Šตํ•˜์ž ๐Ÿ˜ญ๐Ÿ˜ญ๐Ÿ˜ญ ์œผ์•…

๐ŸŠ ๋ณต์Šต: Html, CSS

<ol> <ul> <dl> <dd> <dt>

wikipedia clone codingํ•˜๋Š” ์ค‘.
commit

https://github.com/jiyoondev/Tiger_Wiki

0๊ฐœ์˜ ๋Œ“๊ธ€