๋ฉ˜ํ† ๋ง์„ ์‹œ์ž‘ํ•˜๊ณ  ๊ฐ€์žฅ ์ฒ˜์Œ ํ•™์Šตํ–ˆ๊ณ ..  ์ด๋Ÿฐ ๊ฒŒ  ์žˆ์—ˆ๊ตฌ๋‚˜.. ํ•˜๋ฉฐ ๊ฐ€์žฅ ์ฒ˜์Œ ์ถฉ๊ฒฉ๋ฐ›์•˜๋˜ ๋ธŒ๋ผ์šฐ์ € ๋ Œ๋”๋ง ๊ด€๋ จ  ์ด๋ฏธ์ง€์ž…๋‹ˆ๋‹ค!

๋ธ”๋กœ๊ทธ๋ฅผ ๋ฒจ๋กœ๊ทธ์—์„œ ํ‹ฐ์Šคํ† ๋ฆฌ๋กœ ์˜ฎ๊ธฐ๊ฒŒ ๋ผ ๋ชจ๋“  ๊ธ€๋“ค์„ ๋‹ค์‹œ ์ ๊ฒŒ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค!
์‹œ๊ฐ„์ด ์ง€๋‚œ ํ›„์—๋„ ๋ฉ˜ํ† ๋ง์„ ์ง„ํ–‰ํ•˜๋ฉฐ ์ œ๊ฐ€ ์–ด๋–ค ๋งˆ์Œ์ด์—ˆ๋Š”์ง€ ์ฝ์–ด๋ณด๊ณ  ์‹ถ์–ด ๋จผ์ € F-Lab 1๊ฐœ์›” ์ฐจ (๊ฐ€์žฅ ์ถฉ๊ฒฉ์ด์—ˆ๋˜..) ํ›„๊ธฐ๋ฅผ ์˜ฎ๊ฒจ ์ ์–ด๋ณด๋ ค ํ•ด์š”!

์–ด์งธ์„œ F-Lab์„ ์‹ ์ฒญํ•˜๊ฒŒ ๋์„๊นŒ์š”?!

ํšŒ์‚ฌ์— ์ž…์‚ฌ ํ›„ ์‚ฌ์ˆ˜ ์—†๋Š” ํ™˜๊ฒฝ์—์„œ ํ˜ผ์ž ๊ฐœ๋ฐœ์— ์ž„ํ•˜๋ฉฐ ํฐ ๋ฌธ์ œ๊ฐ€ ์žˆ์ง„ ์•Š์•˜์Šต๋‹ˆ๋‹ค.
ํ•˜์ง€๋งŒ ๋ฌธ์ œ๊ฐ€ ์ƒ๊ธฐ์ง€ ์•Š์•˜๋˜ ๊ฑด ์ œ๊ฐ€ ์ž˜ํ•ด์„œ๊ฐ€ ์•„๋‹ˆ๋ผ ๊ฐœ๋ฐœ ํ™˜๊ฒฝ์ด ์‹ฌํ”Œํ•ด์„œ ๊ทธ๋žฌ๋˜ ๊ฑฐ๋ผ ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.


์กฐ๊ธˆ ๋” ๋‹ค์–‘ํ•œ ์Šคํƒ์ด๋‚˜ ํ™˜๊ฒฝ์—์„œ ๋‹ค์–‘ํ•œ ์‚ฌ๋žŒ๋“ค์˜ ํ”ผ๋“œ๋ฐฑ์„ ๋ฐ›๊ณ  ์‹ถ์—ˆ๊ณ  ๊ทธ๋ ‡๊ฒŒ ์žฌ์ง ์ค‘ F-Lab ๋ฉ˜ํ† ๋ง์„ ์‹ ์ฒญํ•˜๊ฒŒ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

์ฒซ ๋‹ฌ ๋™์•ˆ ๋ฌด์—‡์„ ๋ฐฐ์› ์„๊นŒ์š”?!

๋„คํŠธ์›Œํฌ ์ง€์‹๋ถ€ํ„ฐ ๋ธŒ๋ผ์šฐ์ €์˜ ๋™์ž‘์›๋ฆฌ, HTML/CSS, ๊ฐ€๋น„์ง€ ์ปฌ๋ ‰ํ„ฐ, ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋“ฑ ๊ธฐ๋ฐ˜์ด ๋˜๋Š” ๊ธฐ๋ณธ์ ์ธ ๋‚ด์šฉ๋“ค์„ ์ „์ฒด์ ์œผ๋กœ ํ•™์Šต ํ–ˆ์—ˆ์Šต๋‹ˆ๋‹ค!

1๊ฐœ์›” ๋™์•ˆ ๋งŒ๋‚˜๋ณธ ๋ฉ˜ํ† ๋‹˜์˜ ์ˆ˜์ค€์€ ์–ด๋•Œ๋ณด์˜€๋Š”๊ฐ€?!

