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

[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

토트넘 vs 리버풀 축구 시작
분류 제목
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> (사이트태그, 싸이트태그) - 인용구 제목 (저작물 제목)
formatting HTML - <code> (코드태그) - 컴퓨터 소스 코드 출력
formatting HTML - <del> (딜테그, 델태그, 삭제태그) - 텍스트 삭제 표시
formatting HTML - <dfn> (디에프엔태그, 드른태그, 데피니션태그, 정의태그) - 정의 용어 (= 용어 정의)
font HTML - <em> (엠태그, 엠퍼시스태그, 강조태그) - 의미 강조할 텍스트 굵게
font HTML - <font> ★ (폰트태그) - 텍스트의 폰트 크기 색깔 - (HTML5 지원X)
font HTML - <i> (아이태그, 이탤릭태그) - 이탤릭체 (기울어진 글씨체 = 글씨 기울어지게)
formatting HTML - <ins> (인스태그, 인서트태그, 인써트태그, 삽입태그) - 텍스트 삽입 표시
formatting HTML - <kbd> (케이비디태그, 크브드태그, 키보드태그) - 키보드 입력키
formatting HTML - <pre> (피리태그, 피리저브태그, 보존태그) - 공백 줄바꿈 보존
formatting HTML - <q> (큐태그, 쿼테이션태그, 짧은인용태그) - 짧은 인용구
목록

방문자 수

오늘 102
어제 566
최대 624
전체 454,483
Since 2012