๋ชฉ๋ก[WEB & AI] (feat. ์ทจ์ค)/๋ธ๋ก์ฒด์ธ ๊ฐ๋ฐ์ ๊ณผ์ _KGA (7)
Hello creators ๐
1๏ธโฃ ์ด๋ฒ ํ์ฐจ ํ์ต ๋ชฉํ (goal) 1. ๋ฐฐ์ฐ๊ณ ์ ํ๋ ๊ฒ javascript ๋ฌธ๋ฒ ๊ธฐ์ด ๋ด์ฉ ๊ตฌ๊ตฌ๋จ, ์์์ ๋ฝ๊ธฐ, 3์ ๋ฐฐ์ ์ฝ๋ฉํด๋ณด๊ธฐ 2๏ธโฃ ๊ธฐ์ด ๋ฌธ๋ฒ ๋ด์ฉ ์์ฝ 1. ์น ๋ง๋ค๊ธฐ ํ ๋, js ์ด๋์ ์จ? (์์ฑ ์์น ๋ฐ ์ฐ๊ฒฐ) 1) ์์ฑ ์์น ํ๊ทธ ๋ฐ์ ์จ 2) ์ฐ๊ฒฐ๋ฐฉ๋ฒ 1. . ํ๊ทธ ์ฌ์ด์ ์ด๋ค. 2. . ํ๊ทธ์ ์ฐ๊ฒฐ %% ์ฐ๊ฒฐ ์ฝ๋ ๐%% 2. ๋ณ์ ์ฌ์ฉ์ ์ฃผ์ํ ๊ฒ - ์ฌ์ฉ์ ์ฃผ์ํ ๊ฒ 1. '์ ์ธ์' ๊ฐ ์์ผ๋ฉด ์ ์ญ๋ณ์. 2. '์ ์ธ์' ๋ฅผ ๋ฐ๋์ ํ์ฉ 3. let vs var ๋ '์ฌ์ ์ธ ๊ฐ๋ฅ ์ฌ๋ถ' 4. let ๋ฅผ ์ฃผ๋ก ์ธ ๊ฒ โญโญโญโญโญ ๋ณ์๋? [๋ณ์๋?] - ๋ฐ์ดํฐ๋ฅผ ๊ฐ๋ฅดํค๋ ์ฃผ์ - ์ด ์ฃผ์๋ฅผ ๋ฐ๋ผ๊ฐ๋ฉด - ๋ฐ์ดํฐ๊ฐ ์์ - ๋ณ์๋ ๋ฐ์ดํฐ๋ฅผ ์ ์ฅ - ์ฃผ์๋ฅผ ์๋ฉด -> ๋ฐ์ดํฐ๋ฅผ ..
1๏ธโฃ ์ด๋ฒ ํ์ฐจ ํ์ต ๋ชฉํ (goal) 1. ๋ฐฐ์ฐ๊ณ ์ ํ๋ ๊ฒ merge ๋ฐ ํ์ ๋ฐฉ์ 2๏ธโฃ ์์ฝ 1. ์์ฝ 1) git ์ค์น ๋ฐ pull, push (์ง๋ ํฌ์คํ ์ค๋ณต) [1๏ธโฃ pull] 1. '์์ ํ๊ณ ์ ํ๋ ํด๋(๋ก์ปฌ pc ์ ํด๋, vs code ์์ ์ฐ ํด๋)' ์ 'terminal ํด๋(teminal ์ด ๊ฐ๋ฆฌํค๊ณ ์๋ ํด๋)' ์ผ์น ์ํค๊ธฐ 2. ๊น ํ์ผ ๋ง๋ค๊ธฐ git init 3. ์๊ฒฉ ์ ์ฅ์ ์ฐ๊ฒฐ git remote add origin https://github.com/JEONGDEOKJIN/230306.git 3.1 ์ค๋ฅ ๋ฐ์ ํด๊ฒฐ git remote remove origin git remote add origin 4. pull ๋ช ๋ น์ด git pull origin master [2๏ธ..
git ํ์ฉํด์ 1๏ธโฃ pull 2๏ธโฃ push ํด๋ณด๊ธฐ 1. git ์ด๋ ํ์ ๊ด๋ฆฌ ๋๊ตฌ ์ค ํ๋ ํ์ ๊ด๋ฆฌ ๋๊ตฌ๋ '๋ฒ์ ๊ด๋ฆฌ ์์คํ ' ex) ๋ฒ์ 1, ๋ฒ์ 2, ๋ฑ๋ฑ ์์ ํ๋ฉด์, ์์ ์ ๋ฆฌ์คํธ๋ฅผ ๊ด๋ฆฌํ ์ ์๋ค. 2. ์ฃผ์ํ ์ ์์ ์ ๋ง์น์ง ์์ผ๋ ค๋ฉด, ๋ฌด์กฐ๊ฑด, pull -> push ์์๋ก ํด์ผ ํจ. โญโญโญโญโญ (๋ฌด์กฐ๊ฑด ์ ๋ ์์น) git ์ ๊ต์ฅํ ์กฐ์ฌํด์ ๋ค๋ค์ผ ํจ. 3. [๋ช ๋ น์ด ์์ฝ] โญโญโญโญโญ [1๏ธโฃ pull] 1. '์์ ํ๊ณ ์ ํ๋ ํด๋' ์ 'terminal ํด๋' ์ผ์น ์ํค๊ธฐ 2. ๊น ํ์ผ ๋ง๋ค๊ธฐ git init 3. ์๊ฒฉ ์ ์ฅ์ ์ฐ๊ฒฐ git remote add origin https://github.com/JEONGDEOKJIN/230306.git 3.1 ์ค๋ฅ ๋ฐ์ ํด๊ฒฐ git..
transform ํ๊ทธ 1. ๊ธฐ๋ฅ ์์น, ํฌ๊ธฐ, ๊ฐ๋ ๋ฑ์ ๋ณ๊ฒฝํ ์ ์์ด ์์น๋ณ๊ฒฝ์ position ๊ณผ ๋น์ทํ ๊ธฐ๋ฅ์ผ ์๋. ์ฐจ์ด์ ์ ๋ญ๊น ?? #โโโ_์ง๋ฌธํ๊ณ ์ถ์_๋ชจ๋ฅด๊ฒ ์ ๊ธฐ๋ณธ ์ฝ๋ /* box ํด๋์ค ์์ ์๋ img ์ ๋ํด transform ์์ฑ ์ฃผ๊ธฐ */ .box img { /* transform : translate(x์ถ, y์ถ) ํด๋น ํ๊ทธ์ ์์น๋ฅผ ์ด๋์์ผ์ค๋ค. */ transform: translate(50px, 100px); } transform ๊ฒฐ๊ณผ - ํ๋์ ์ถ ์ผ๋ก๋ง ์ด๋ํ๊ฒ ํ ์ ์์. โญ๏ธโญ๏ธโญ๏ธโญ๏ธโญ๏ธ #๐ค_๋ฐฐ์ด๊ฒ_WIL .box2 img { /* y์ถ ์๊ณ , x ์ถ๋ง ์ด๋ */ transform: translateX(100px); } .box2 img { /* y ์ถ์ผ๋ก..
1๏ธโฃ ์ด๋ฒ ํ์ฐจ ํ์ต ๋ชฉํ (goal) 1. ๋ฐฐ์ฐ๊ณ ์ ํ๋ ๊ฒ position CSS ์ ๋ทฐ๋ธ ์ธ๋ค์ผ๋ค ๋ง๋ค๊ธฐ ํธ๋ฒ ๊ธฐ๋ฅ ol - li ํ๊ทธ๋ก ๋ง๋ ๋ค๋ ๊ฒ iframe - `background.css` - ์์ ํ๊ทธ ์ ํํ๋ ๊ฒ โญโญโญ - ![](https://i.imgur.com/455rrQX.png) - 2๏ธโฃ ํด๋ณด๊ธฐ 1. ํด๋ณด๊ธฐ ํธ๋ฒ๊ธฐ๋ฅ ๊ฐ๋ฐ์ ๋ชจ๋์์ hover ํ์ธ ๊ฐ๋ฅ ์ค๋ฅธ์ชฝ ์ ๋์์์. 2. ํด๋ณด๊ธฐ ๐คฏ ํผ์์ ๋ง๋ค์ด๋ณด๊ธฐ(๋ฏธ๋ ํ์ , ๊ณผ์ ) ๋ง๋ค๊ณ ์ ํ๋ ๊ฒ 06_์ ํ๋ธ_page_๊ณผ์ .html ์ฌ๊ธฐ์ ๋ง๋ค๊ธฐ ์์ฑํ ์ฝ๋ ๋๋์ wrap ๋ ์ด์์ ์ก์ ๋, ์ผ์ผ์ด ์ฌ์ด์ฆ๋ฅผ ์ค์ผ ํ๋? ์ ํธ๋ฒ ๊ธฐ๋ฅ์ ๊ตฌํ ๋ชป ํ๋ค ๊ต์๋์ด ํ์ ๊ฒ ๋ดค์ ๋ content ์ด๊ฒ๋! โญโญโญโญโญ youtube.๊ต์..
1๏ธโฃ ์ด๋ฒ ํ์ฐจ ํ์ต ๋ชฉํ (goal) ๋ฐฐ์ฐ๊ณ ์ ํ๋ ๊ฒ ๊ฒ์ํ 3๊ฐ ๋ง๋ค์ด๋ณด๊ธฐ css ๋ฐ html ๊ธฐ๋ณธ ๊ฐ๋ 2๏ธโฃ ์์ ๋ด์ฉ ์ ๋ฆฌ [1๊ต์] ๊ฐ๋ฐ์ ๋๊ตฌ์์ shift + ํ ํ์ฉํด์ -> ์์น ๋ณ๊ฒฝํ๊ธฐ '๊ฐ๋ฐ์ ๋๊ตฌ' ์์ -> ๊ณ ์ณ์ผ ํ๋ ๋ถ๋ถ ํด๋ฆญ -> shift ๋๋ฅด๊ณ + ๋ง์ฐ์ค ํ -> 10 ๋จ์ ์ฉ ์์น๊ฐ ๋ณ๊ฒฝํจ. 1. box sizing ๊ธฐ๋ฅ ๊ทธ๋ฅ div ์ div ๋ฅผ ๋ง๋ค๋ฉด -> ๋ฑ ๋ถ์ด ์๊ฒ ๋จ div + border ๋ div + border ์ฃผ๋ฉด -> border ๋งํผ ๋จ์ด์ ธ ์๊ฒ ๋จ box sizing ์ ๊ฐ์ธ์ฃผ๋ฉด -> border ๋ฅผ ๋ฃ์ด๋, ๊ทธ ์์ผ๋ก ๋ฑ ๋ค์ด๊ฐ๊ฒ ๋จ. โญโญโญโญโญ ์๋ฅผ ๋ค์ด์ div ์ width ๋ฅผ 100 ์ผ๋ก ์ฃผ๊ณ , border (1px ์) ๋ฅผ ์ฃผ๋ฉด -..
1๏ธโฃ ์ด๋ฒ ํ์ฐจ ํ์ต ๋ชฉํ (goal) 1. ๋ง๋ค๊ณ ์ ํ๋ ๊ฒ ์ ์ฌ์ง์์ ๋ง๋ค๊ธฐ ์ต์ข ๊ฒฐ๊ณผ๋ฌผ ๊ทธ ์ด์ ์์ ์ ๋ณด์ถฉ ํด์ผ ํจ. 2๏ธโฃ ์ ์ฌ์ง์์ ๋ง๋ค๊ธฐ 1. ์ฐ์ ์๋ํ๋ ์ฝ๋ ํ์ผ 1) ๊ณผ์ ํ๋ฉด์ ์ด๋ ค์ ๋ ๋ถ๋ถ a) table ๊ณผ table ์ฌ์ด๋ฅผ ๋์ฐ๊ธฐ ๋ฌธ์ ์ํฉ ์ด๋ ๊ฒ ์ ์ ๋์์ก์. ๋ฌธ์ ์์ธ ํ๋์ table ํ๊ทธ ์์, ๋ค ๋ค ๋ฃ์ผ๋ ค ํ์์. ํด๊ฒฐ ๊ฐ table ํ๊ทธ์ ํ๋์ ํ๋ฅผ ๋ฃ๊ณ ๋น ๊ณต๊ฐ๋ table ์ ๋ฃ์ด์ฃผ๋ ๋ฐฉ์์ผ๋ก! ์๊ฐํด๋ณผ ์ง์ ์... ๊ทผ๋ฐ... ์ด๊ฒ ๋ง๋๊ฑด์ง ๋ชจ๋ฅด๊ฒ ๋ค... ๋์น๋ก ํ ๋๋... b) ์ ์์ ๋น ๊ณต๊ฐ ๋ง๋ค๊ธฐ ๋ฌธ์ ์ํฉ ๋ง๋ค์ด์ผ ํ๋ ๊ฑด, '๊ณต๋' ์ธ๋ฐ, ์๋ฌด๊ฒ๋ ์ ๋ฃ์ผ๋ฉด, -> ์ชผ๊ทธ๋ผ๋ค์์. ์์ธ ๋ญ๊ฐ๋ฅผ ์ฐ๋ฉด -> ์นธ์ด ์ ์ง๋๊ณ , ๋ญ๊ฐ๋ฅผ ์ ์ฐ๋ฉด -> ์นธ์ด..