HTML๐Ÿ”จ/html&css ํผ์š”์†Œ

css text area ๊ณ ์ •๋‚ด์šฉ์ž…๋ ฅ (placeholder ์ค„๋ฐ”๊ฟˆํƒœ๊ทธ 
 )

hyojinny 2022. 10. 10. 20:03

๋‚ด์šฉ์ž…๋ ฅ ๋ถ€๋ถ„ ๋ฏธ๋ฆฌ ํ…์ŠคํŠธ๊ฐ€ ๋“ค์–ด๊ฐ€์žˆ๊ณ 

์ค„๋ฐ”๊ฟˆ์ด ๋˜๋„๋ก ํ•ด๋ณด์ž!

html <textarea>

๋ฉ€ํ‹ฐ๋ผ์ธ ์ผ๋ฐ˜ ํ…์ŠคํŠธ ํŽธ์ง‘ ์ปจํŠธ๋กค
์‚ฌ์šฉ์ž๊ฐ€ textarea ํƒœ๊ทธ์˜ ๋ฐ•์Šคํฌ๊ธฐ, ์‚ฌ์ด์ฆˆ๋ฅผ ์ˆ˜์ •ํ•˜์ง€๋ชปํ•˜๋„๋ก  resize์†์„ฑ๊ฐ’ ์ง€์ •
textarea๋Š” ์†์„ฑ์€  ํ•œ์ค„๋กœ ์ž‘์„ฑํ•ด์•ผํ•จ
rows textarea ์˜ ์†์„ฑ / ์ตœ์ดˆ์ž…๋ ฅ ๊ฐ€๋Šฅ ์ค„์ˆ˜ ์ง€์ • 
placeholder textarea ์˜ ์†์„ฑ

์ž…๋ ฅํ•„๋“œ์— ์‚ฌ์šฉ์ž์˜ ์ดํ•ด๋ฅผ ๋•๋„๋ก ์งฆ์€ ๋„์›€๋ง์„ ์‚ฌ์ „๋ช…์‹œ
์‚ฌ์šฉ์ž ์ž…๋ ฅ์‹œ ์‚ฌ๋ผ์ง

๋‚ด์šฉ์ž…๋ ฅ์‹œ ํ•œ์ค„๋กœ ์ž‘์„ฑํ•˜๋˜ ์ค„๋ฐ”๊ฟˆ์‹œ &#10; ์‚ฌ์šฉ
 resize
/* textarea ๋ฆฌ์‚ฌ์ด์ฆˆ๊ธฐ๋Šฅ ๋นผ๊ธฐ */
textarea {resize: none}

 

 

1.html ์ž‘์„ฑ

 

 

<textarea rows="10"
 placeholder="๊ฐ€๋งน์  ์‹ ์ฒญ๊ณผ ๊ด€๋ จ๋œ ๋ฌธ์˜์‚ฌํ•ญ์„ ์ž‘์„ฑํ•ด ์ฃผ์„ธ์š”.&#10;๋ฌธ์˜ํ•˜์‹ค ๋‚ด์šฉ์„ ๊ตฌ์ฒด์ ์œผ๋กœ ์ž‘์„ฑํ•ด ์ฃผ์‹œ๋ฉด ๋”์šฑ ๋น ๋ฅด๊ณ  ์ •ํ™•ํ•œ ๋‹ต๋ณ€์„ ๋“œ๋ฆด ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค."
 title="๋‚ด์šฉ์ž…๋ ฅ"></textarea>

 

 

rows ์†์„ฑ์€ ์ตœ์ดˆ ์ž…๋ ฅ๊ฐ€๋Šฅ ์ค„์ˆ˜๋กœ 1๋กœ ์ž…๋ ฅ์‹œ ์ด๋ ‡๊ฒŒ ์ข๊ฒŒ ๋‚˜์˜จ๋‹ค.

 

 

rows ์†์„ฑ 10์ค„์ง€์ •์‹œ

 

 

2 . css๋กœ ๊พธ๋ฏธ๊ธฐ

 

๊ธ€ ๋‚ด์šฉ์ด ๋ฐ”๋กœ ๋ถ™์ง€ ์•Š๋„๋ก padding ๊ฐ’ ์ง€์ •

 

.inquiry_page .inquiry_area .th_top {
    vertical-align: top;
    padding-top: 24px;
}
.inquiry_page .inquiry_area textarea:focus {
    outline: none;
}
.inquiry_page .inquiry_area .file_wrap{
    width: 466px;
}
.inquiry_page .inquiry_area .note {
    display: inline-block;
    font-size: 13px;
    color: #999;
    margin-left: 25px;
}