https://www.freecodecamp.com/challenges/style-text-inputs-as-form-controls
์ ๋ ฅ ํ๋์ ์์ ์ ์ด ํด๋์ค๋ฅผ ์ถ๊ฐํ๋ ๊ฒ์ด ์ค์ ๋ก ์ํํ๋ ์์ ์ ๋ํ ์ค๋ช ์ด ์๋ค๋ฉด์ด ๋ฌธ์ ๋ ํจ์ฌ ๋ ์ ์ต ํ ๊ฒ์ ๋๋ค. ๋ผ์ธ์ ๋ฐ๋ผ ๋ญ๊ฐ :
[.form-control] ํด๋์ค๊ฐ์๋ ๋ชจ๋ ํ ์คํธ [input], [textarea] ๋ฐ [select] ์์์ ๋๋น๋ 100 %์ ๋๋ค.
์ด ๋์ ์ ํ์ฌ ๋งค์ฐ ์งง์ผ๋ฉฐ ์ฌ๊ธฐ์ ์ค๋ช ์ ์ถ๊ฐ ํ ๊ฐ์น๊ฐ ์์ต๋๋ค.
์ฒ์์ผ๋ก :
์ด ์ค ์๋์ ๋ฌธ์ฅ์ ์ถ๊ฐํด์ผํฉ๋๋ค. ๊ธฐ์ฌ ๊ฐ์ด๋ ๋ผ์ธ์ ํ์ธํ๊ณ ๋์์ด ํ์ํ๋ฉด ๊ธฐ์ฌ์ ์ฑํ
๋ฐฉ์ผ๋ก ๋ฌธ์ํ์ญ์์ค.
์ฐธ๊ณ : ์ ๊ท ์ฌ์ฉ์์ด๊ณ ์ด์ ์ ์ ์ถ ํ ์ ์ด์๋ ๊ฒฝ์ฐ์๋ง์ด ๋ฌธ์ ์ ๋ํ ํ ์์ฒญ์ ์ ์ถํ ์ ์์ต๋๋ค. ๋ฐ๋ผ์ ๋ฌธ์ ๋ ์ด๋ธ
first-timers-only
: stuck_out_tongue_winking_eye :
ํน๋ณํ ์ถ๊ฐํด์ผํ๋ ์ฝ๋๋ ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
"All textual <code><input></code>, <code><textarea></code>, and <code><select></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>
๊ฐ์ฅ ์ ์ฉํ ๋๊ธ
์์ ์ ์ด๋ก ์คํ์ผ ํ ์คํธ ์ ๋ ฅ์ ๋ฌธ์ ๊ฐ ์์
๊ทธ๋ฅ 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>