안녕하세요
(주)맑은커뮤니케이션에 근무하는 유아영입니다.
오늘은 placeholder에 대해 알아보려고 하는데요,
HTML5의 placeholder 속성은 input 요소와 textarea 요소에 알맞은 힌트를 제공하는 목적으로 사용됩니다.
이러한 힌트는 사용자가 입력상자에 데이터를 입력하는데 도움을 줍니다.
사용 방법은 <input type="text" placeholder="내용을 입력하세요."> 이렇게 써줄 수가 있는데요.
|
IE |
chrome |
Firefox |
safari |
|
10+ -ms |
47+ |
4+ -moz-, 51+ |
9+ |
하지만, IE 6~9 사이의 브라우저는 HTML5의 placeholder 속성을 지원하지 않습니다.
해결 방법을 알아볼까요?
1. https://github.com/mathiasbynens/jquery-placeholder
위의 url에서 스크립트를 다운받는다.
placeholder.js 를 사용하면 IE9 이하는 .placeholder 이라는 클래스가 자동으로 생성된다.
2. <script type="text/javascript" src="js/jquery.placeholder.js"></script>
코드를 추가한다.
3. js파일에 $('input, textarea').placeholder();
코드를 추가한다.
4. css.파일에 .placeholder 클래스를 이용해 속성을 주면 끝납니다.
위의 내용을 예제를 통해 한 번 살펴볼까요?
See the Pen dwBoOj by ahyoung (@ahyoung) on CodePen.
::placeholder 선택자로 선택하여 스타일을 줄 수 있습니다.
input::placeholder : Chrome, Firefox, Opera, Safari 최신 버전에서는 적용이 잘 됩니다.
하지만 Chrome, Firefox, Opera, Safari의 구버전과 IE에서는 적용되지 않습니다.
그 해결 방법은 아래와 같습니다.
input::-webkit-input-placeholder : Chrome
input:-ms-input-placeholder : IE
input:-mos-input-placeholder : Firefox
텍스트로만 보면 이해가 안 될 수 있는데요
예제를 통해 같이 한 번 알아볼까요?
See the Pen gZJYGb by ahyoung (@ahyoung) on CodePen.
Tip) 다 적용해도 파이어폭스에서 이상하게 뿌옇게 보이는 현상을 보실 수가 있는데요,
그럴 때는 input::placeholder { opacity: 1 } 을 넣어주면 해결이 됩니다.
placeholder를 사용하다 보면 줄바꿈을 하고싶어질 때가 있을텐데요
그 방법에 대해 알아볼까요?
See the Pen maZbdQ by ahyoung (@ahyoung) on CodePen.
설명
: 줄바꿈을 하고 싶은 곳에 해당 코드를 추가해줍니다.
오늘은 placeholder에 대해 알아보았는데요
부족한 점이나 잘못된 점이 있으면 댓글 부탁드립니다!
감사합니다.
'javascript' 카테고리의 다른 글
| [임시, 비공개] Swiper 수정 예정 글 (0) | 2021.06.17 |
|---|---|
| 반응형 슬라이더 Swiper (사용 방법/예제) 웹퍼블리싱 (0) | 2020.02.17 |
| jQuery란 무엇인가? jQuery 메서드 정리표 2편 (0) | 2018.11.13 |
| jQuery란 무엇인가? jQuery 메서드 정리표 1편 (0) | 2018.10.15 |
| 웹퍼블리싱을 위한 JQUERY Plugin (0) | 2012.05.25 |