CSS - input

zhflsdl보보·2022년 10월 18일
0
post-custom-banner
  • type="text"
    text를 입력하는 속성. 대부분의 input type은 text이다.
    이름, id, 주소, 닉네임 등을 입력 받을 때 사용한다.

  • type="password"
    text와 비슷한 속성인데, 뭔가를 입력하면 까만 원으로 나온다. 만약 화면을 공유하고 있다면, 남이 보지 않도록 처리한 것이다. 화면에서는 안 보여도 JavaScript 쪽에서 무슨 값을 입력했는지 가져올 수 있다.

  • type="number"
    숫자만 입력할 수 있다. 만약 type="number" 으로 핸드폰 번호를 받으려면 "-"는 입력할 수 없다.

  • placeholder
    placeholder는 도움말을 넣어주는 부분이다.
    실제 input에 입력되어있는 텍스트가 아니다.
    <textarea><input> 보다는 더 긴 텍스트를 입력받고 싶을 때 사용한다.
    보통 짧은 방명록이나 댓글을 입력할 때 <textarea> 태그를 사용.

:: 참고
<textarea> 에 소개: 라고 보이는 것은 placeholder 가 아니라 텍스트이다.
<input> 은 시작태그, 끝태그로 구성되지 않는다. 하나의 태그가 하나의 요소.
<textarea> 처럼 <input> 에도 미리 값을 세팅 해놓고 싶을 때는 value 라는 attribute를 사용한다.

placeholder 를 css로 바꾸고 싶을 때

placeholder는 attribute이다.
selector에 표현할 때는 ::를 사용한다.

input::placeholder {
	color: #bbb;
}

만약, text type인 input의 placeholder에 스타일을 입히려면

input[type="text"]::placeholder {
	color: #bbb;
}

다양한 CSS selector

cursor property

버튼에 마우스를 올렸을 때 cursor를 손가락 모양으로 바뀌게 하자

button:hover {
  cursor: pointer;
}

다양한 cursor property

profile
매일매일 성장하는 개발자
post-custom-banner

0개의 댓글