๊ด€๋ฆฌ ๋ฉ”๋‰ด
728x90
๋ฐ˜์‘ํ˜•

๋ชฉ๋ก[WEB ๊ฐœ๋ฐœ]/๋ธ”๋ก์ฒด์ธ ๊ฐœ๋ฐœ์ž ๊ณผ์ •_KGA (7)

728x90
๋ฐ˜์‘ํ˜•

Hello creators ๐Ÿ™Œ

[Javascript] 01. ๊ธฐ๋ณธ ๋ฌธ๋ฒ• ์š”์•ฝ & ๊ตฌ๊ตฌ๋‹จ ๋งŒ๋“ค๊ธฐ, ์ˆ˜์ƒ์ž ์ถœ๋ ฅ, 3์˜ ๋ฐฐ์ˆ˜ ์ฝ”๋“œ ์งœ๊ธฐ

1๏ธโƒฃ ์ด๋ฒˆ ํšŒ์ฐจ ํ•™์Šต ๋ชฉํ‘œ (goal) 1. ๋ฐฐ์šฐ๊ณ ์ž ํ•˜๋Š” ๊ฒƒ javascript ๋ฌธ๋ฒ• ๊ธฐ์ดˆ ๋‚ด์šฉ ๊ตฌ๊ตฌ๋‹จ, ์ˆ˜์ƒ์ž ๋ฝ‘๊ธฐ, 3์˜ ๋ฐฐ์ˆ˜ ์ฝ”๋”ฉํ•ด๋ณด๊ธฐ 2๏ธโƒฃ ๊ธฐ์ดˆ ๋ฌธ๋ฒ• ๋‚ด์šฉ ์š”์•ฝ 1. ์›น ๋งŒ๋“ค๊ธฐ ํ•  ๋•Œ, js ์–ด๋””์— ์จ? (์ž‘์„ฑ ์œ„์น˜ ๋ฐ ์—ฐ๊ฒฐ) 1) ์ž‘์„ฑ ์œ„์น˜ ํƒœ๊ทธ ๋ฐ‘์— ์จ 2) ์—ฐ๊ฒฐ๋ฐฉ๋ฒ• 1. . ํƒœ๊ทธ ์‚ฌ์ด์— ์“ด๋‹ค. 2. . ํƒœ๊ทธ์— ์—ฐ๊ฒฐ %% ์—ฐ๊ฒฐ ์ฝ”๋“œ ๐Ÿ‘‡%% 2. ๋ณ€์ˆ˜ ์‚ฌ์šฉ์‹œ ์ฃผ์˜ํ•  ๊ฒƒ - ์‚ฌ์šฉ์‹œ ์ฃผ์˜ํ•  ๊ฒƒ 1. '์„ ์–ธ์ž' ๊ฐ€ ์—†์œผ๋ฉด ์ „์—ญ๋ณ€์ˆ˜. 2. '์„ ์–ธ์ž' ๋ฅผ ๋ฐ˜๋“œ์‹œ ํ™œ์šฉ 3. let vs var ๋Š” '์žฌ์„ ์–ธ ๊ฐ€๋Šฅ ์—ฌ๋ถ€' 4. let ๋ฅผ ์ฃผ๋กœ ์“ธ ๊ฒƒ โญโญโญโญโญ ๋ณ€์ˆ˜๋ž€? [๋ณ€์ˆ˜๋ž€?] - ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€๋ฅดํ‚ค๋Š” ์ฃผ์†Œ - ์ด ์ฃผ์†Œ๋ฅผ ๋”ฐ๋ผ๊ฐ€๋ฉด - ๋ฐ์ดํ„ฐ๊ฐ€ ์žˆ์Œ - ๋ณ€์ˆ˜๋Š” ๋ฐ์ดํ„ฐ๋ฅผ ์ €์žฅ - ์ฃผ์†Œ๋ฅผ ์•Œ๋ฉด -> ๋ฐ์ดํ„ฐ๋ฅผ ..

[git & github] 01. 1) ๊นƒํ—™ ๊ฐ€์ž… ๋ฐ ์„ค์น˜ 2) git ํ™œ์šฉํ•ด์„œ 1๏ธโƒฃ pull 2๏ธโƒฃ push ํ•ด๋ณด๊ธฐ (feat. git, github, ํ˜•์ƒ ๊ด€๋ฆฌ ๋„๊ตฌ)

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..

