Freecodecamp: ํผ ์ปจํŠธ๋กค์— ๋Œ€ํ•œ ์„ค๋ช… ์ถ”๊ฐ€

์— ๋งŒ๋“  2016๋…„ 08์›” 23์ผ  ยท  5์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: freeCodeCamp/freeCodeCamp

๋„์ „ ์ด๋ฆ„

https://www.freecodecamp.com/challenges/style-text-inputs-as-form-controls

๋ฌธ์ œ ์„ค๋ช…

์ž…๋ ฅ ํ•„๋“œ์— ์–‘์‹ ์ œ์–ด ํด๋ž˜์Šค๋ฅผ ์ถ”๊ฐ€ํ•˜๋Š” ๊ฒƒ์ด ์‹ค์ œ๋กœ ์ˆ˜ํ–‰ํ•˜๋Š” ์ž‘์—…์— ๋Œ€ํ•œ ์„ค๋ช…์ด ์žˆ๋‹ค๋ฉด์ด ๋ฌธ์ œ๋Š” ํ›จ์”ฌ ๋” ์œ ์ต ํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๋ผ์ธ์„ ๋”ฐ๋ผ ๋ญ”๊ฐ€ :

[.form-control] ํด๋ž˜์Šค๊ฐ€์žˆ๋Š” ๋ชจ๋“  ํ…์ŠคํŠธ [input], [textarea] ๋ฐ [select] ์š”์†Œ์˜ ๋„ˆ๋น„๋Š” 100 %์ž…๋‹ˆ๋‹ค.

first timers only help wanted

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

์–‘์‹ ์ œ์–ด๋กœ ์Šคํƒ€์ผ ํ…์ŠคํŠธ ์ž…๋ ฅ์— ๋ฌธ์ œ๊ฐ€ ์žˆ์Œ
๊ทธ๋ƒฅ class = "form-control"์„

1) <form action="/submit-cat-photo" class="form-control">

2) <div class="row" class="form-control">
์ฒดํฌ ๋ฐ•์Šค์˜ ์ฒซ ๋ฒˆ์งธ div i.e. <div class="col-xs-4">

๋งˆ์ง€๋ง‰์œผ๋กœ ์—ฌ๊ธฐ์— ์ถ”๊ฐ€
3) <input type="text" placeholder="cat photo URL" class="form-control" required>

๋ชจ๋“  5 ๋Œ“๊ธ€

์ด ๋„์ „์€ ํ˜„์žฌ ๋งค์šฐ ์งง์œผ๋ฉฐ ์—ฌ๊ธฐ์— ์„ค๋ช…์„ ์ถ”๊ฐ€ ํ•  ๊ฐ€์น˜๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.

์ฒ˜์Œ์œผ๋กœ :
์ด ์ค„ ์•„๋ž˜์— ๋ฌธ์žฅ์„ ์ถ”๊ฐ€ํ•ด์•ผํ•ฉ๋‹ˆ๋‹ค. ๊ธฐ์—ฌ ๊ฐ€์ด๋“œ ๋ผ์ธ์„ ํ™•์ธํ•˜๊ณ  ๋„์›€์ด ํ•„์š”ํ•˜๋ฉด ๊ธฐ์—ฌ์ž ์ฑ„ํŒ…๋ฐฉ์œผ๋กœ ๋ฌธ์˜ํ•˜์‹ญ์‹œ์˜ค.

์ฐธ๊ณ  : ์‹ ๊ทœ ์‚ฌ์šฉ์ž์ด๊ณ  ์ด์ „์— ์ œ์ถœ ํ•œ ์ ์ด์—†๋Š” ๊ฒฝ์šฐ์—๋งŒ์ด ๋ฌธ์ œ์— ๋Œ€ํ•œ ํ’€ ์š”์ฒญ์„ ์ œ์ถœํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ ๋ฌธ์ œ ๋ ˆ์ด๋ธ” first-timers-only : stuck_out_tongue_winking_eye :

ํŠน๋ณ„ํžˆ ์ถ”๊ฐ€ํ•ด์•ผํ•˜๋Š” ์ฝ”๋“œ๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.

"All textual <code>&lt;input&gt;</code>, <code>&lt;textarea&gt;</code>, and <code>&lt;select&gt;</code> elements with the class <code>.form-control</code> have a width of 100%."

๋‹ค์Œ๊ณผ ๊ฐ™์ด ๋ Œ๋”๋ง๋˜์–ด์•ผํ•ฉ๋‹ˆ๋‹ค.

.form-control ํด๋ž˜์Šค์˜ ๋ชจ๋“  ํ…์ŠคํŠธ <input> , <textarea> ๋ฐ <select> ์š”์†Œ์˜ ๋„ˆ๋น„๋Š” 100 %์ž…๋‹ˆ๋‹ค.

์•ˆ๋…•. ์ €๋Š” Free Code Camp์— ์ฐธ์—ฌํ•˜๋Š” ๋ฐ ๊ด€์‹ฌ์ด์žˆ๋Š” ์ตœ์ดˆ์˜ ์‚ฌ๋žŒ์ž…๋‹ˆ๋‹ค. ์ด ๋ฌธ์ œ์— ๋Œ€ํ•œ PR์„ ์ œ์ถœํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค. ๊ฐ์‚ฌ!

ํ—ค์ด ํ…Œ์ŠคํŠธ๋Š” ์–ด๋–ป์Šต๋‹ˆ๊นŒ ??
๊ฐ ์ž…๋ ฅ์— ๋Œ€ํ•ด ํ…Œ์ŠคํŠธ๋ฅผ ์ถ”๊ฐ€ํ•ด์•ผํ•ฉ๋‹ˆ๋‹ค.

์–‘์‹ ์ œ์–ด๋กœ ์Šคํƒ€์ผ ํ…์ŠคํŠธ ์ž…๋ ฅ์— ๋ฌธ์ œ๊ฐ€ ์žˆ์Œ
๊ทธ๋ƒฅ class = "form-control"์„

1) <form action="/submit-cat-photo" class="form-control">

2) <div class="row" class="form-control">
์ฒดํฌ ๋ฐ•์Šค์˜ ์ฒซ ๋ฒˆ์งธ div i.e. <div class="col-xs-4">

๋งˆ์ง€๋ง‰์œผ๋กœ ์—ฌ๊ธฐ์— ์ถ”๊ฐ€
3) <input type="text" placeholder="cat photo URL" class="form-control" required>

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