value : 기본값
placeholder : 안내 문구
placeholder로 지정하면 화면상에는 뜨지만 submit을 해도 데이터가 넘어가지 않음.
input type="number" 와 같은 숫자만 입력 가능한 박스에도 문자열로 안내 가능.
<input type="number" placeholder="Custom"> //Custom
<input type="number" value="Custom"> //아무것도 출력되지 않음
경우에 따라 placeholder보다 lable을 이용해 안내 문구 만들기를 권장하는 경우 있음.
2018년 글로 조금 오래되었지만 여전히 참고할 만한 부분이 있어 아래 블로그를 읽어보면 좋을 듯.
블로그 주소: https://ibrahimovic.tistory.com/30
Placeholder를 사용하지 마세요.
이 글은 Don’t Use The Placeholder Attribute 를 번역, 핵심 내용만 짧게 요약한 글입니다.자세한 부가 내용을 알고 싶으신 분들은 원문을 읽어보시길 추천드립니다. 들어가면서 : placeholder 속성은 많은
ibrahimovic.tistory.com
CSS도 어느정도 적용시킬 수 있으나 브라우저와 버전에 따라 상이한 부분이 많음.
아래도 참고할 만한 블로그.
블로그 주소: https://wallel.com/placeholder%EC%97%90-css%EC%A0%81%EC%9A%A9%EC%8B%9C%EB%8A%94-%EB%B0%A9%EB%B2%95/
placeholder에 CSS적용시는 방법 - Wallel
placehoder에 아주 간단하게 CSS를 적용시킬 수 있다. input::-webkit-input-placeholder { font-size: 90%; } input::-moz-placeholder { font-size: 90%; } input:-ms-input-placeholder { font-size: 90%; } input:-moz-placeholder { font-size: 90%; } in
wallel.com
블로그 주소: http://blog.hivelab.co.kr/placeholder%EC%97%90-css%EC%A0%81%EC%9A%A9%ED%95%98%EA%B8%B0/
placeholder에 CSS적용하기
placeholder에 CSS적용하기 안녕하세요. 하이브랩 웹표준개발1팀 홍나영입니다. 입력폼의 안내문구 작업 중, placeholder 속성을 사용하며 다양한 style을 입혀보았습니다. 어떤 style 적용이 가능할까요?
blog.hivelab.co.kr
'SW공부 > HTML&CSS' 카테고리의 다른 글
| [CSS] :focus 적용시 테두리 검은 선 문제 (0) | 2023.02.06 |
|---|---|
| [CSS] input type="number"에서 위아래 화살표 지우는 방법 (0) | 2023.02.05 |
| [CSS] 그림자 넣기 : box-shadow (0) | 2023.01.15 |
| [CSS] 그라데이션 넣기 : linear-gradient (0) | 2023.01.15 |
| [CSS] 요소 배치, 겹치기 : position (0) | 2023.01.15 |