구글 검색창을 따라해보려고 한다. 먼저 소스 코드이다.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<title>Gukgle</title>
<style>
h1 {
text-align: center;
margin-top: 230px;
font-size: 90px;
}
h1 span:nth-child(1) {
color:#4285f4;
}
h1 span:nth-child(2) {
color:#ea4335;
}
h1 span:nth-child(3) {
color:#fbbc05;
}
h1 span:nth-child(4) {
color:#4285f4;
}
h1 span:nth-child(5) {
color:#34a853;
}
h1 span:nth-child(6) {
color:#ea4335;
}
.search-bar {
width: 500px;
}
</style>
</head>
<body>
<h1>
<span>G</span><span>u</span><span>k</span><span>g</span><span>l</span><span>e</span>
</h1>
<form action="https://www.google.com/search" method="GET">
<div class="mx-auto mt-5 search-bar input-group mb-3">
<input name="q" type="text" class="form-control rounded-pill" placeholder="Google 검색 또는 URL 입력" aria-label="Recipient's username" aria-describedby="button-addon2">
<div class="input-group-append">
</div>
</div>
</form>
</body>
</html>
코드에서 분석할 4가지
1. 우선 부트스트랩에 접속하여 link태그를 head태그 안에 넣어준다.
2. 부모 tag 자식 tag:nth-child(요소 번호)는 부모 태그 내의 자식 태그의 몇 번째 요소인 자식 태그를 바꿔줄 수 있는 코드이다.
3. 구글 검색창의 각 색은 각종 툴의 스포이드 기능을 이용해서 추출한다.
4. input태그의 위치는 부트스트랩에서 class요소로 넣었다. 정말 손쉽다.
5. form 태그의 action은 어디를 향할 것인지 정하는 것이고 method는 데이터 전송 방식을 나타낸다. 그리고 input 태그의 name q는 q로 시작하는 것을 말해준다.
구글에 검색을 해보면 주소창에
google.com/search?p=검색어
형식으로 나오는 것을 볼 수 있다. 이것을 넣어주기 위해 form action을 해주는 것이다.
위에 올려놓은 코드를 실행하면 아래와 같은 결과를 보여준다.
그리고 검색창에 검색어를 입력해준다.
Enter를 누르게 되면 아래와 같이 검색이되는 것을 확인할 수 있다.
이번 클론 코딩을 통해 부트스트랩이 얼마나 좋은건지 체감하였다.