์ œ ๋ฉ˜ํ† ๋‹˜์€ ๋‹น๊ทผ ๋งˆ์ผ“์— ์žฌ์ง ์ค‘์ด์‹  ๊ฐœ๋ฐœ์ž๋ถ„์ด์…จ์–ด์š”!
์ฒซ ๋‹ฌ์€ ๋ฉ˜ํ† ๋‹˜์˜ ์ฝ”๋“œ ์ˆ˜์ค€๋ณด๋‹ค๋Š” ์ œ๊ฐ€ ๋†“์ณค๋˜ ๋ถ€๋ถ„๋“ค์„ ์žก์•„์ฃผ์‹œ๋Š” ์„ฌ์„ธํ•จ์ด๋‚˜ ๊ธด์žฅํ•ด์„œ ๋ง์ด ํ—›๋‚˜์˜ค๋Š” ์ €๋ฅผ ์ด๋Œ์–ด์ฃผ์‹œ๋Š” ์ปค๋ฎค๋‹ˆ์ผ€์ด์…˜ ๋Šฅ๋ ฅ์— ๋” ํž˜์ด ๋‚ฌ๋˜ ๊ฒƒ ๊ฐ™์•„์š”!
๊ทธ๋ž˜์„œ ๋”์šฑ ์ˆ˜์ค€์ด ๋†’์•„ ๋ณด์ด์…จ์Šต๋‹ˆ๋‹ค!!

๋ฉ˜ํ† ๋ง์—์„œ ์–ด๋–ค ๊ฒƒ๋“ค์ด ์ข‹์•˜๋Š”๊ฐ€?!

์ด๋ฒคํŠธ ๋ฒ„๋ธ”๋ง, ์บก์ณ๋ง, ์œ„์ž„์ด๋‚˜ ์ด๋ฒคํŠธ ๋ฃจํ”„ ๊ทธ๋ฆฌ๊ณ  CSS์—์„œ์˜ ํ•™์Šต์—์„œ์กฐ์ฐจ ์„œ์‹ ๋งฅ๋ฝ์ธ BFC์™€ IFC, ํ˜น์€ z-index์˜ ์Œ“์ž„ ๋งฅ๋ฝ์ธ Stacking Context ๋“ฑ ํ‰์†Œ์— ์ƒ๊ฐ์ง€ ๋ชปํ•œ ๊นŠ์€ ๊ฐœ๋…๋“ค๊นŒ์ง€ ํ•™์Šตํ•˜๊ฒŒ ๋œ๋‹ค๋Š” ๊ฒŒ ๋„ˆ๋ฌด ์ข‹์•˜์Šต๋‹ˆ๋‹ค!

๊ธฐ์ดˆ๊ฐ€ ๋ถ€์กฑํ•˜๋‹ค๋Š” ๊ฑธ ๋งŽ์ด ๊นจ๋‹ซ๊ฒŒ ๋์–ด์š”.

์‚ฌ์‹ค ๋Œ์•„๋ณด๋ฉด ๊ทธ๋‹ค์ง€ ์‚ฌ์šฉํ•ด ๋ณด์ง€ ์•Š์•˜๋˜ float๋ฅผ ๋‹ค๋ค„๋ณด๋Š” ๊ฒŒ ์€๊ทผํžˆ ์žฌ๋ฐŒ์—ˆ์Šต๋‹ˆ๋‹คใ…Žใ…Ž

์•ž์œผ๋กœ์˜ ๊ฐ์˜ค

์Šค์Šค๋กœ๋ฅผ ๋Œ์•„๋ณด๋Š” ๊ฐœ๋ฐœ์ž๊ฐ€ ๋˜์ž! ๋ฉ”ํƒ€์ธ์ง€!!

์•ž์œผ๋กœ์˜ ๊ฐ์˜ค ๋ถ€๋ถ„์„ ๊ทธ๋Œ€๋กœ ์˜ฎ๊ฒจ ์ ์œผ๋ ค๋‹ˆ ๋ฏผ๋งํ•˜๊ตฐ์š”.. ๊ทธ๋ž˜๋„ ์ด๊ฑด ํŠนํžˆ๋‚˜ ๋‹น์‹œ์˜ ๋งˆ์Œ๊ฐ€์ง์„ ๊ทธ๋Œ€๋กœ ์ ์–ด์•ผ ํ•˜๋‹ˆ ์˜ฎ๊ฒจ ์ ์—ˆ์Šต๋‹ˆ๋‹ค!

์ตœ๊ทผ 1๊ฐœ์›” ๋ฉ˜ํ† ๋ง์— ๋Œ€ํ•œ ์ž์œ ๋กœ์šด ๊ฐ์ƒ ๋ฐ ํ›„๊ธฐ

๋ฌด์–ธ๊ฐ€๋ฅผ ์ฐจ๋ถ„ํžˆ ๊นŠ๊ฒŒ ๊ณต๋ถ€ํ•œ๋‹ค๋Š” ๊ฒŒ ์ •๋ง ์žฌ๋ฐŒ๋‹ค๋Š” ๊ฑธ ์•Œ๊ฒŒ ๋์Šต๋‹ˆ๋‹ค!!

'Growth Activities > F-Lab' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

F-Lab Frontend ์ˆ˜๋ฃŒ ํ›„๊ธฐ  (0) 2024.04.18
F-Lab Frontend 3๊ฐœ์›” ํ›„๊ธฐ  (0) 2024.03.29
F-Lab Frontend 2๊ฐœ์›” ํ›„๊ธฐ  (0) 2024.03.29

+ Recent posts