::placeholder
가상 요소 ::placeholder를 사용하여 input과 textarea 태그의 placeholder에 스타일을 적용할 수 있습니다(간단 주의).
방법은 모두 동일하니 input 태그를 예시로 살펴보겠습니다.
input 태그가 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
.email-input {
}
</style>
</head>
<body>
<input class="email-input" type="email" name="email" placeholder="이메일을 입력하세요" />
</body>
</html>
email-input 클래스의 ::placeholder 요소를 설정합니다.
<!DOCTYPE html>
<html>
<head>
<style>
.email-input {
}
.email-input::placeholder {
color: peru;
font-weight: 600;
font-style: italic;
}
</style>
</head>
<body>
<input class="email-input" type="email" name="email" placeholder="이메일을 입력하세요" />
</body>
</html>
감사합니다.
'프론트엔드 HTML CSS JAVASCRIPT' 카테고리의 다른 글
| [HTML, JAVASCRIPT] 웹 게임 만들기 포트리스 (1) - 탱크, 표적 (0) | 2019.10.28 |
|---|---|
| [HTML, JAVASCRIPT] 뒤로가기(이전 페이지), 앞으로가기(다음 페이지) 구현 - window.history.back(), forward(), go() (0) | 2019.08.29 |
| [HTML, CSS] 아이콘 추가하는 방법 - fontawesome 사용법 (0) | 2019.08.22 |
| [HTML, CSS] 스크롤바 스타일(디자인)하는 방법 - webkit-scrollbar (11) | 2019.08.20 |
| [HTML, CSS] 내용이 요소(div 등)를 벗어날 때 스크롤 적용하는 방법 - overflow (3) | 2019.08.18 |
