[HTML/CSS]Input

박민하·2022년 5월 24일
0

HTML/CSS

목록 보기
2/7
post-thumbnail

1. <input type="" placeholder="">

  • type="text" text 입력 속성. 문자, 숫자, 기호 등 어느 텍스트나 입력 가능하다.
  • type="password" 입력하면 까만 원으로 나온다(입력 내용 보안).
  • type="number" 숫자만 입력할 수 있다.
  • placeholder input 안의 도움말로, 실제 입력되어있는 텍스트는 아니다.

2. <textarea></textarea>

  • <input> 보다 긴 텍스트를 입력받을 때 사용한다.

3. placeholder, type 스타일 적용 방법

placeholder는 input의 속성(attribute)이다. 속성에 따로 스타일 적용이 가능할까?

input::placeholder {}

콜론 두개를 붙이면 선택자(selector)를 만들 수 있다.
그럼 type 속성은 어떨까?

input[type=""] {}

대괄호를 이용하면 된다.
위 두 경우를 동시에 사용할 수도 있다. 타입이 "" 인 placeholder의 스타일을 적용해보자.

input[type=""]::placeholder {}

profile
backend developer 🐌

0개의 댓글