/ifp-2022-summer-vacation-seminar

๐Ÿ‘จ๐Ÿปโ€๐Ÿซ IFP 2022๋…„ ์—ฌ๋ฆ„๋ฐฉํ•™ HTML & CSS ์„ธ๋ฏธ๋‚˜

Primary LanguageHTML

๐Ÿ‘จ๐Ÿปโ€๐Ÿซ ifp-2022-summer-vacation-seminar

IFP 2022๋…„ ์—ฌ๋ฆ„๋ฐฉํ•™ HTML & CSS ์„ธ๋ฏธ๋‚˜

โš  ๊ณผ์ œ ์ œ์ถœ ๋ฐฉ๋ฒ•

ํ•ด๋‹น ๋ ˆํŒŒ์ง€ํ† ๋ฆฌ๋ฅผ forkํ•œ ํ›„, main๋ธŒ๋žœ์น˜์˜ ๋ณธ์ธ์˜ ์ด๋ฆ„์œผ๋กœ ํด๋”๋ฅผ ๋งŒ๋“ค๊ณ , ๊ฐ ์„ธ๋ฏธ๋‚˜ ํšŒ์ฐจ์— ๋Œ€ํ•œ ํด๋” ์•ˆ์—์„œ ์ฝ”๋“œ ์ž‘์—…์„ ํ•œ ํ›„ pr์„ ๋ณด๋‚ด์ฃผ์„ธ์š”. merge๋Š” ์ฝ”๋“œ๋ฆฌ๋ทฐ ํ›„ ์„ธ๋ฏธ๋‚˜ ์ง„ํ–‰์ž๊ฐ€ ํ•  ์˜ˆ์ •์ด๋‹ˆ merge๋Š” ํ•˜์ง€ ๋ง์•„์ฃผ์„ธ์š”.

์ฒซ ๋ฒˆ์งธ ์„ธ๋ฏธ๋‚˜ ๊ณผ์ œ

์„ธ๋ฏธ๋‚˜๋ฅผ ํ†ตํ•ด ๋ฐฐ์šด ๋‚ด์šฉ์„ ์‘์šฉํ•ด์„œ ์ž์‹ ๋งŒ์˜ ์˜ํ™” ๋˜๋Š” ์Œ์•… ์†Œ๊ฐœ ํŽ˜์ด์ง€๋ฅผ ๋งŒ๋“ค์–ด ์ฃผ์„ธ์š”.

๋‘ ๋ฒˆ์งธ ์„ธ๋ฏธ๋‚˜ ๊ณผ์ œ

์กฐ๊ฑด์— ๋งž๊ฒŒ ์‚ฌ์ง„์ฒ˜๋Ÿผ ๋งŒ๋“ค์–ด์ฃผ์„ธ์š”.

image

์กฐ๊ฑด

  1. ์ฃผํ™ฉ์ƒ‰ ๋ฐ•์Šค๋Š” ์ „์ฒด ํ™”๋ฉด์˜ ๋ฐฐ๊ฒฝ์ƒ‰์ž…๋‹ˆ๋‹ค.
  2. ๊ฐ€์šด๋ฐ ๋ชจ๋“  ๊ฒƒ์„ ๊ฐ์‹ธ๊ณ  ์žˆ๋Š” ํฐ ๋ฐ•์Šค๋Š” ํ™”๋ฉด ์ •๊ฐ€์šด๋ฐ์— ์œ„์น˜ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.
  3. ์ฒญ๋ก์ƒ‰ ๋ฐ•์Šค๋“ค์€ class์™€ id๋ฅผ ๊ผญ ์‚ฌ์šฉํ•ด์„œ ์Šคํƒ€์ผ์„ ์ง€์ •ํ•ด์ฃผ์„ธ์š”.

์„ธ ๋ฒˆ์งธ ์„ธ๋ฏธ๋‚˜ ๊ณผ์ œ

๊ณผ์ œ1

transition๊ณผ transform ์ด์šฉํ•ด์„œ ์ž์œ ๋กญ๊ฒŒ ์•„๋ฌด๊ฑฐ๋‚˜ ๋งŒ๋“ค๊ธฐ

๊ณผ์ œ2

๊ฒŒ์ž„์œผ๋กœ flex ์—ฐ์Šตํ•  ์ˆ˜ ์žˆ๋Š” ์‚ฌ์ดํŠธ ์—์„œ ๋ ˆ๋ฒจ 13๊นŒ์ง€ ๋‹ฌ์„ฑํ•œ ํ›„ ์บก์ณํ•ด์„œ pr ๋ณด๋‚ผ ๋•Œ ์˜ฌ๋ฆฌ๊ธฐ

๊ณผ์ œ3

์กฐ๊ฑด์— ๋งž๊ฒŒ ์‚ฌ์ง„์ฒ˜๋Ÿผ ๋งŒ๋“ค์–ด์ฃผ์„ธ์š”.

image

์กฐ๊ฑด

  1. ๋…ธ๋ž‘์ƒ‰ ๋ฐ•์Šค๋Š” ์ „์ฒด ํ™”๋ฉด์˜ ๋ฐฐ๊ฒฝ์ƒ‰์ž…๋‹ˆ๋‹ค.
  2. ๊ฐ€์šด๋ฐ ๋ชจ๋“  ๊ฒƒ์„ ๊ฐ์‹ธ๊ณ  ์žˆ๋Š” ํฐ ์›์€ ํ™”๋ฉด ์ •๊ฐ€์šด๋ฐ์— ์œ„์น˜ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.
  3. ์› ์•ˆ์— ์žˆ๋Š” ํฐ ๋ฐ•์Šค์˜ ์ƒ‰์€ ๊ทธ๋ผ๋ฐ์ด์…˜์„ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.
  4. ๋ฐ˜๋“œ์‹œ flex๋งŒ์„ ์‚ฌ์šฉํ•ด์„œ ๋ฐฐ์น˜ํ•˜์„ธ์š”.