• 이용 문의
  • 회원가입
  • 로그인

[etc] HTML - placehoder (플레이스홀더속성)

placeholder 글자색 


<style>
input:-ms-input-placeholder { color: red; } // IE 10 이상 
input::-webkit-input-placeholder { color: red; } //  Webkit, Blink, Edge
input::-moz-placeholder { color: red; } // Mozilla Firefox 4 부터 18
input::-moz-placeholder { color: red; } // Mozilla Firefox 19 이상
</style>

<input type="text" placeholder="입력 예제" />

결과보기

 

 

IE9 이하 브라우저 호환

 

방법1 - jquery 이용

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


장점: 호환 완벽
단점: 코드 몇 줄이 더 들어감.


 

방법2 - js 이용

http://jamesallardice.github.io/Placeholders.js/


장점: 간편. 자동으로 붙는 placeholder 클래스 이용해 색상 지정 가능.
단점: IE 7~9 경우, 새로고침 시 가끔 placeholder 사라짐.

 

.placeholder {color:red;}

:-ms-input-placeholder {color:red;} /* MS */

::-webkit-input-placeholder {color:red;} /* webkit */

::-moz-placeholder{color:red;} /* firefox */

 

 

 

방법 1 - jQeury 방법 ★

 

1.

jquery 파일 다운로드

 

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

 

 

2.

아래 구조가 되게 업로드 (G5 경우)

 

/js/jquery.placeholder.min.js

 

 

3.

head 태그 안에 아래 코드 추가 (G5 경우)

 

<script src="<?php echo G5_JS_URL?>/jquery.placeholder.js"></script>
<script>

$(document).ready(function(){

    $('input, textarea').placeholder();

}); 

</script>

 

 

 

 

방법2 - JS 방법

 

1

Placeholders.js 파일 다운로드 (좌측 파란색 버튼 클릭)

 

http://jamesallardice.github.io/Placeholders.js/

 

 

2.

script 코드를 아래 경로에 업로드 (G5 경우)

 

/js/placeholders.min.js

 


3.
head 태그 안에 아래 코드 추가 (G5 경우)

 

<script src="<?php echo G5_JS_URL?>/placeholders.min.js"></script>

 

 

참고 : shoo7830 님 블로그


즐겨찾기 (= 북마크) : Ctrl + D

이름
비밀번호
자동등록방지
Hz패밀리 가입선물 이벤트 종료
분류 제목
intro HTML - 발전사 (HTML 4.01 → XHTML → HTML5.0)
intro HTML - 태그 기본 문법 ★
basic HTML - <!DOCTYPE> ★★ - 문서타입 (= 독타입태그)
basic HTML - <html> ★ - HTML문서 (= 에이치티엠엘태그)
basic HTML - <body> ★ - 문서영역 (= 본문영역 = 바디태그)
font HTML - <h1> ~ <h6> ★ (에이치태그) - 문단제목 글씨크기
basic HTML - <p> ★ (= 피태그 = 피요소) - 글단락 (= 글문단)
basic HTML - <br> ★ (비알태그) - 줄바꿈 (=한줄아래로)
basic HTML - <hr> (에이치알태그) - 주제 다른 문단 구분 수평선(=가로선) - (HTML5 일부 속성…
basic HTML - <!--주석 내용--> ★ (주석태그) - 주석 처리
intro HTML - IE조건부주석 ★ (= 익스주석태그 = 익스플로러 조건문)
formatting HTML - <acronym> (애크로님태그) - 두문자어 : STF (IE6 이상) - (HTML5 지원 …
formatting HTML - <abbr> (어브르태그,어브리비에이션태그) - 축약어 : STF (IE7 이상)
formatting HTML - <address> (어드레스태그) - 문서 작성자나 소유자의 연락처
font HTML - <b> ★ (비태그, 볼드태그) - 굵은글씨 (= 폰트굵기) (일반)
formatting HTML - <bdo> (브도태그) - 텍스트 출력 방향
font HTML - <big> (빅태그) - 큰글씨 (= 큰글자 = 글자 크게) - (HTML5 지원 X)
formatting HTML - <blockquote> ★ (블락쿼트, 블럭쿼트) - 긴 인용구
formatting HTML - <center> ★ (센터태그) - 중앙정렬 - (HTML5 지원X)
formatting HTML - <cite> (사이트태그, 싸이트태그) - 인용구 제목 (저작물 제목)
목록

방문자 수

오늘 527
어제 573
최대 728
전체 503,391
Since 2012