๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ

Site ์ œ์ž‘15

์‚ฌ์ดํŠธ ์ œ์ž‘ - ์™„์„ฑ๋ณธ / ๋ฐ˜์‘ํ˜• ์‚ฌ์ดํŠธ ๋งŒ๋“ค๊ธฐ ํ•ฉ๋ณธ(์ง„ํ–‰์ค‘) ์ด๋•Œ๊นŒ์ง€ ๋ฐฐ์šด ์œ ํ˜•๋“ค์„ ํ™œ์šฉํ•˜์—ฌ ์‚ฌ์ดํŠธ๋ฅผ ๋งŒ๋“ค์—ˆ์Šต๋‹ˆ๋‹ค. ์›๋ณธ ์‚ฌ์ดํŠธ ๋ณด๊ธฐ ์›๋ณธ ์†Œ์Šค ๋ณด๊ธฐ ๊ณผ์ • 1. ํ”ผ๊ทธ๋งˆ๋กœ ๋ ˆ์ด์•„์›ƒ์„ ๋งŒ๋“ญ๋‹ˆ๋‹ค. 2. ์ด๋•Œ๊นŒ์ง€ ๋งŒ๋“ค์–ด๋‘” ์œ ํ˜•๋“ค์„ ์กฐํ•ฉํ•˜์—ฌ ์‚ฌ์ดํŠธ ์ฝ”๋”ฉ์„ ํ•ฉ๋‹ˆ๋‹ค. ๊ฐ๊ฐ์˜ ์œ ํ˜•๋ณ„ ์ฝ”๋”ฉ ๋ฐฉ๋ฒ•์€ ๋งํฌ๋ฅผ ์ฐธ์กฐํ•ด์ฃผ์„ธ์š”. 1. ํ—ค๋” ์œ ํ˜• 2. ์Šฌ๋ผ์ด๋“œ ์œ ํ˜• 3. ์ด๋ฏธ์ง€ ์œ ํ˜• 4. ์ด๋ฏธ์ง€/ํ…์ŠคํŠธ ์œ ํ˜• 5. ์นด๋“œ ์œ ํ˜• 6. ๋ฐฐ๋„ˆ ์œ ํ˜• 7. ํ…์ŠคํŠธ ์œ ํ˜• 8. ํ‘ธํ„ฐ ์œ ํ˜• ๋˜ํ•œ html๊ณผ css ์†Œ์Šค ์—ญ์‹œ ์†Œ์Šค๋ณด๊ธฐ๋ฅผ ํ†ตํ•ด ํ™•์ธํ•ด์ฃผ์„ธ์š”! 3. ๋ฐ˜์‘ํ˜• ์ž‘์—…์„ ํ•ฉ๋‹ˆ๋‹ค. ๋‹ค๋ฅธ ์ข…๋ฅ˜์˜ ๋””๋ฐ”์ด์Šค์—์„œ๋„ ์‚ฌ์ดํŠธ๊ฐ€ ์ž˜ ์ž‘๋™ํ•  ์ˆ˜ ์žˆ๋Š”์ง€ ํ™•์ธํ•˜๊ณ  ๋ฐ˜์‘ํ˜• ์ž‘์—…์„ ํ•ด์ค๋‹ˆ๋‹ค. 3-2. ํ—ค๋”๊ฐ€ ๊นจ์ง€๋Š” ๋ฌธ์ œ ๋ฐœ์ƒ ํ™”๋ฉด ํฌ๊ธฐ๋ฅผ ์ค„์˜€์„ ๋•Œ ํ—ค๋”์˜ ๊ธ€์”จ๊ฐ€ ๊นจ์ง€๋Š” ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ•ฉ๋‹ˆ๋‹ค ๋ฌธ์ œ ํ•ด๊ฒฐ์„ ์œ„.. 2022. 9. 19.
08. ํ‘ธํ„ฐ ์œ ํ˜• 1 ํ‘ธํ„ฐ ์œ ํ˜• ํ‘ธํ„ฐ ์œ ํ˜•์ž…๋‹ˆ๋‹ค. ์›๋ณธ ์‚ฌ์ดํŠธ ๋ณด๊ธฐ ์›๋ณธ ์†Œ์Šค ๋ณด๊ธฐ HTML html ์†Œ์Šค์ž…๋‹ˆ๋‹ค. ํ‘ธํ„ฐ ์˜์—ญ ์‚ฌ์ดํŠธ ์›นํ‘œ์ค€ ์‚ฌ์ดํŠธ ์›นํ‘œ์ค€ ์‚ฌ์ดํŠธ ์›นํ‘œ์ค€ ์‚ฌ์ดํŠธ ์›นํ‘œ์ค€ ์‚ฌ์ดํŠธ ์‚ฌ์ดํŠธ ์›นํ‘œ์ค€ ์‚ฌ์ดํŠธ ์›นํ‘œ์ค€ ์‚ฌ์ดํŠธ ์›นํ‘œ์ค€ ์‚ฌ์ดํŠธ ์›นํ‘œ์ค€ ์‚ฌ์ดํŠธ ์‚ฌ์ดํŠธ ์›นํ‘œ์ค€ ์‚ฌ์ดํŠธ ์›นํ‘œ์ค€ ์‚ฌ์ดํŠธ ์›นํ‘œ์ค€ ์‚ฌ์ดํŠธ ์›นํ‘œ์ค€ ์‚ฌ์ดํŠธ ์‚ฌ์ดํŠธ ์›นํ‘œ์ค€ ์‚ฌ์ดํŠธ ์›นํ‘œ์ค€ ์‚ฌ์ดํŠธ ์›นํ‘œ์ค€ ์‚ฌ์ดํŠธ ์›นํ‘œ์ค€ ์‚ฌ์ดํŠธ ์‚ฌ์ดํŠธ ์›นํ‘œ์ค€ ์‚ฌ์ดํŠธ ์›นํ‘œ์ค€ ์‚ฌ์ดํŠธ ์›นํ‘œ์ค€ ์‚ฌ์ดํŠธ ์›นํ‘œ์ค€ ์‚ฌ์ดํŠธ ์‚ฌ์ดํŠธ ์›นํ‘œ์ค€ ์‚ฌ์ดํŠธ ์›นํ‘œ์ค€ ์‚ฌ์ดํŠธ ์›นํ‘œ์ค€ ์‚ฌ์ดํŠธ ์›นํ‘œ์ค€ ์‚ฌ์ดํŠธ 2022 Webstoryboy. Portfolio is Power All rights reserved. CSS css ์†Œ์Šค์ž…๋‹ˆ๋‹ค. /* gray */ .gray { background-color: #f5f5f5; } /* .. 2022. 9. 6.
07. ๋ฐฐ๋„ˆ ์œ ํ˜• 1 ๋ฐฐ๋„ˆ ์œ ํ˜• ์›น์‚ฌ์ดํŠธ ๋ฐฐ๋„ˆ ์œ ํ˜•์ž…๋‹ˆ๋‹ค. ์›๋ณธ ์‚ฌ์ดํŠธ ๋ณด๊ธฐ ์›๋ณธ ์†Œ์Šค ๋ณด๊ธฐ HTML html ์†Œ์Šค์ž…๋‹ˆ๋‹ค. class="blind">๋ฐฐ๋„ˆ ์˜์—ญ class="title">์ œ๋ชฉ ์˜์—ญ ๋‚ด์šฉ๋‚ด์šฉ๋‚ด์šฉ์ด๋ž๋‹ˆ๋‹ค.๋‚ด์šฉ์–ด์ผ€๊ธธ๊ฒŒ์จ href="#" title="์ƒˆ ํŽ˜์ด์ง€ ์—ด๋ฆผ">๊ทธ๊ฑฐ์–ด์ผ€ํ•˜๋Š”๊ฑด๋ฐ class="small">๋ฐฐ๋„ˆ ์œ ํ˜•01 CSS css ์†Œ์Šค์ž…๋‹ˆ๋‹ค. /* banner */ .banner__inner { background-image: url(../bannerType/img/banner_bg01.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; text-align: center; padding: 120px 0; c.. 2022. 9. 6.
06. ์Šฌ๋ผ์ด๋“œ ์œ ํ˜• 1 ์Šฌ๋ผ์ด๋“œ ์œ ํ˜• ์›น์‚ฌ์ดํŠธ ์Šฌ๋ผ์ด๋“œ ์œ ํ˜•์ž…๋‹ˆ๋‹ค. ์ด๋ฒˆ์—๋Š” ์•„์ด์ฝ˜์— ์ด๋ฏธ์ง€ ์Šคํ”Œ๋ผ์ดํŠธ ๊ธฐ๋ฒ•๊ณผ irํšจ๊ณผ๋ฅผ ์ ์šฉํ•˜์˜€์Šต๋‹ˆ๋‹ค. ์›๋ณธ ์‚ฌ์ดํŠธ ๋ณด๊ธฐ ์›๋ณธ ์†Œ์Šค ๋ณด๊ธฐ HTML html ์†Œ์Šค์ž…๋‹ˆ๋‹ค. ์Šฌ๋ผ์ด๋“œ ์˜์—ญ DEVELOPER NEW PROJECT ๋„ˆ๋ฌด ๋ฌด๋ฆฌํ•˜์ง€ ๋ง์•„์š”! ์ด๋ฏธ ๋‹น์‹ ์€ ์ž˜ํ•˜๊ณ  ์žˆ๊ณ ! ์•ž์œผ๋กœ๋„ ์ž˜ ํ•  ์ˆ˜ ์žˆ์–ด์š”! ์ž์„ธํžˆ๋ณด๊ธฐ ์‚ฌ์ดํŠธ๋ณด๊ธฐ ์ด์ „ ์ด๋ฏธ์ง€ ๋‹ค์Œ ์ด๋ฏธ์ง€ 1 2 3 ํ”Œ๋ ˆ์ด ์ •์ง€ CSS css ์†Œ์Šค์ž…๋‹ˆ๋‹ค. /* slider */ .slider__inner { margin-top: 40px; } .slider {} .slider__img { background: url(../site1/assets/img/slider_bg01.jpg) no-repeat center / cover; } .slider__img .. 2022. 9. 6.
05. ์ด๋ฏธ์ง€/ํ…์ŠคํŠธ ์œ ํ˜• 1 ์ด๋ฏธ์ง€/ํ…์ŠคํŠธ ์œ ํ˜• 01 ์ด๋ฏธ์ง€/ํ…์ŠคํŠธ ์œ ํ˜• ๋ ˆ์ด์•„์›ƒ ์‚ฌ์ดํŠธ์ž…๋‹ˆ๋‹ค. ์›๋ณธ ์‚ฌ์ดํŠธ ๋ณด๊ธฐ ์›๋ณธ ์†Œ์Šค ๋ณด๊ธฐ ๋ ˆ์ด์•„์›ƒ ์„ค์ • figma๋กœ ๊ทธ๋ฆฌ๋“œ์™€ ์‚ฌ์ดํŠธ์˜ ๋ ˆ์ด์•„์›ƒ์„ ์žก์Šต๋‹ˆ๋‹ค. HTML html ์†Œ์Šค์ž…๋‹ˆ๋‹ค. ์œ ์šฉํ•œ ์‚ฌ์ดํŠธ ์‚ดํŽด๋ณด๊ธฐ ์ด๋ฏธ์ง€ ํ…์ŠคํŠธ ์œ ํ˜•01 ์œ ์šฉํ•œ ์‚ฌ์ดํŠธ ์‚ดํŽด๋ณด๊ธฐ ์›น๋””์ž์ด๋„ˆ, ์›น ํผ๋ธ”๋ฆฌ์…”, ํ”„๋ก ํŠธ์•ค๋“œ ๊ฐœ๋ฐœ์ž๋ฅผ ์œ„ํ•œ ์œ ์šฉํ•œ ์‚ฌ์ดํŠธ์ž…๋‹ˆ๋‹ค. ํŠœํ† ๋ฆฌ์–ผ ์‚ฌ์ดํŠธ ๋ ˆํผ๋Ÿฐ์Šค ์‚ฌ์ดํŠธ ์›นํฐํŠธ ์‚ฌ์ดํŠธ CSS ์‚ฌ์ดํŠธ WebGL ์‚ฌ์ดํŠธ Youtube ์‚ฌ์ดํŠธ ๋ ˆํผ๋Ÿฐ์Šค ์‚ฌ์ดํŠธ ํŠœํ† ๋ฆฌ์–ผ ์‚ฌ์ดํŠธ CSS css ์†Œ์Šค์ž…๋‹ˆ๋‹ค. figma๋กœ ์„ค์ •ํ•ด๋†“์€ ๋ ˆ์ด์•„์›ƒ์ด๋‚˜ zaplin์„ ๋ณด๋ฉฐ ์ ์ ˆํ•˜๊ฒŒ css๋ฅผ ์„ค์ •ํ•ด์ค๋‹ˆ๋‹ค. /* fonts */ @import url('https://webfontworld.github.io/NexonLv1Gothi.. 2022. 9. 1.
04. ํ—ค๋” ์œ ํ˜• 1 ํ—ค๋” ์œ ํ˜• 01 ํ—ค๋” ์œ ํ˜• ๋ ˆ์ด์•„์›ƒ ์‚ฌ์ดํŠธ์ž…๋‹ˆ๋‹ค. ์›๋ณธ ์‚ฌ์ดํŠธ ๋ณด๊ธฐ ์›๋ณธ ์†Œ์Šค ๋ณด๊ธฐ ๋ ˆ์ด์•„์›ƒ ์„ค์ • figma๋กœ ๊ทธ๋ฆฌ๋“œ์™€ ์‚ฌ์ดํŠธ์˜ ๋ ˆ์ด์•„์›ƒ์„ ์žก์Šต๋‹ˆ๋‹ค. HTML html ์†Œ์Šค์ž…๋‹ˆ๋‹ค. Web site ํ—ค๋” ์˜์—ญ ์Šฌ๋ผ์ด๋“œ ์˜์—ญ ๋ฐฐ๋„ˆ ์˜์—ญ ์ปจํ…์ธ  ์˜์—ญ ํ‘ธํ„ฐ ์˜์—ญ ๋กœ๊ทธ์ธ CSS css ์†Œ์Šค์ž…๋‹ˆ๋‹ค. figma๋กœ ์„ค์ •ํ•ด๋†“์€ ๋ ˆ์ด์•„์›ƒ์ด๋‚˜ zaplin์„ ๋ณด๋ฉฐ ์ ์ ˆํ•˜๊ฒŒ css๋ฅผ ์„ค์ •ํ•ด์ค๋‹ˆ๋‹ค. /* fonts */ @import url('https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css'); .nexon { font-family: 'NexonLv1Gothic'; font-weight: 400; } /* reset */ * { margin: 0; padding.. 2022. 9. 1.
03. ํ…์ŠคํŠธ ์œ ํ˜• 3 ํ…์ŠคํŠธ ์œ ํ˜• 03 ํ…์ŠคํŠธ ์œ ํ˜• ๋ ˆ์ด์•„์›ƒ ์‚ฌ์ดํŠธ์ž…๋‹ˆ๋‹ค. ์›๋ณธ ์‚ฌ์ดํŠธ ๋ณด๊ธฐ ์›๋ณธ ์†Œ์Šค ๋ณด๊ธฐ ๋ ˆ์ด์•„์›ƒ ์„ค์ • figma๋กœ ๊ทธ๋ฆฌ๋“œ์™€ ์‚ฌ์ดํŠธ์˜ ๋ ˆ์ด์•„์›ƒ์„ ์žก์Šต๋‹ˆ๋‹ค. HTML html ์†Œ์Šค์ž…๋‹ˆ๋‹ค. ๐ŸžYoucodein ๋ฒ ์ด์ปค๋ฆฌ ํ›„๊ธฐ๐Ÿฅ ์šฐ๋ฆฌ ๋ฒ ์ด์ปค๋ฆฌ ์†๋‹˜๋“ค์˜ ์ง„์งœ 100% ๋ฆฌ์–ผ ํ›„๊ธฐ๋“ค์ž…๋‹ˆ๋‹ค. ์ตœ๊ณ ์˜ ๋ฒ ์ด์ปค๋ฆฌ. ํ•œ๊ตญ, ์•„๋‹ˆ ์šฐ์ฃผ์—์„œ ๊ฐ€์žฅ ๋ง›์žˆ๋Š” ๋นต๋“ค์ž…๋‹ˆ๋‹ค. ์‚ฌ์žฅ๋‹˜์ด ์ •๋ง ์ •์„ฑ์„ ๋‹ด์•„ ๋นต์„ ๋งŒ๋“œ๋Š” ๊ฒŒ ๋ณด์ž…๋‹ˆ๋‹ค. ์ œ๊ฐ€ ๊ฐ€์žฅ ์ข‹์•„ํ•˜๋Š” ๋นต์€ ์Šˆํฌ๋ฆผ์ธ๋ฐ์š” ๋ฐ”์‚ญํ•œ ๋นต๊ณผ ๋‹ฌ์ฝคํ•˜๋ฉด์„œ๋„ ๊นŠ์€ ๋ง›์˜ ํฌ๋ฆผ์ด ํ™˜์ƒ์˜ ์กฐํ•ฉ์ž…๋‹ˆ๋‹ค. ์š” ์Šˆํฌ๋ฆผ์ด ์•„์ฃผ ๋ฏธX..๋…€์„์ž…๋‹ˆ๋‹ค ๋ฐ•์„ ํ˜œ 22. 08. 31 ์ž์„ธํžˆ ๋ณด๊ธฐ ์นœ๊ตฌ๊ฐ€ ์ถ”์ฒœํ•ด์„œ ์†Œ๊ธˆ๋นต ๋จน์–ด๋ดค๋Š”๋ฐ ๋„ˆ๋ฌด๋„ˆ๋ฌด ๋ง›์žˆ์—ˆ์–ด์š”! ์–ด์ฉœ ์ด๋ ‡๊ฒŒ ๋ง›์žˆ๋Š”์ง€ ์ œ๊ฐ€ ๋จน์–ด๋ณธ ์†Œ๊ธˆ๋นต์ค‘ ์ œ์ผ ๋ง›์žˆ์—ˆ์–ด์š”~ ๋‹ค์Œ์— ๋˜ ๊ฐ€์„œ ์‚ฌ๋จน์œผ๋ ค๊ตฌ.. 2022. 9. 1.
03. ํ…์ŠคํŠธ ์œ ํ˜• - 2 ํ…์ŠคํŠธ ์œ ํ˜• 02 ํ…์ŠคํŠธ ์œ ํ˜• ๋ ˆ์ด์•„์›ƒ ์‚ฌ์ดํŠธ์ž…๋‹ˆ๋‹ค. ์ด๋ฒˆ ์‚ฌ์ดํŠธ๋Š” ์ด์ „ ์‚ฌ์ดํŠธ์™€๋Š” ๋‹ฌ๋ฆฌ ์•„์ด์ฝ˜๊ณผ ํ…์ŠคํŠธ๋กœ๋งŒ ์ด๋ฃจ์–ด์ ธ ์žˆ์Šต๋‹ˆ๋‹ค. ์›๋ณธ ์‚ฌ์ดํŠธ ๋ณด๊ธฐ ์›๋ณธ ์†Œ์Šค ๋ณด๊ธฐ ๋ ˆ์ด์•„์›ƒ ์„ค์ • figma๋กœ ๊ทธ๋ฆฌ๋“œ์™€ ์‚ฌ์ดํŠธ์˜ ๋ ˆ์ด์•„์›ƒ์„ ์žก์Šต๋‹ˆ๋‹ค. HTML html ์†Œ์Šค์ž…๋‹ˆ๋‹ค. GOOD BREAD ๋นต์„ ๋” ๋ง›์žˆ๊ฒŒ ๋จน์ž! ํ‰์†Œ์— ๋นต์„ ์ฆ๊ฒจ ๋“œ์‹œ๋‚˜์š”? ๋นต์„ ๋” ๋ง›์žˆ๊ฒŒ ์ฆ๊ธฐ๋Š” ๋ฐฉ๋ฒ•๋“ค์„ ์ง€๊ธˆ ์ด ์ž๋ฆฌ์—์„œ ์†Œ๊ฐœํ•ด๋“œ๋ฆฝ๋‹ˆ๋‹ค! ๊ทธ๋ƒฅ ๋จน๋Š”๋‹ค ์ •๋ง ๋ง›์žˆ๋Š” ๋นต์€ ์–ด๋– ํ•œ ๊ธฐ๊ต๋ฅผ ๋ถ€๋ฆฌ์ง€ ์•Š๊ณ  ๋จน์–ด๋„ ๋ง›์žˆ์Šต๋‹ˆ๋‹ค. ์ˆœ์ˆ˜ํ•œ ๋นต์„ ๋ง›๋ณด์‹œ๋ฉด ์ด ๋ง์˜ ์˜๋ฏธ๋ฅผ ์•Œ๊ฒŒ ๋  ๊ฒƒ์ด๋ผ ์ž์‹ ํ•ฉ๋‹ˆ๋‹ค. ๊ตฌ์›Œ์„œ ๋ถˆ์˜ ๋ฐœ๊ฒฌ์€ ์ธ๊ฐ„์—๊ฒŒ ์•„์ฃผ ํ˜๋ช…์ ์ธ ์ผ์ด์—ˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ๊ทธ ๋ถˆ๋กœ ์šฐ๋ฆฌ๋Š” ๋นต์„ ๊ตฌ์›Œ๋จน๋Š” ๊ธฐ์ ์„ ํ–‰ํ•  ์ˆ˜ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค. ํฌ๋ฆผ/์žผ๊ณผ ๊ทธ๋ƒฅ ๋นต๋งŒ ๋จน๊ธฐ ์‹ฌ์‹ฌํ•˜๋‹ค๋ฉด? ํฌ๋ฆผ์ด๋‚˜ .. 2022. 8. 31.
03. ํ…์ŠคํŠธ ์œ ํ˜• 01 ํ…์ŠคํŠธ ์œ ํ˜• 01 ํ…์ŠคํŠธ ์œ ํ˜• ๋ ˆ์ด์•„์›ƒ ์‚ฌ์ดํŠธ์ž…๋‹ˆ๋‹ค. ์ด๋ฒˆ ์‚ฌ์ดํŠธ๋Š” ์ด์ „ ์‚ฌ์ดํŠธ์™€๋Š” ๋‹ฌ๋ฆฌ ์•„์ด์ฝ˜๊ณผ ํ…์ŠคํŠธ๋กœ๋งŒ ์ด๋ฃจ์–ด์ ธ ์žˆ์Šต๋‹ˆ๋‹ค. ์›๋ณธ ์‚ฌ์ดํŠธ ๋ณด๊ธฐ ์›๋ณธ ์†Œ์Šค ๋ณด๊ธฐ ๋ ˆ์ด์•„์›ƒ ์„ค์ • figma๋กœ ๊ทธ๋ฆฌ๋“œ์™€ ์‚ฌ์ดํŠธ์˜ ๋ ˆ์ด์•„์›ƒ์„ ์žก์Šต๋‹ˆ๋‹ค. HTML html ์†Œ์Šค์ž…๋‹ˆ๋‹ค. ํ…์ŠคํŠธ ์œ ํ˜•01 ๐Ÿž๋นต์„ ๋ง›์žˆ๊ฒŒ ๋จน๋Š” ๋ฐฉ๋ฒ•๐Ÿฅ ๊ทธ๋ƒฅ ๋จน๋Š”๋‹ค ์ธ๊ฐ„์˜ ๊ฐ€์žฅ ๊ธฐ๋ณธ์ ์ธ ํ–‰์œ„์ธ ๋จน๋Š”๋‹ค๋Š” ํ–‰์œ„๋ฅผ ํ†ตํ•ด ๋นต์ด๋ผ๋Š” ์Œ์‹๋ฌผ์„ ์„ญ์ทจํ•ด๋ด…์‹œ๋‹ค. ๊ณต๋ณต์ผ ์‹œ ๋”์šฑ ๋ง›์žˆ์Šต๋‹ˆ๋‹ค. ๋”๋ณด๊ธฐ ๊ตฌ์›Œ์„œ ๋จน๋Š”๋‹ค ๋ถˆ์˜ ๋ฐœ๊ฒฌ์€ ์ธ๊ฐ„์—๊ฒŒ ์•„์ฃผ ํ˜๋ช…์ ์ธ ์ผ์ด์—ˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ๊ทธ ๋ถˆ๋กœ ์šฐ๋ฆฌ๋Š” ๋นต์„ ๊ตฌ์›Œ๋จน๋Š” ๊ธฐ์ ์„ ํ–‰ํ•  ์ˆ˜ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค. ๋”๋ณด๊ธฐ ์–น์–ด์„œ ๋จน๋Š”๋‹ค ๊ทธ๋ƒฅ ๋นต๋งŒ ๋จน๊ธฐ ์‹ฌ์‹ฌํ•˜๋‹ค๋ฉด? ํฌ๋ฆผ์ด๋‚˜ ์žผ์„ ์–น์–ด์„œ ๋“œ์„ธ์š”! ๋‹ฌ์ฝคํ•˜๊ณ  ๊ณ ์†Œํ•œ ๋ง›์„ ์ถ”๊ฐ€ํ•  ์ˆ˜ ์žˆ์–ด์š”! ๋ง›์žˆ๊ฒŒ ๋“œ์„ธ์š”~ ๋”๋ณด๊ธฐ ์ปคํ”ผ.. 2022. 8. 30.
02. ์ด๋ฏธ์ง€ ์œ ํ˜• - 3 ์ด๋ฏธ์ง€ ์œ ํ˜• 03 ์ด๋ฏธ์ง€ ์œ ํ˜• ๋ ˆ์ด์•„์›ƒ ์‚ฌ์ดํŠธ์ž…๋‹ˆ๋‹ค. ์ด๋ฒˆ ์‚ฌ์ดํŠธ๋Š” flex๋กœ ์ž‘์—…ํ–ˆ๋˜ ์‚ฌ์ดํŠธ์™€๋Š” ๋‹ค๋ฅด๊ฒŒ grid๋ฅผ ์‚ฌ์šฉํ•˜์˜€์Šต๋‹ˆ๋‹ค. ์›๋ณธ ์‚ฌ์ดํŠธ ๋ณด๊ธฐ ์›๋ณธ ์†Œ์Šค ๋ณด๊ธฐ ๋ ˆ์ด์•„์›ƒ ์„ค์ • figma๋กœ ๊ทธ๋ฆฌ๋“œ์™€ ์‚ฌ์ดํŠธ์˜ ๋ ˆ์ด์•„์›ƒ์„ ์žก์Šต๋‹ˆ๋‹ค. HTML html ์†Œ์Šค์ž…๋‹ˆ๋‹ค. ๊ท€์—ฝ๊ณ  ๋ฉ‹์ง„ ๋™๋ฌผ๋“ค ๋™๋ฌผ์„ ์‚ฌ๋ž‘ํ•ฉ์‹œ๋‹ค. ์ €๋Š” ๋™๋ฌผ์„ ์ •๋ง ์‚ฌ๋ž‘ํ•ฉ๋‹ˆ๋‹ค. ๊ท€์—ฝ๊ณ  ๋ฉ‹์ง„ ๋™๋ฌผ๋“ค์„ ๋งŒ๋‚˜๋ณด์„ธ์š”. ์ž์—ฐ์˜ ๊ฒฝ์ด๋กœ์›€์— ๊ฐํƒ„ํ•˜๊ฒŒ ๋  ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๊ท€์—ฌ์šด ์•ต๋ฌด์ƒˆ ์ฌ์ฝ”๋‰ด์–ด๋Š” ์ •๋ง ๊ท€์—ฝ์Šต๋‹ˆ๋‹ค. ํ˜ธ๊ธฐ์‹ฌ์ด ๋งŽ๊ณ  ์‚ฌ๋žŒ์„ ์ข‹์•„ํ•˜๋Š” ์ข…์ด๊ธฐ์— ๋งŽ์€ ์‚ฌ๋žŒ๋“ค์˜ ๋ฐ˜๋ ค ์•ต๋ฌด๋กœ ๊ธธ๋Ÿฌ์ง€๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ๋„ˆ๋ฌด ๊ท€์—ฌ์›Œ์š” ์งฑ ํŽ˜์ด์Šค๋ถ ํŽ˜์ด์ง€์ด๋™ ํŽ˜์ด์ง€์ด๋™ ํŽ˜์ด์ง€์ด๋™ ํŽ˜์ด์ง€์ด๋™ ๊ท€์—ฌ์šด ์—ฌ์šฐ ์—ฌ์šฐ๋Š” ์ •๋ง ๊ท€์—ฝ์Šต๋‹ˆ๋‹ค. ๋„ˆ๋ฌด ๊ท€์—ฌ์›Œ์„œ ๋ˆˆ๋ฌผ์ด ๋‚˜์š”. ์—ฌ์šฐ ์œ ํŠœ๋ฒ„๊ฐ€ ์žˆ๋‹ค๋Š” ๊ฑธ ์•„์‹œ๋‚˜์š”? ๊ทธ๊ฑฐ.. 2022. 8. 21.
02. ์ด๋ฏธ์ง€ ์œ ํ˜• - 2 ์ด๋ฏธ์ง€ ์œ ํ˜• 2 ์ด๋ฏธ์ง€ ์œ ํ˜• ๋ ˆ์ด์•„์›ƒ ์‚ฌ์ดํŠธ์ž…๋‹ˆ๋‹ค. html๊ณผ css๋กœ ์ž‘์—…ํ•˜์˜€์Šต๋‹ˆ๋‹ค. ์›๋ณธ ์‚ฌ์ดํŠธ ๋ณด๊ธฐ ์›๋ณธ ์†Œ์Šค ๋ณด๊ธฐ ๋ ˆ์ด์•„์›ƒ ์„ค์ • figma๋กœ ๊ทธ๋ฆฌ๋“œ์™€ ์‚ฌ์ดํŠธ์˜ ๋ ˆ์ด์•„์›ƒ์„ ์žก์Šต๋‹ˆ๋‹ค. HTML html ์†Œ์Šค์ž…๋‹ˆ๋‹ค. BEST ์†Œํ’ˆ์ƒต ๋‹ค์–‘ํ•œ ์†Œํ’ˆ์ƒต์„ ๊ฐ€ ๋ณธ ์‚ฌ๋žŒ์ด ๋ฝ‘์€ ์ตœ๊ณ ์˜ ์†Œํ’ˆ์ƒต BEST3 class="image__box"> ๋‚ด๊ฐ€๋งŒ๋“  ๊ธฐ๋ฆฐํ‚ค๋ง href="" class="more" title="์ž์„ธํžˆ๋ณด๊ธฐ">์ž์„ธํžˆ๋ณด๊ธฐ class="image__box"> ์ž๊ทธ๋งˆํ•œ ์ธํ…Œ๋ฆฌ์–ด๋ฐฉ href="" class="more" title="์ž์„ธํžˆ๋ณด๊ธฐ">์ž์„ธํžˆ๋ณด๊ธฐ class="image__box"> ์˜ค๋Š˜์˜ ๊ฐ์„ฑ href="" class="more" title="์ž์„ธํžˆ๋ณด๊ธฐ">์ž์„ธํžˆ๋ณด๊ธฐ CSS css ์†Œ์Šค์ž…๋‹ˆ๋‹ค. figma๋กœ .. 2022. 8. 18.
02. ์ด๋ฏธ์ง€ ์œ ํ˜• - 1 ์ด๋ฏธ์ง€ ์œ ํ˜• 1 ์ด๋ฏธ์ง€ ์œ ํ˜• ๋ ˆ์ด์•„์›ƒ ์‚ฌ์ดํŠธ์ž…๋‹ˆ๋‹ค. html๊ณผ css๋กœ ์ž‘์—…ํ•˜์˜€์Šต๋‹ˆ๋‹ค. ์›๋ณธ ์‚ฌ์ดํŠธ ๋ณด๊ธฐ ์›๋ณธ ์†Œ์Šค ๋ณด๊ธฐ ๋ ˆ์ด์•„์›ƒ ์„ค์ • figma๋กœ ๊ทธ๋ฆฌ๋“œ์™€ ์‚ฌ์ดํŠธ์˜ ๋ ˆ์ด์•„์›ƒ์„ ์žก์Šต๋‹ˆ๋‹ค. HTML html ์†Œ์Šค์ž…๋‹ˆ๋‹ค. ๋‹ค์ด์–ด๋ฆฌ ๊พธ๋ฏธ๊ธฐ ๋‹น์‹ ๋งŒ์˜ ๋ฉ‹์ง„ ๊ธฐ๋ก์žฅ, ๊ฐœ์„ฑ์žˆ๋Š” ๋‹ค์ด์–ด๋ฆฌ๋ฅผ ๋งŒ๋“ค์–ด๋ณด์„ธ์š”! ๋‹น์‹ ์˜ ๊ธฐ์–ต๋“ค ๊ธฐ์–ต์œผ๋กœ ๋‚จ๊ธฐ๋Š” ๊ฒƒ๋„ ์ข‹์€ ๋ฐฉ๋ฒ•์ด์ง€๋งŒ ๊ธฐ๋ก์œผ๋กœ ๋‚จ๊ธฐ์ง€ ์•Š์€ ๊ธฐ์–ต์€ ๊ธˆ๋ฐฉ ํœ˜๋ฐœ๋˜๋Š” ๋ฒ•์ด์ฃ . ๋‹น์‹ ์˜ ๊ธฐ์–ต๊ณผ ๊ฐ์ •์„ ์–ด๋”˜๊ฐ€์— ๋ฐ•์ œํ•˜์„ธ์š”. ํ›—๋‚  ๋‹น์‹ ์˜ ์ถ”์–ต์„ ์ฝ๊ณ  ๊ธฐ๋ปํ•  ๋‹น์‹ ์˜ ์–ผ๊ตด์„ ์ƒ์ƒํ•˜์„ธ์š”! ์ž์„ธํžˆ ๋ณด๊ธฐ ๋‹น์‹ ์˜ ์ถ”์–ต์„ ๋‹น์‹ ์˜ ๊ฐ์ •์„ ์‹œ๊ฐ์ ์œผ๋กœ ํ‘œํ˜„ํ•˜๊ณ  ์‹ถ์ง€ ์•Š์œผ์‹ ๊ฐ€์š”? ์Šคํ‹ฐ์ปค๋ฅผ ๋ถ™์ด์„ธ์š”. ๊ทธ๋ฆผ์„ ๊ทธ๋ฆฌ์„ธ์š”. ๋‹น์‹ ์˜ ์ถ”์–ต์„ ์žฅ์‹ํ•˜์„ธ์š”. ์ ์ ˆํ•œ ์žฅ์‹์€ ๊ฐ์ •์„ ์‹ค๊ฐ๋‚˜๊ฒŒ ํ‘œํ˜„ํ•ด์ค๋‹ˆ๋‹ค. ๋งˆ์Œ์— ๋“œ๋Š” ์Šคํ‹ฐ์ปค๋‚˜ ๊ทธ๋ฆผ์œผ.. 2022. 8. 18.
03. ์นด๋“œ ์œ ํ˜• - 3 ์นด๋“œ์œ ํ˜• 3 ์นด๋“œ ์œ ํ˜• ๋ ˆ์ด์•„์›ƒ ์‚ฌ์ดํŠธ์ž…๋‹ˆ๋‹ค. html๊ณผ css๋กœ ์ž‘์—…ํ•˜์˜€์Šต๋‹ˆ๋‹ค. ์›๋ณธ ์‚ฌ์ดํŠธ ๋ณด๊ธฐ ์›๋ณธ ์†Œ์Šค ๋ณด๊ธฐ ๋ ˆ์ด์•„์›ƒ ์„ค์ • figma๋กœ ๊ทธ๋ฆฌ๋“œ์™€ ์‚ฌ์ดํŠธ์˜ ๋ ˆ์ด์•„์›ƒ์„ ์žก์Šต๋‹ˆ๋‹ค. HTML html ์†Œ์Šค์ž…๋‹ˆ๋‹ค. ๋‹ค์ด์–ด๋ฆฌ์˜ ์„ธ๊ณ„ Write ์†๊ธ€์”จ๋ฅผ ์ด์šฉํ•˜์—ฌ ๋‹น์‹ ์˜ ๋‹ค์ด์–ด๋ฆฌ๋ฅผ ์˜ˆ์˜๊ฒŒ ๊พธ๋ฉฐ๋ณด์„ธ์š”! ์†๊ธ€์”จ๋ฅผ ์ด์šฉํ•˜์—ฌ ๋‹น์‹ ์˜ ๋‹ค์ด์–ด๋ฆฌ๋ฅผ ์˜ˆ์˜๊ฒŒ ๊พธ๋ฉฐ๋ณด์„ธ์š”! ์ด๋ฏธ์ง€๊ฐ€ ์—†์–ด๋„ ๋ฉ‹์ง€๊ฒŒ ๋‹ค์ด์–ด๋ฆฌ๋ฅผ ๊พธ๋ฐ€ ์ˆ˜ ์žˆ๋‹ต๋‹ˆ๋‹ค. ๊ทธ๋ฆผ์„ ๊ทธ๋ฆฌ์ง€ ๋ชปํ•œ๋‹ค๊ณ  ํ•ด๋„, ๋ณด์—ฌ์ค„ ์ด๋ฏธ์ง€๊ฐ€ ์—†๋‹ค๊ณ  ํ•ด๋„ ๊ฒ๋จน์ง€ ๋ง๊ณ  ๋‹ค์ด์–ด๋ฆฌ ๊พธ๋ฏธ๊ธฐ๋ฅผ ์‹œ๋„ํ•˜์„ธ์š” ์˜ˆ์˜๊ณ  ๋ฉ‹์ง„ ๋‹ค์ด์–ด๋ฆฌ๋กœ ๋‹ค๋ฅธ์‚ฌ๋žŒ๋“ค์˜ ๋งˆ์Œ์„ ์‚ฌ๋กœ์žก์•„์š” Writelove 9 Resources Write ์†๊ธ€์”จ๋ฅผ ์ด์šฉํ•˜์—ฌ ๋‹น์‹ ์˜ ๋‹ค์ด์–ด๋ฆฌ๋ฅผ ์˜ˆ์˜๊ฒŒ ๊พธ๋ฉฐ๋ณด์„ธ์š”! ์†๊ธ€์”จ๋ฅผ ์ด์šฉํ•˜์—ฌ ๋‹น์‹ ์˜ ๋‹ค์ด์–ด๋ฆฌ๋ฅผ ์˜ˆ์˜๊ฒŒ ๊พธ๋ฉฐ๋ณด.. 2022. 8. 11.
02. ์นด๋“œ ์œ ํ˜•-2 ์นด๋“œ์œ ํ˜•2 ์นด๋“œ ์œ ํ˜• ๋ ˆ์ด์•„์›ƒ ์‚ฌ์ดํŠธ์ž…๋‹ˆ๋‹ค. html๊ณผ css๋กœ ์ž‘์—…ํ•˜์˜€์Šต๋‹ˆ๋‹ค. ์›๋ณธ ์‚ฌ์ดํŠธ ๋ณด๊ธฐ ์›๋ณธ ์†Œ์Šค ๋ณด๊ธฐ ๋ ˆ์ด์•„์›ƒ ์„ค์ • figma๋กœ ๊ทธ๋ฆฌ๋“œ์™€ ์‚ฌ์ดํŠธ์˜ ๋ ˆ์ด์•„์›ƒ์„ ์žก์Šต๋‹ˆ๋‹ค. HTML html ์†Œ์Šค์ž…๋‹ˆ๋‹ค. ๋ฉ‹์ง„ ์•ต๋ฌด์ƒˆ๋ฅผ ๋ณด์„ธ์š”๐Ÿฆœ ํ™”๋ คํ•œ ์•ต๋ฌด์ƒˆ์˜ ๊ด‘๊ธฐ, ํญ๋ ฅ์„ฑ, ๊ทธ๋ฆฌ๊ณ  ๊ท€์—ฌ์›€์„ ์•Œ๋ฆฌ๋ ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค. ์‚ฌ๋žŒ๋“ค์ด ๋ญ๋ผ๊ณ  ํ•  ๋•Œ๋„ ์žˆ์ง€๋งŒ ๊ทธ๋Ÿฐ ๋ถ€๋ถ„๊นŒ์ง€ ์ •๋ง ๊ท€์—ฌ์šด๊ฑธ์š” ์˜ˆ์œ ์šฐ๋ฆฌ ์•ต๋ฌด์ƒˆ๋“ค์˜ ๋งค๋ ฅ์— ๋น ์ ธ๋ณด์„ธ์š”. ์ฒญ๊ธˆ๊ฐ•์ฒญ๊ธˆ๊ฐ•์ฒญ๊ธˆ๊ฐ•์ฒญ๊ธˆ๊ฐ•์ฒญ๊ธˆ๊ฐ• ๋ฉ‹์ง„ ์•ต๋ฌด์ƒˆ๋“ค ์ƒํ™œ์„ ๋ณด์„ธ์š”. ์ฒญ๊ธˆ๊ฐ•์€ ์‚ฌ๋žŒ๋“ค์ด ์•Œ๊ณ  ์žˆ๋Š” ๋Œ€ํ‘œ์ ์ธ ์•ต๋ฌด์ƒˆ์ž…๋‹ˆ๋‹ค. ํ™”๋ คํ•œ ๊ทธ ๋ชจ์Šต์„ ๋ณด๋ฉด ๋ชจ๋‘ ์•ต๋ฌด์™€ ์‚ฌ๋ž‘์— ๋น ์ง€๊ฒŒ ๋  ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๋”๋ณด๊ธฐ ๋ชฉ๋„๋ฆฌ์•ต๋ฌด ๋ฉ‹์ง„ ์•ต๋ฌด์ƒˆ๋“ค ์ƒํ™œ์„ ๋ณด์„ธ์š”. ์ฒญ๊ธˆ๊ฐ•์€ ์‚ฌ๋žŒ๋“ค์ด ์•Œ๊ณ  ์žˆ๋Š” ๋Œ€ํ‘œ์ ์ธ ์•ต๋ฌด์ƒˆ์ž…๋‹ˆ๋‹ค. ํ™”๋ คํ•œ ๊ทธ ๋ชจ์Šต์„ ๋ณด๋ฉด ๋ชจ๋‘ ์•ต๋ฌด.. 2022. 8. 10.
01. ์นด๋“œ ์œ ํ˜•-1 ์นด๋“œ์œ ํ˜• ์นด๋“œ ์œ ํ˜• ๋ ˆ์ด์•„์›ƒ ์‚ฌ์ดํŠธ์ž…๋‹ˆ๋‹ค. html๊ณผ css๋กœ ์ž‘์—…ํ•˜์˜€์Šต๋‹ˆ๋‹ค. ์›๋ณธ ์‚ฌ์ดํŠธ ๋ณด๊ธฐ ์›๋ณธ ์†Œ์Šค ๋ณด๊ธฐ ๋ ˆ์ด์•„์›ƒ ์„ค์ • figma๋กœ ๊ทธ๋ฆฌ๋“œ์™€ ์‚ฌ์ดํŠธ์˜ ๋ ˆ์ด์•„์›ƒ์„ ์žก์Šต๋‹ˆ๋‹ค. HTML html ์†Œ์Šค์ž…๋‹ˆ๋‹ค. ๋‹ค์ด์–ด๋ฆฌ ๊พธ๋ฏธ๊ธฐ ๋‹น์‹ ๋งŒ์˜ ๋ฉ‹์ง„ ๊ธฐ๋ก์žฅ, ๊ฐœ์„ฑ์žˆ๋Š” ๋‹ค์ด์–ด๋ฆฌ๋ฅผ ๋งŒ๋“ค์–ด๋ณด์„ธ์š”! ๋ฉ‹์ง„ ๊ธ€์„ ์ ์–ด๋ณด์„ธ์š”. ์–ด๋– ํ•œ ๊ธ€์ด ๋ฉ‹์ง„ ๊ธ€์ด๋ผ๊ณ  ์ •ํ™•ํžˆ ์ •ํ•  ์ˆ˜๋Š” ์—†์Šต๋‹ˆ๋‹ค๋งŒ ๋‹น์‹ ์ด ์“ฐ๋Š” ๊ธ€์ด๋ผ๋ฉด ์–ด๋–ค ๊ธ€์ด๋“  ๋ฉ‹์งˆ ๊ฑฐ์˜ˆ์š”! ์—ฐํ•„์„ ๋“ค๊ณ  ์ข…์ด์— ์ ์–ด๋ณผ๊นŒ์š”? ๋” ์ž์„ธํžˆ ๋ณด๊ธฐ ๋‹น์‹ ์˜ ์ถ”์–ต์„ ๊ธฐ๋กํ•˜์„ธ์š” ๊ธฐ์–ต์œผ๋กœ ๋‚จ๊ธฐ๋Š” ๊ฒƒ๋„ ์ข‹์€ ๋ฐฉ๋ฒ•์ด์ง€๋งŒ ๊ธฐ๋ก์œผ๋กœ ๋‚จ๊ธฐ์ง€ ์•Š์€ ๊ธฐ์–ต์€ ๊ธˆ๋ฐฉ ํœ˜๋ฐœ๋˜๋Š” ๋ฒ•์ด์ฃ . ๋‹น์‹ ์˜ ๊ธฐ์–ต๊ณผ ๊ฐ์ •์„ ์–ด๋”˜๊ฐ€์— ๋ฐ•์ œํ•˜์„ธ์š”. ๋” ์ž์„ธํžˆ ๋ณด๊ธฐ ๋‹น์‹ ์˜ ์ถ”์–ต์„ ์žฅ์‹ํ•˜์„ธ์š” ๋‹น์‹ ์˜ ๊ฐ์ •์„ ์‹œ๊ฐ์ ์œผ๋กœ ํ‘œํ˜„ํ•˜๊ณ  ์‹ถ์ง€ ์•Š์œผ์‹ ๊ฐ€์š”? ์Šคํ‹ฐ.. 2022. 8. 9.
728x90
๋ฐ˜์‘ํ˜•