검색창 클론코딩
구글을 모방한 검색창을 직접 만들어보았다.
유튜브의 조코딩님의 영상을 보면서 따라치는 것보다 스스로 생각해보고 직접 짜본다면, 더 공부가 될 것이라 생각했기에
영상은 해답지라고 생각하고 코드를 짜보았다.
막상 만든건 간단한 검색 창이지만 덕분에
css를 통해 위치설정 방법 및 span, form 태그등
get 방식과 post 방식에 대해서도 공부를 할 수 있었다.
따라 치는게 아니다보니, 시간이 많이 걸렸지만
완성되었을 때 너무나도 재미를 느낄 수 있었다.
클론코딩 과정
<title>Google 클론코딩</title>
</head>
<body>
<p class="google_serching">
<span style="color: blue">H</span>
<span style="color:red">o</span>
<span style="color: orange">g</span>
<span style="color:blue">l</span>
<span style="color:red">e</span>
</p>
</body>. 처음 Hogle 글자에 부분을 p 태그로 감싼 뒤
span으로 한글자씩 색상을 넣었다. 나중에 위치를 변경해야하기 때문에 p 태그안에 식별자 class를 넣어 하나의 container처럼 만들었다. 고민이 있었다면. span 하나 하나에 식별자를 넣어야하나??? 라는 생각도 들었지만, span 내에 style할 수 있는 기능이 있다는 걸 알고 위 코드로 작성하였다.
완성 후 조코딩님의 영상에서는 nth-child()를 사용해 내가 생각했던 고민이 한방에 날아가버렸지만....
<form method=get action="https://www.google.com/search" target="_blank">
<input name= "q" type="text"
placeholder="검색기능 구현" >
<button name="button">검색</button>
</form>검색 기능이 가능한 form 태그를 어떻게 만들지???를 고민했을 했다. 나의 짧은 지식으론 검색을 하면https://www.google.com/search?q << 이부분이 공통적으로 주소값에 나온다는 것정도였고 좀 더 자세하게 알아보기 위해
(https://developer.mozilla.org/ko/docs/Web/HTML/Element/form)
위의 mdn을 통해 구글 검색의 get방식과 q가 매개변수라는 것
사실 form태그가 있다 뿐이지 또 혼자서 js를 건드려야하나? 같은 생각도 했었다.form에 검색기능을 넣는 방법을 전혀 몰랐기에 구글링을 했다.
대망의 css..
필자는 css에 hover이 뭔지는 알아도 어떻게 위치를 조절하는지는 알지 못하였다. 좀 더 기억하기 쉽고 좀 더 수월하게 습득할 수 있는 방법이 없을까? 생각하던 중
(https://flexboxfroggy.com/#ko)
flex 개구리라는 게임을 통해 css를 배우며 필요한 각 태그들의 위치를 지정할 수 있었다. 아래 코드를 보자!
.google_serching{
font-size: 10vw;
text-align: center;
}
form{
display:flex;
align-items:center;
justify-content:center;
}
input{
width: 60vw;
height:3vh;
font-size:2vw;
text-align: center;
border-bottom-left-radius:2vw;
border-top-left-radius:2vw;
}
button{
height:3.6vh;
border-top-right-radius:2vw;
border-bottom-right-radius:2vw;
}처음에는 고정 px를 주려했었다. 웹사이트와 vscode를 번갈아가면서 봐야했기에 사이트 사이즈를 줄이면 폰트 크기가 botton 박스의 크기를 넘어가는 일이 생겨버리는 또 다른 문제가 생겼지만, vw,vh를 이용해 화면 사이즈 크기에 따라 조절하게 만들었다.
후기: 남들이 보면 보잘 것없고 간단해 보이는 구글 검색창이지만,
덕분에 많은 태그들과 css에 대해 조금이나마 알게되었다.
재미있다. 아주
출처:https://developer.mozilla.org/ko/docs/Web/HTML/Element/form
https://www.youtube.com/watch?v=tIC9MfxGOow
https://flexboxfroggy.com/#ko
도움받은 오픈톡방:https://open.kakao.com/o/gVMwEFtb
