[웹 UI 개발] 폼 - 1 / 폼 커스텀 (텍스트 박스)
텍스트 박스와 텍스트 박스 내부의 placeholder를 커스텀하는 방법에 대해 알아본다.
커스텀된 텍스트 박스와 placeholder는 아래 링크에서 예시를 확인할 수 있다.
- 네이버 메인화면(네이버 검색창)
- 네이버 로그인 화면
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>플레이스홀더</title>
<link rel="stylesheet" href="css/reset.css">
<style>
.text_form {
width: 198px;
margin-top: 20px;
padding: 8px;
border: 1px solid #ddd;
}
.text_form input {
height: 20px;
line-height: 20px;
padding: 0;
border: 0 none;
font-size: 15px;
}
/*chrome, opera, safari*/
.text_form input[type=text]::-webkit-input-placeholder {
color: red;
}
/*firefox 19+*/
.text_form input[type=text]::-moz-placeholder {
color: red;
}
/*IE 10+*/
.text_form input[type=text]:-ms-input-placeholder {
color: red;
}
/*firfox 18-*/
.text_form input[type=text]:-moz-placeholder {
color: red;
}
/*chrome, opera, safari*/
.text_form input[type=password]::-webkit-input-placeholder {
color: blue;
}
/*firefox 19+*/
.text_form input[type=password]::-moz-placeholder {
color: blue;
}
/*IE 10+*/
.text_form input[type=password]:-ms-input-placeholder {
color: blue;
}
/*firfox 18-*/
.text_form input[type=password]:-moz-placeholder {
color: blue;
}
.textarea {
width: 300px;
height: 150px;
margin-top: 20px;
padding: 8px;
border: 1px solid #ddd;
}
.textarea textarea {
width: 100%;
height: 100%;
border: 0 none;
padding: 0;
font-size: 15px;
resize: none;
}
/*chrome, opera, safari*/
.textarea textarea::-webkit-input-placeholder {
color: green;
}
/*firefox 19+*/
.textarea textarea::-moz-placeholder {
color: green;
}
/*IE 10+*/
.textarea textarea:-ms-input-placeholder {
color: green;
}
/*firfox 18-*/
.textarea textarea:-moz-placeholder {
color: green;
}
</style>
</head>
<body>
<div class="text_form">
<input type="text" name="" value="" placeholder="이름을 입력해주세요.">
</div>
<div class="text_form">
<input type="password" name="" value="" placeholder="암호를 입력해주세요.">
</div>
<div class="textarea">
<textarea name="name" rows="8" cols="80" placeholder="내용을 입력해주세요."></textarea>
</div>
</body>
</html>
input 태그를 감싸는 div를 생성해서 input 폼 요소를 커스텀했다.
커스텀하기 전에 input 요소를 css 리셋 시키고 input을 감싸고 있는 text_form을 원하는 디자인에 맞게 수정한다.
textarea도 마찬가지로 커스텀할 수 있다.
placeholder의 색을 변경시킬 때는 ::-webkit-input-placeholder, ::-moz-placeholder, :-ms-input-placeholder, ::-moz-placeholder를 사용한다.
::-webkit-input-placeholder는 크롬, 오페라, 사파리에서 placeholder의 색상을 변경할 수 있다.
::-moz-placeholder는 파이어폭스 19이상에서 placeholder의 색상을 변경할 수 있다.
:-ms-input-placeholder는 IE 10이상에서 placeholder의 색상을 변경할 수 있다.
::-moz-placeholder는 파이어폭스 18이하에서 placeholder의 색상을 변경할 수 있다.
가상 선택자들 앞에 -webkit-, -moz-, -ms- 등의 내용이 붙는 것을 볼 수 있다. 이는 브라우저를 만드는 각 제조사에서 브라우저를 만들 때 사용했던 엔진에서 placeholder를 바꾸는 방식을 결정하고 적용했는데 이 내용들이 아직 공통표준화되지 않았기 때문에 각 제조사별 브라우저에서 인식할 수 있도록 붙이는 프리픽스이다.
css를 작성하다보면 이런 프리픽스들을 붙어야 하는 경우가 많은데, 이런 코드들은 모두 아직 표준화가 되지 않은 비표준 속성이라고 생각하면 된다.
이런 비표준 속성을 사용할 때 주의할 점이 같은 스타일을 선택자를 연속으로 사용해서 표현하는 것이다.
.text_form input[type=text]::-webkit-input-placeholder,
.text_form input[type=text]::-moz-placeholder {
color: red;
}이런식으로 표현하게 되면 어떤 브라우저의 엔진이 css를 읽을 때 그 엔진에서 이해할 수 없는 선택자나 문자가 들어가는 경우 그 선택자 자체를 무시해버리기 때문에 적용될 스타일도 적용되지 않을 수 있기 때문에 위험하다.
그러므로 비표준 코드를 작성할 때는 꼭 따로 사용하도록 하자.
부스트 코스의 강의 내용을 정리한 포스트입니다.
https://www.boostcourse.org/web344
웹 UI 개발
부스트코스 무료 강의
www.boostcourse.org
'공부 > 웹 UI 개발' 카테고리의 다른 글
| [웹 UI 개발] 폼 - 3 / 폼 커스텀 (파일 찾기 버튼) (0) | 2023.03.29 |
|---|---|
| [웹 UI 개발] 폼 - 2 / 폼 커스텀 (체크 박스, 라디오 버튼) (0) | 2023.03.27 |
| [웹 UI 개발] 폼 - 0 (0) | 2023.03.27 |
| [웹 UI 개발] 팝업 - 2 / 레이어 팝업 중앙 정렬 (0) | 2023.03.27 |
| [웹 UI 개발] 팝업 -1 / 레이어 팝업 + 딤드 배경 제작 (0) | 2023.03.27 |
