HTML 검색창 기본 내용 - placeholder 속성 사용 방법. input의 내용 미리 넣기
페이지 정보
조회 819회 작성일 22-05-06 01:32
본문
검색창 기본 내용
placeholder 속성 사용 방법
검색을 하기 전에 검색창에 안내가 입력되어 있도록 하고 싶을 때는 placeholder를 쓰면 된다.
이처럼 검색창의 기본 입력 내용을 조정할 수 있는 방법을 설명하려고 한다.
검색창 기본 내용 - placeholder 속성 사용 방법. input의 내용 미리 넣기
검색창에 인풋 안내 넣기
사용자가 검색을 하기 전에 검색창에 미리 "2글자 이상 입력하세요" 같은 안내 문구를 넣는 방법은 placeholder를 사용하는 것이다.
보통 검색창 태그는 form 양식을 쓰는데, 그 내부에 있는 input의 속성값을 정하면 된다.
먼저 head 파일이나 search 파일을 열어서 <form>의 <input>을 찾는다.
보통 검색에 사용되는 input 태그는 아래처럼 되어 있을 것이다.
[code]
<form name="폼이름" action="경로/search.php">
<input type="search" name="인풋 이름" id="인풋 아이디">
<button type="submit" id="버튼 아이디">
</form>
[/code]
여기서 input 부분에 placeholder을 추가하면 된다. 아래에 예가 있다.
[code]
<input type="search" name="인풋 이름" id="인풋 아이디" placeholder="2글자 이상 입력하세요">
[/code]
이렇게 하면, 검색을 하는 조건이 검색창에 미리 적혀 있기 때문에 사용자가 검색창을 이용하기에 편하게 된다.
paceholder 사용 방법 이해
placeholder 속성은 input 요소와 textarea 요소에 힌트나 안내를 제공하는 것을 목적으로 하는 속성이다.
즉, 게시판에서 글 입력 전에 나타나는 안내 문구도 역시 placeholder를 사용한다는 말이다.
만약, 여러 줄의 내용을 넣고 싶다면 를 추가해 준다. 아래에 예가 있다.
[code]
<input type="textarea" placeholder="2글자 이상 입력하세요. 필수 사항입니다.">
[/code]
만약, 글자가 흐리게 보이게 하고 싶다면 opacity를 추가해 준다.
단, 스타일 CSS파일에서 해 주는 것이 좋다. 아래에 예가 있다.
[code]
<style type="text/css">
input::placeholder { opacity: 숫자; color: #글자색; }
</style>
[/code]
숫자 부분이 얼마나 짙은가를 결정하는데, 기본은 1이다. 흐리게 하고 싶다면 0.7처럼 바꾸면 된다.
그런데 문제는 구버전의 브라우저에는 지원하지 않는다는 것이다.
이때도 역시 스타일 CSS파일에서 컨트롤이 필요하다. 아래에 예가 있다. [저작권법 표시] 원본 출처 : 키스세븐(www.kiss7.kr)
[code]
<style type="text/css">
input::-webkit-input-placeholder : Chrome
input:-ms-input-placeholder : IE
input:-mos-input-placeholder : Firefox
</style>
[/code]
위 placeholder 속성의 스타일은 크롬, 익스플로러, 파이어폭스 구 버전에서도 사용할 수 있도록 하는 것이다.