HTML input text 크기 조절에 도움되는 예제

by

HTML input text 크기 조절

HTML <input type ="text"> 크기 조절 방법은 CSS 삽입 위치와 동일합니다. 먼저 <input> 태그에 style 속성을 사용합니다. 또는 <head> 태그 밑에 <style> 태그를 삽입하여 CSS 선택자로 조절합니다.

인라인 스타일 <input type=”text”> 크기 조절

style 속성과 뒤에 속성값으로 원하는 CSS 요소를 나열하면 됩니다.

  • width : 300px 가로 길이
  • height : 200px 세로 길이
  • font-size : 30px 글씨 크기
<input type="text" placeholder="입력하세요!" style="width:300px;height:200px;font-size:30px;">

CSS 선택자 <input type=”text”> 크기 조절

<input> 태그 선택자 지정

또는 간편하게 <style> 태그에서 <input> 태그를 태그 선택자로 지정해서 디자인 할 수 있습니다.

input {
  width:200px;
  height:100px;
  font-size:20px;
}

<input> 태그에 id 선택자 지정

하지만 <input> 태그가 많을 경우 보통은 class 나 id 선택자를 지정해서 사용합니다.

id값이 apple인 경우 CSS 및 예제는 아래와 같습니다.

#apple {
  width:200px;
  height:100px;
  font-size:20px;
}

id 값을 다르게 지정하면, <input> 태그 별로 크기를 다르게 조절할 수 있습니다.