●input 태그
-text
-password
-date
- color
-checkbox : 체크박스는 중복으로 체크를 할 수 있다.
-radio : 중복없이 선택함
-button
●placeholder: 박스 안에 텍스트 넣기
-테두리 만들기
border:0; 하면 input이 가지고 있는 테두리가 사라짐
하지만 input을 클릭하면 테두리가 나타남
●outline: none 으로 클릭하면 나타나는 테두리 없애주기
-button 수정해주기
검색창과 검색버튼 위치 시켜주기
float: left / right 해주고 clearfix 해주는 대신 div에 overflow:hidden 해준다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>검색창 만들기</title>
<style>
/* 테두리 만들기 */
div{
height: 40px;
width: 400px;
border: 1px solid #1b5ac2;
/* float 띄워줬기때문에 clearfix 대신 넣어줌 */
overflow: hidden;
}
input{
font-size: 16px;
width: 325px;
padding: 10px;
/* input이 가지고 있는 테두리가 사라짐 */
border: 0;
/* 클릭하면 나타나는 테두리 없애주기 */
outline: none;
/* 검색창 왼쪽 위치 */
float: left;
}
button{
width: 50px;
height: 100%;
border: 0;
background-color: #1b5ac2;
color: #fff;
font-size: 16px;
font-weight: bold;
/* 검색창 오른쪽 오른쪽 */
float: right;
}
</style>
</head>
<body>
<div>
<input type="text" placeholder="검색어를 입력하세요.">
<button>검색</button>
</div>
</body>
</html>[span으로 골격만들어서 검색창만들기]
type, class, name 을 지정해 준다.
-span 편집 : span 은 인라인구조이기 때문에 너비값이 안먹어서 인라인구조로 변경했다.
-input 편집
-button 편집
-마우스 오버시 색상 변경
- input에 검색시에 이벤트 발생시키기
● onkeydown= "enterSearch()"
키보드를 온해서 다운시켰을 때 entersearch 함수를 실행하라
>> onkeydown: 키보드 누르면 이벤트 발생
script 넣어준다.
function enterSearch()
(input에 아이디와 클래스를 동시에 줄 수 있다.)
● = : 대입
● == : 비교 (같은지 다른지 비교)
● ===: 타입까지 비교(숫자인지 문자인지)
getElementById: 선택자 id만 불러오는 전용 명령어
let 을 변한 값.(매번 값이 다르기 때문에 let 사용)
아이디 text를 호출하지만, .value 값을 x에 넣겠다.
윈도우 로컬에 주소로 뿌려준다.
+ x
x 값: 검색어
+: 추가
검색창에 나무라고 치면 복사한 나무 검색창이 나오게 된다.
<html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>검색창_2</title>
<style>
.green_window{
display: inline-block;
width: 366px;
height: 34px;
border: 3px solid #200400;
background-color: #fff;
}
.input_text{
/* width: 100%;
height: 100%; */
width: 348px;
height: 21px;
margin: 6px 0 0 9px;
border: 0;
outline: none;
font-size: 16px;
}
.sch_smit{
width: 54px;
height: 40px;
margin: 0;
border: 0;
background-color: #200400;
color: white;
font-weight: bold;
border-radius: 5px;
cursor: pointer;
}
.sch_smit:hover{
background-color: #4e0f06;
}
</style>
</head>
<body>
<span class="green_window">
<input id="text" type="text" class="input_text" name="search" placeholder="검색어 입력" onkeydown="enterSearch()">
</span>
<input type="button" value="검색" class="sch_smit" onclick="myFunction()">
<script>
function enterSearch(){
if(event.keyCode == 13){
// 만약 이벤트를 발생했을 때 키코드가 나온다. → 13(enter)과 같으면 myFunction을 실행시켜라
myFunction();
}
function myFunction(){
let x = document.getElementById("text").value;
// 함수 지정을 하는데 아이디(text)만 불러오겠다.(text의 밸류값)
window.location.href = "https://search.naver.com/search.naver?where=nexearch&sm=top_sug.pre&fbm=0&acr=1&acq=%EB%82%98%EB%AC%B4&qdt=0&ie=utf8&query=" + x;
// window에 주소를 뿌려준다.
}
}
</script>
</body>
</html>'☭DEVELOPER > #2 웹개발(자바기반 풀스택)' 카테고리의 다른 글
| [JAVASCRIPT]2. 자바스크립트로 스타일 제어하기 (0) | 2023.06.20 |
|---|---|
| 비주얼 스튜디오 코드 40_ 웹표준) 네비게이션 / 배너 (0) | 2023.06.20 |
| [JAVASCRIPT] 1. 기초 (0) | 2023.06.19 |
| 비주얼 스튜디오 코드 38_ 웹표준) menu (0) | 2023.06.19 |
| 비주얼 스튜디오 코드_37 Fade In & Fade Out (0) | 2023.06.16 |