[HTML,CSS기초]12-2.네이버검색창 만들기
결과물
설명
<input type="text">
태그에 검색기능을 추가할라면 <form action="">
태그를 이용해야한다. action에다가 검색링크를 써넣으면 해당 검색링크로 입력한 내용이 보내진다.
예를들면
<form action="https://www.google.com/search" method="GET">
<input name="q" type="text">
</form>
이렇게 작성하면 input에다가 입력한 내용이 구글로 검색이 되는데 input의 name은 서버로 전달되는 이름으로 구글검색링크를 이용할 경우 'q'를 써야하고 네이버는 "query"를 사용한다.
주요 코드
<form action="https://search.naver.com/search.naver" method="GET">
<div class="input-group">
<span class="input-text">NAVER</span>
<input name="query" type="text" class="input" placeholder="검색어를 입력하세요." >
<input type="button" value="검색" class="button">
</div>
</form>
//css
.input-text{
font-size: 1rem;
font-weight: 400;
text-align: center;
padding: 7px;
background-color:rgb(84, 223, 75);
position:relative;
top: 3px;
left:6px;
}
.input-group{
position:relative;
width:350px;
margin: auto;
line-height:200px;
}
.input{
width:200px;
height:30px;
border: 2px solid rgb(78, 227, 119);
}
.button{
height:36px;
background-color:rgb(64, 219, 52);
position:relative;
left:-7px;
top:1.5px;
}
<input type="text">
태그에 검색기능을 추가할라면 <form action="">
태그를 이용해야한다. action에다가 검색링크를 써넣으면 해당 검색링크로 입력한 내용이 보내진다. <form action="https://www.google.com/search" method="GET">
<input name="q" type="text">
</form>
<form action="https://search.naver.com/search.naver" method="GET">
<div class="input-group">
<span class="input-text">NAVER</span>
<input name="query" type="text" class="input" placeholder="검색어를 입력하세요." >
<input type="button" value="검색" class="button">
</div>
</form>
//css
.input-text{
font-size: 1rem;
font-weight: 400;
text-align: center;
padding: 7px;
background-color:rgb(84, 223, 75);
position:relative;
top: 3px;
left:6px;
}
.input-group{
position:relative;
width:350px;
margin: auto;
line-height:200px;
}
.input{
width:200px;
height:30px;
border: 2px solid rgb(78, 227, 119);
}
.button{
height:36px;
background-color:rgb(64, 219, 52);
position:relative;
left:-7px;
top:1.5px;
}
: 초록색배경의 NAVER는<span>
태그의 input-text클래스로 <input>
태그 부분과의 크기랑 위치를 맞추기 위해 css코드 작성
<input>
태그의 placeholder는 처음에 입력부분에 보여지는 글씨로 입력부분을 누루면 글씨가 사라진다. 보통 입력해야할 내용에 대해 설명하는 글이 들어간다.
Author And Source
이 문제에 관하여([HTML,CSS기초]12-2.네이버검색창 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@sue06004/HTMLCSS기초12-2.네이버검색창-만들기저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)