๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
[HTML+CSS][ํผ ๊ด€๋ จ ํƒœ๊ทธ๋“ค] 06 - ์—ฐ์Šต๋ฌธ์ œ 01 ์˜ˆ์•ฝ ์ •๋ณด ์ด ๋ฆ„ ํœด๋Œ€ํฐ ์ด๋ฉ”์ผ 02 ํ”„๋ŸฐํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž ์ง€์›์„œ HTML, CSS, Javascript์— ๋Œ€ํ•œ ๊ธฐ์ˆ ์  ์ดํ•ด์™€ ๊ฒฝํ—˜์ด ์žˆ๋Š” ๋ถ„์„ ์ฐพ์Šต๋‹ˆ๋‹ค. ๊ฐœ์ธ์ •๋ณด ์ด๋ฆ„ ์—ฐ๋ฝ์ฒ˜ ์ง€์› ๋ถ„์•ผ ์›น ํผ๋ธ”๋ฆฌ์‹ฑ ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ๊ฐœ๋ฐœ ๊ฐœ๋ฐœ ํ™˜๊ฒฝ ๊ฐœ์„  ์ง€์› ๋™๊ธฐ ์ ‘์ˆ˜ํ•˜๊ธฐ ๋‹ค์‹œ ์“ฐ๊ธฐ Do it! HTML5+CSS3 ์›น ํ‘œ์ค€์˜ ์ •์„ โ€ป ํ•ด๋‹น ๊ธ€์€ ์Šต๋“ ๋ชฉ์ ์œผ๋กœ ์ž‘์„ฑ๋œ ๊ธ€์ž…๋‹ˆ๋‹ค โ€ป 2020. 6. 21.
[HTML+CSS][ํผ ๊ด€๋ จ ํƒœ๊ทธ๋“ค] 05 - ๋‹ค์–‘ํ•œ ํผ ์š”์†Œ๋“ค [HTML+CSS][ํผ ๊ด€๋ จ ํƒœ๊ทธ๋“ค] 04 - ์—ฌ๋Ÿฌ ๋ฐ์ดํ„ฐ ๋‚˜์—ดํ•ด ๋ณด์—ฌ์ฃผ๊ธฐ ํƒœ๊ทธ์˜ ๋‹ค์–‘ํ•œ ์†์„ฑ" data-og-description="ํƒœ๊ทธ" data-og-description="[HTML+CSS][ํผ ๊ด€๋ จ ํƒœ๊ทธ๋“ค] 01 - ํผ(form) [HTML+CSS] [์ด๋ฏธ์ง€์™€ ํ•˜์ดํผ๋งํฌ] 03 - SVG ์ด๋ฏธ์ง€ [HTML+CSS] [์ด๋ฏธ์ง€์™€ ํ•˜์ดํผ๋งํฌ] 02 - ๋ง.. onelight-stay.tistory.com ์•ž ์ „์— ๋ฐฐ์šด ํผ๋“ค๊ณผ ๋”๋ถˆ์–ด ๋”์šฑ ๋‹ค์–‘ํ•œ ํผ ์š”์†Œ๋“ค์— ๋Œ€ํ•ด ์•Œ์•„๋ณด์ž. - ๋ฒ„ํŠผ ํƒœ๊ทธ์—์„œ๋„ ๋ฒ„ํŠผ์„ ๋„ฃ์„ ์ˆ˜ ์žˆ์ง€๋งŒ ํƒœ๊ทธ๋ฅผ ์‚ฌ์šฉํ•ด ๋ฒ„ํŠผ์„ ์‚ฝ์ž…ํ•  ์ˆ˜ ์žˆ๋‹ค. ๊ณผ์˜ ์ฐจ์ด์ ์€ ์€ ํƒœ๊ทธ ์ž์ฒด์—์„œ ์—ญํ• ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ํ™”๋ฉด ๋‚ญ๋…๊ธฐ์—์„œ ๋ฒ„ํŠผ์ด ์žˆ๋‹ค๋Š” ๊ฒƒ์„ ์ •ํ™•ํ•˜๊ฒŒ ์ „๋‹ฌํ•  ์ˆ˜ ์žˆ์œผ๋ฉฐ, ๋ฒ„ํŠผ์— ์•„์ด์ฝ˜๊ณผ ๋””์ž์ธ.. 2020. 6. 20.
[HTML+CSS][ํผ ๊ด€๋ จ ํƒœ๊ทธ๋“ค] 04 - ์—ฌ๋Ÿฌ ๋ฐ์ดํ„ฐ ๋‚˜์—ดํ•ด ๋ณด์—ฌ์ฃผ๊ธฐ [HTML+CSS][ํผ ๊ด€๋ จ ํƒœ๊ทธ๋“ค] 03 - ํƒœ๊ทธ์˜ ๋‹ค์–‘ํ•œ ์†์„ฑ ํƒœ๊ทธ" data-og-description="[HTML+CSS][ํผ ๊ด€๋ จ ํƒœ๊ทธ๋“ค] 01 - ํผ(form) [HTML+CSS] [์ด๋ฏธ์ง€์™€ ํ•˜์ดํผ๋งํฌ] 03 - SVG ์ด๋ฏธ์ง€ [HTML+CSS] [์ด๋ฏธ์ง€์™€ ํ•˜์ดํผ๋งํฌ] 02 - ๋งํฌ ํƒœ๊ทธ [HTML+CSS] [์ด๋ฏธ์ง€์™€ ํ•˜์ดํผ๋งํฌ].. onelight-stay.tistory.com ํ•œ ์ค„์งœ๋ฆฌ ๋ฐ์ดํ„ฐ์— ์–ด๋Š ์ •๋„ ๋ฐฐ์›Œ๋ณด์•˜์œผ๋‹ˆ ์ด๋ฒˆ์—๋Š” ์—ฌ๋Ÿฌ ๋ฐ์ดํ„ฐ๋ฅผ ๋ณด๊ธฐ ์ข‹๊ฒŒ ๋‚˜์—ดํ•ด ๋ณด๋Š” ๊ฒƒ์— ๋Œ€ํ•ด์„œ ๋ฐฐ์›Œ๋ณด์ž. , , - ๋“œ๋กญ๋‹ค์šด ์‚ฌ์šฉ์ž๊ฐ€ ๋‚ด์šฉ์„ ์ž…๋ ฅํ•˜๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๋ผ ์—ฌ๋Ÿฌ ์˜ต์…˜ ์ค‘์—์„œ ์„ ํƒํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋งŒ๋“  ๊ฒƒ์ด๋‹ค. ๋“œ๋กญ๋‹ค์šด ๋ชฉ๋ก์„ ์ œ์ž‘ํ•œ๋‹ค. ๋“œ๋กญ๋‹ค์šด ๋ชฉ๋ก์— ํ‘œ์‹œ๋˜๋Š” ์˜ต์…˜์„ ์ง€์ •ํ•œ๋‹ค. ๋“œ๋กญ๋‹ค์šด ๋ชฉ๋ก์—์„œ ์—ฌ๋Ÿฌํ•ญ๋ชฉ์„ ๋ช‡.. 2020. 6. 19.
[HTML+CSS][ํผ ๊ด€๋ จ ํƒœ๊ทธ๋“ค] 03 - <input> ํƒœ๊ทธ์˜ ๋‹ค์–‘ํ•œ ์†์„ฑ [HTML+CSS][ํผ ๊ด€๋ จ ํƒœ๊ทธ๋“ค] 02 - ์‚ฌ์šฉ์ž ์ž…๋ ฅ์„ ์œ„ํ•œ ํƒœ๊ทธ [HTML+CSS][ํผ ๊ด€๋ จ ํƒœ๊ทธ๋“ค] 01 - ํผ(form) [HTML+CSS] [์ด๋ฏธ์ง€์™€ ํ•˜์ดํผ๋งํฌ] 03 - SVG ์ด๋ฏธ์ง€ [HTML+CSS] [์ด๋ฏธ์ง€์™€ ํ•˜์ดํผ๋งํฌ] 02 - ๋งํฌ ํƒœ๊ทธ [HTML+CSS] [์ด๋ฏธ์ง€์™€ ํ•˜์ดํผ๋งํฌ] 01 - ์ด๋ฏธ์ง€ ํƒœ๊ทธ [HTML+CSS].. onelight-stay.tistory.com ํƒœ๊ทธ์˜ ํผ์„ ๋งŒ๋“œ๋Š” ๊ธฐ๋ณธ์ ์ธ ๊ฒƒ์— ๋Œ€ํ•ด์„œ ์•Œ์•˜์œผ๋‹ˆ ํ•„๋“œ๋ฅผ ์ข€ ๋” ์„ธ๋ฐ€ํ•˜๊ฒŒ ์กฐ์ •ํ•˜๋Š” ๊ฒƒ์— ๋Œ€ํ•ด์„œ ๋ฐฐ์›Œ๋ณด์ž. - autofocus ์†์„ฑ - ํ•ด๋‹น ์†์„ฑ์„ ์‚ฌ์šฉํ•  ๊ฒฝ์šฐ ํŽ˜์ด์ง€๋ฅผ ๋ถˆ๋Ÿฌ์˜ค์ž๋งˆ์ž ํผ์˜ ์š”์†Œ ์ค‘์—์„œ ์›ํ•˜๋Š” ์š”์†Œ์— ๋งˆ์šฐ์Šค ์ปค์„œ๋ฅผ ํ‘œ์‹œํ•  ์ˆ˜ ์žˆ๋‹ค. ์—ฌ๋ฆ„๋ฐฉํ•™ ํŠน๊ฐ• ์‹ ์ฒญ ์ˆ˜๊ฐ•๊ณผ๋ชฉ ์˜์–ดํšŒํ™”(์ดˆ๊ธ‰) ์‹ ์ฒญ์ž ์ด๋ฆ„ ํ•™๋ฒˆ ํ•™๊ณผ -.. 2020. 6. 18.
[HTML+CSS][ํผ ๊ด€๋ จ ํƒœ๊ทธ๋“ค] 02 - ์‚ฌ์šฉ์ž ์ž…๋ ฅ์„ ์œ„ํ•œ <input> ํƒœ๊ทธ [HTML+CSS][ํผ ๊ด€๋ จ ํƒœ๊ทธ๋“ค] 01 - ํผ(form) [HTML+CSS] [์ด๋ฏธ์ง€์™€ ํ•˜์ดํผ๋งํฌ] 03 - SVG ์ด๋ฏธ์ง€ [HTML+CSS] [์ด๋ฏธ์ง€์™€ ํ•˜์ดํผ๋งํฌ] 02 - ๋งํฌ ํƒœ๊ทธ [HTML+CSS] [์ด๋ฏธ์ง€์™€ ํ•˜์ดํผ๋งํฌ] 01 - ์ด๋ฏธ์ง€ ํƒœ๊ทธ [HTML+CSS] [ํ…์ŠคํŠธ ๊ด€๋ จ ํƒœ๊ทธ] 04 - ํ‘œ๋ฅผ ๋งŒ๋“œ๋Š” ํƒœ๊ทธ.. onelight-stay.tistory.com ํƒœ๊ทธ์— ๋Œ€ํ•ด์„œ ๋ฐฐ์› ๋‹ค๋ฉด ํผ ์•ˆ์—์„œ ์‚ฌ์šฉ์ž๊ฐ€ ๋‚ด์šฉ์„ ์ž…๋ ฅํ•˜๋Š” ๋ถ€๋ถ„์— ์ง์ ‘ ์‚ฌ์šฉ๋˜๋Š” ํƒœ๊ทธ์™€ type์†์„ฑ๋“ค์— ๋Œ€ํ•ด์„œ ์•Œ์•„๋ณด์ž. - ํผ์—์„œ ์‚ฌ์šฉ์ž ์ž…๋ ฅ๋ฐ›๊ธฐ ์œ„ํ•ด ์‚ฌ์šฉํ•˜๋Š” ํƒœ๊ทธ ํผ์€ ํฌ๊ฒŒ ์‚ฌ์šฉ์ž๊ฐ€ ๋‚ด์šฉ์„ ์ž…๋ ฅํ•˜๋Š” ๋ถ€๋ถ„๊ณผ ์ž…๋ ฅ ๋‚ด์šฉ์„ ์„œ๋ฒ„๋กœ ์ „์†กํ•˜๋Š” ๋ถ€๋ถ„์ด ์žˆ๋Š”๋ฐ ์€ ํ•œ ์ค„์งœ๋ฆฌ ํ…์ŠคํŠธ๋‚˜ ๋น„๋ฐ€๋ฒˆํ˜ธ๋ฅผ ์ž…๋ ฅํ•˜๊ณ  ๋ฒ„ํŠผ์„ ํด๋ฆญํ•˜๋Š” ๊ฒƒ๋“ค์„ ๋งŒ๋“ ๋‹ค๊ณ  ๋ณด๋ฉด ๋œ๋‹ค... 2020. 6. 17.
[HTML+CSS][ํผ ๊ด€๋ จ ํƒœ๊ทธ๋“ค] 01 - ํผ(form) [HTML+CSS] [์ด๋ฏธ์ง€์™€ ํ•˜์ดํผ๋งํฌ] 03 - SVG ์ด๋ฏธ์ง€ [HTML+CSS] [์ด๋ฏธ์ง€์™€ ํ•˜์ดํผ๋งํฌ] 02 - ๋งํฌ ํƒœ๊ทธ [HTML+CSS] [์ด๋ฏธ์ง€์™€ ํ•˜์ดํผ๋งํฌ] 01 - ์ด๋ฏธ์ง€ ํƒœ๊ทธ [HTML+CSS] [ํ…์ŠคํŠธ ๊ด€๋ จ ํƒœ๊ทธ] 04 - ํ‘œ๋ฅผ ๋งŒ๋“œ๋Š” ํƒœ๊ทธ [HTML+CSS] [ํ…์ŠคํŠธ ๊ด€๋ จ ํƒœ๊ทธ] 03 - ๋ชฉ๋ก์„ ๋งŒ๋“œ๋Š”.. onelight-stay.tistory.com ์ผ์ƒ์—์„œ ์šฐ๋ฆฌ๋Š” ํ™ˆํŽ˜์ด์ง€์—์„œ ๋กœ๊ทธ์ธ ์ฐฝ์„ ํ”ํžˆ ์ ‘ํ•  ์ˆ˜ ์žˆ๋Š”๋ฐ ์ด๊ฒƒ๋“ค์ด ๋ฐ”๋กœ 'ํผ'์œผ๋กœ ๊ตฌ์„ฑ๋˜์–ด ์žˆ๋‹ค. ์ด๋Ÿฌํ•œ ํผ๋“ค์˜ ๊ตฌ์กฐ์— ๋Œ€ํ•ด์„œ ์•Œ์•„๋ณด๊ณ  ํผ์˜ ํ˜•ํƒœ๋ฅผ ๋งŒ๋“ค์–ด์ฃผ๋Š” ํƒœ๊ทธ์— ๋Œ€ํ•ด์„œ ์•Œ์•„๋ณด์ž. ํผ ํƒœ๊ทธ์— ๋Œ€ํ•ด์„œ ์•Œ๊ธฐ ์ „์— ํผ์˜ ๋™์žฅ ์›๋ฆฌ์— ๋Œ€ํ•ด์„œ ๊ฐ„๋‹จํžˆ ์•Œ์•„๋ณด์ž๋ฉด ์‚ฌ์šฉ์ž๊ฐ€ ๋ธŒ๋ผ์šฐ์ €๋ฅผ ์—ด์–ด ์•„์ด๋””์™€ ๋น„๋ฐ€๋ฒˆํ˜ธ๋ฅผ ์ž…๋ ฅํ•˜๊ณ  [๋กœ๊ทธ์ธ] ๋ฒ„ํŠผ์„ ๋ˆŒ๋ €.. 2020. 6. 16.

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”