Banner

My Tech Blog (์ž๋ฐ”์ŠคํŠธ๋ฆฝํŠธ)

๊ฐ™์€์ƒ‰๊น” ์นด๋“œ ๋งž์ถ”๊ธฐ ๋ฉ”๋ชจ๋ฆฌ ๊ฒŒ์ž„์ด๋ผ๊ณ ๋„ ํ•˜๊ณ  ใ…Žใ…Žใ…Ž ๊ธฐ์–ต๋ ฅ ์นด๋“œ๊ฒŒ์ž„์ด๋ผ๊ณ ๋„ ํ•˜๋Š”๋ฐ.... ์ƒ‰์ƒ๋งŒ ๋„ฃ์œผ๋ฉด ์‹ฌ์‹ฌํ•˜๋‹ˆ๊นŒ ๊ณผ์ผ์ด๋ชจ์ง€๋„ ํ•จ ๊ฐ™์ด ๋„ฃ์–ด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค ์ž๋ฐ” ์Šคํฌ๋ฆฝํŠธ ์—ฐ์Šต ๊ฒธ ์‹œ๊ฐ„ ๋‚  ๋•Œ ํ•ด ๋ณด์ž ใ…‹ใ…‹ใ…‹ใ…‹ โŒ๋…ธ๊ฐ€๋‹ค ๋ฐฉ์ง€ ํ˜‘ํšŒ โŒ ์นด๋“œ๋Š” 12์žฅ(6์Œ)๋งŒ ๋งŒ๋“ค์ž 1. ์ˆœ์„œ๋„draw.io๋กœ ์ž‘์„ฑํ–ˆ๊ณ , svg ํŒŒ์ผ๋กœ ๋‚ด๋ณด๋‚ด๊ธฐ ํ•จ. PNG๋‚˜ JPEG๋Š” ํ•ด์ƒ๋„ ์„ค์ • ์•ˆํ•˜๋ฉด ๊นจ์ง€๋‹ˆ ์ฃผ์˜ 2. ์…”ํ”Œ ํ›„ ์นด๋“œ ์ƒ์„ฑํ•˜๊ธฐ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๊ฐ€ ์•„๋‹Œ, CSS๋กœ ๋’ค์ง‘๊ธฐ๋ฅผ ํ•ด ์ค„๊ฒƒ์ž…๋‹ˆ๋‹ค.... 2-1. CSSํด๋ž˜์Šค์ด๋ฆ„์—ญํ• CSScard์นด๋“œ ์ „์ฒด๋ฅผ ๊ฐ์‹ธ๋Š” ์ปจํ…Œ์ด๋„ˆ์นด๋“œ ํฌ๊ธฐ, 3D ์‹œ์  ์„ค์ •card-inner์นด๋“œ ์š”์†Œ ์•ˆ์—์„œ ์นด๋“œ ์•ž,๋’ท๋ฉด ๊ฐ์‹ธ๋Š” ๋‚ด๋ถ€ ์ปจํ…Œ์ด๋„ˆ์นด๋“œ ๋’ค์ง‘์„ ๋•Œ transform: rotateY() ํšŒ์ „์ถ• card-front์นด๋“œ..
์ธ์ ˆ๋ฏธ์˜€๋˜๊ฒƒ
'์ž๋ฐ”์ŠคํŠธ๋ฆฝํŠธ' ํƒœ๊ทธ์˜ ๊ธ€ ๋ชฉ๋ก
์ƒ๋‹จ์œผ๋กœ