시작페이지로 즐겨찾기추가
로그인
회원가입 l 출석체크 l 마이페이지 l CGIMALL
happycgi
자료실 사이트등록 랭킹100 프로그램리뷰 관리자추천자료 초보가이드
커뮤니티
전체 펼쳐보기
퀵메뉴링크
jquery , CSS , PHP , Javascript , 무료폰트 , ASP
상세검색
 > HTML > 유용한 CSS > Placeholder 상세정보
사이트등록
현재접속자 새로고침
Placeholder
소스통계정보 오류신고 및 문의
해피팀
네티즌
트위터로 보내기 페이스북으로 보내기 싸이월드 공감
소스분류 유용한 CSS
다운로드 횟수 0 회
간단설명 html 버전이 올라가면서 이번에 새롭게 생긴 속성중 palceholder가 있습니다. 이 태그의 역활은 인풋박스에 광고문구나 특정키워드 또는 해당 입력란의 역활을 입력할 수 있습니다 간단한 입력만으로도 사용할수 있는 plcaeholder를 확인해보세요
평가하기 훌륭함 매우좋음 좋음 괜찮음 보통 별로
홈페이지바로가기 데모 미리보기 스크랩하기

HTML5로 들어오면서 새롭게 생겨난 속성입니다.
기존에 인풋박스에 placeholder와 같은 속성을 이용하려면 자바스립트나, jquery를 이용하여
이미지 또는 텍스를 이용하여 복잡하게 설정해야만 했지만.

placeholder는 간단히 태그입력후 alt나 title속성입력하는것과 같이 원하는 문구를 적어주면 됩니다.




위와같이 사용할수도 있으며 인풋태그에 간단히 설명을 입력할 수 도 있습니다.






사용방법은

<input type="" placeholder="원하는 문구를 입력하세요">

예시

<inpunt placeholder="싱싱한 제주도갈치 Kg당 10000원">
<inpunt placeholder="이름을 입력해주세요">
<inpunt placeholder="비밀번호 재확인">


 html5로 업그레이드되면서 새롭게 생긴속성이라서 구버전 익스플로러에서는 사용이 되지 않습니다.
ie의 같은경우는 10버전에서 일부의 html5를 지원하기때문에 9이하로는 무용지물이 됩니다.

아래의 링크를 통해서 개발자가 만들어둔 jquery소스를 이용해 placeholder를 ie9이하에도 사용할 수 있습니다.


예시확인

https://mathiasbynens.be/demo/placeholder


아래의 링크를 통해서 다운받으실 수 있습니다.

https://github.com/mathiasbynens/jquery-placeholder

바로받기

https://github.com/mathiasbynens/jquery-placeholder/archive/master.zip



파일을 다운받으신다음 사용해야할 파일은 jquery.placeholder.js 파일이며 js파일을 호출한뒤
사용할수 있도록 스크립트를 설정해주면 완료가 됩니다.

예제

<head>
<script type="text/javascript" src="주소/jquery.placeholder.js"></script>
 <script>
 $('input, textarea').placeholder();
</script>
</head>

유용한 plcaeholder를 이용하여 사이트제작에 조그마한 도움이라도 되셧으면 합니다 ^^





 


네티즌 의견   이용하신 자료의 후기를 자유롭게 작성하세요. (상업적인 광고 및 도배성 글 등은 사전통보없이 삭제될 수 있습니다.)
내용 아이디 의견남기기
등록된 의견이 없습니다.
1
이름
내용
:네맞아요: :화나는군요: :잠와: :우울해: :이건아냐: :왕하하: 왕웃음~ 놀램~
도배방지키
 54453474 보이는 도배방지키를 입력하세요.