프로젝트 친구들 HTML +CSS 공부한거 복습하기 좋을 만한 사이트가 뭐가 있을까 하다가 구글 홈페이지가 제일 간결하고 간단해보이길래 선택해서 먼저 한번 구현을 해보았다.
그냥 귀엽게.. 구글 검색창하고 구글 제목 정도만 HTML+CSS 로 만들어서 검색정도만 할 수 있게 만들었다!
<!DOCTYPE html>
<html>
<head>
<style>
#main{
position:absolute;
top:50%;
left:50%;
margin-left:-200px;
margin-top:-180px;
height:400px;
}
h1{
font-size:5rem;
text-align:center;
margin-bottom:50px;
}
#searcharea{
border: 1.5px solid gray;
width:500px;
height:38px;
border-radius:20px 20px;
box-shadow: 1px 1px 5px gray;
}
#search{
border:none;
margin-top:3px;
margin-left:30px;
width: 300px;
height :30px;
}
#button{
margin-left:100px;
border: none;
height :30px;
background-color:white;
}
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;
}
</style>
</head>
<body>
<div id="main">
<h1><span>G</span><span>o</span><span>o</span><span>g</span><span>l</span><span>e</span></h1>
<div id="searcharea">
<form action="https://www.google.com/search" method="GET">
<input id="search" name="q" type="text" placeholder="Google 검색 또는 URL 입력">
<input id="button" type="submit" value="search">
</form>
</div>
</div>
</body>
</html>
GET 방식으로 쿼리 날려서 실제 구글 홈페이지 검색 사이트로 연결시키는 정도로만 만들었다! CSS 다뤄본지 얼마 안돼서 혼자 뚝딱 만들어보는게 되게 재밌었다ㅋㅋㅋ 하지만.. CSS는 못생겼다...
'Web > HTML+CSS' 카테고리의 다른 글
| HTML+CSS) 레이아웃 연습하기 (0) | 2020.08.04 |
|---|