주니어 기초 코딩공부/CSS, HTML 기초

Google 클론 사이트 만들기! 야! 너두 만들 수 있어~~~!!! 아주쉬움 주의

jju_developer 2023. 1. 2. 02:03
728x90

안녕하세용~JJU developer입니다!!!!

오늘은 아주아주 간단한 구글 클론 사이트를 만들어 보았습니다!!!!

이름하야 쭈글 홈페이지인데요~?

저기 검색창에 검색하면 구글과 동일하게 검색이 된답니다~!!

google 페이지 클론

기능: 실제로 주소창에 입력가능, 입력한 값 정상적으로 검색 가능

http://127.0.0.1:5500/index.html?

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JJoogle</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css">
    
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1><span>J</span><span>J</span><span>o</span><span>o</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>
    </form>
</body>
</html>
h1{
    text-align: center;
    margin-top: 230px;
    text-align: center;
    font-size: 90px;
    font-weight: bold;
}

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;
}
h1 span:nth-child(7){
    color: #4285f4;
}
.search-bar{
    width: 500px;
}

VSCODE 사용
VSCODE 사용

올해 2023년 1월 1일 첫 클론!

 

이번주에 배울 CSS와 HTML을 대비하여, 혼자 구글링해서 구글 사이트 클론을 해보았습니다.

 

올 한해도 화이팅~!!

 

달려보자!

 

개발자가 되는 그날까지!!!!!!!

728x90