[HTML&CSS] 04. ๋ฉ”๊ฐ€๋ฐ•์Šค ์˜ํ™” ์˜ˆ๋งค ํŽ˜์ด์ง€ ๋งŒ๋“ค๊ธฐ (feat. input ๊ณผ label ํƒœ๊ทธ, ํ˜•์ œ ๊ด€๊ณ„, sibling, ์„ ํƒ์ž์˜ ์ค‘์š”์„ฑ)

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 ์ถ•์œผ๋กœ..

[HTML&CSS] 03. ์œ ํŠœ๋ธŒ ์ธ๋„ค์ผ ๋งŒ๋“ค๊ธฐ (feat. ํ˜ธ๋ฒ„, hover, ๊ฐœ๋ฐœ์ž ๋„๊ตฌ์˜ ์ค‘์š”์„ฑ)

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.๊ต์ˆ˜..

[HTML&CSS] 02. ๊ฒŒ์‹œํŒ ๋งŒ๋“ค๊ธฐ (feat. html, css ์„ ํƒ์ž, css link, css input ํƒœ๊ทธ)

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 ์ž„) ๋ฅผ ์ฃผ๋ฉด -..

[HTML & CSS] 01. ์ž…์‚ฌ์ง€์›์„œ ๋งŒ๋“ค๊ธฐ (feat. html ๊ธฐ์ดˆ์ ์ธ ๋ฌธ๋ฒ• ํ™œ์šฉ)

1๏ธโƒฃ ์ด๋ฒˆ ํšŒ์ฐจ ํ•™์Šต ๋ชฉํ‘œ (goal) 1. ๋งŒ๋“ค๊ณ ์ž ํ•˜๋Š” ๊ฒƒ ์ž…์‚ฌ์ง€์›์„œ ๋งŒ๋“ค๊ธฐ ์ตœ์ข… ๊ฒฐ๊ณผ๋ฌผ ๊ทธ ์ด์ „ ์ˆ˜์—…์€ ๋ณด์ถฉ ํ•ด์•ผ ํ•จ. 2๏ธโƒฃ ์ž…์‚ฌ์ง€์›์„œ ๋งŒ๋“ค๊ธฐ 1. ์šฐ์„  ์ž‘๋™ํ•˜๋Š” ์ฝ”๋“œ ํŒŒ์ผ 1) ๊ณผ์ œํ•˜๋ฉด์„œ ์–ด๋ ค์› ๋˜ ๋ถ€๋ถ„ a) table ๊ณผ table ์‚ฌ์ด๋ฅผ ๋„์šฐ๊ธฐ ๋ฌธ์ œ์ƒํ™ฉ ์ด๋ ‡๊ฒŒ ์ž˜ ์•ˆ ๋„์›Œ์กŒ์Œ. ๋ฌธ์ œ ์›์ธ ํ•˜๋‚˜์˜ table ํƒœ๊ทธ ์•ˆ์—, ๋‹ค ๋‹ค ๋„ฃ์œผ๋ ค ํ–ˆ์—ˆ์Œ. ํ•ด๊ฒฐ ๊ฐ table ํƒœ๊ทธ์— ํ•˜๋‚˜์˜ ํ‘œ๋ฅผ ๋„ฃ๊ณ  ๋นˆ ๊ณต๊ฐ„๋„ table ์— ๋„ฃ์–ด์ฃผ๋Š” ๋ฐฉ์‹์œผ๋กœ! ์ƒ๊ฐํ•ด๋ณผ ์ง€์  ์Œ... ๊ทผ๋ฐ... ์ด๊ฒŒ ๋งž๋Š”๊ฑด์ง€ ๋ชจ๋ฅด๊ฒ ๋‹ค... ๋ˆˆ์น˜๋กœ ํ•œ ๋Š๋‚Œ... b) ์…€ ์•ˆ์— ๋นˆ ๊ณต๊ฐ„ ๋งŒ๋“ค๊ธฐ ๋ฌธ์ œ ์ƒํ™ฉ ๋งŒ๋“ค์–ด์•ผ ํ•˜๋Š” ๊ฑด, '๊ณต๋ž€' ์ธ๋ฐ, ์•„๋ฌด๊ฒƒ๋„ ์•ˆ ๋„ฃ์œผ๋ฉด, -> ์ชผ๊ทธ๋ผ๋“ค์—ˆ์Œ. ์›์ธ ๋ญ”๊ฐ€๋ฅผ ์“ฐ๋ฉด -> ์นธ์ด ์œ ์ง€๋˜๊ณ , ๋ญ”๊ฐ€๋ฅผ ์•ˆ ์“ฐ๋ฉด -> ์นธ์ด..