간단한 예시를 통해 placeholder의 설정방법에 대해 알아보자.
<!DOCTYPE html>
<html>
<head>
<title>placeholder 예시</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic">
<style>
input[type=text]{
width: 400px;
height: 20px;
}
</style>
</head>
<body>
<div class="cnt">
<form id="form">
<input type="text" class="ex1" placeholder="안녕하세요. 테스트입니다. 전 ex1이에요"><br>
<input type="text" class="ex2" placeholder="안녕하세요. 테스트입니다. 전 ex2이에요"><br>
<input type="text" class="ex3" placeholder="안녕하세요. 테스트입니다. 전 ex3이에요"><br>
</form>
</div>
</body>
</html>
css 부분에 placeholder를 추가해보자. (편의상 chrome과 ie브라우저만 사용함)
.ex1::-webkit-input-placeholder { /* chrome 브라우저 placeholder */
font-weight: 600;
color: red;
}
.ex2:-ms-input-placeholder { /* ie 브라우저 placeholder */
font-weight: 700;
color: #e8e8e8;
font-size: 15px;
}
chrome 브라우저에서 정상 작동된다.
