카테고리 없음

HTML CSS로 간단한 google사이트 만들기

Canyi 2022. 10. 4. 11:51 
button:focus{
    outline: 2px solid #4285f4;
}
<!DOCTYPE html>
<html lang="en">
<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>google</title>
</head>
<body>
    <h1>
        Google
    </h1>
    <form action="">
        <input type="text">
        <br>
        <button>Google 검색</button>
        <button>I'm feeling Lucky</button>
    </form>
</body>
</html>

그다음 css로 아이콘, 검색버튼, 검색바 등의 위치와 색을 CSS로 변경한다.

    <link rel="stylesheet" href="style.css">  헤더에 적용할 style.css파일을 적용한다.
 
body에 있는 Google도 
    <h1>
        <span>G</span>
        <span>o</span>
        <span>o</span>
        <span>g</span>
        <span>l</span>
        <span>e</span>
    </h1>

색 변경을 위해서 span으로 분할한다.

 

google.html

<!DOCTYPE html>
<html lang="en">
<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>canyi</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>
        <span>G</span>
        <span>o</span>
        <span>o</span>
        <span>g</span>
        <span>l</span>
        <span>e</span>
    </h1>
    <form action="">
        <input type="text">
        <br>
        <button>Google 검색</button>
        <button>I'm feeling Lucky</button>
    </form>
</body>
</html>

style.css

h1{
    text-align: center;
    border: 1px solid black;
    /* padding: 40px 40px 40px 150px */
    margin: 230px 0px 0px 0px;
    font-size: 90px;
}

h1 span:nth-child(1)    /*h1의 첫번째 span*/
{ 
    color: #4285f4;
}
h1 span:nth-child(2)    /*h1의 두번째 span*/
{ 
    color: #ea4335;
}
h1 span:nth-child(3)    /*h1의 세번째 span*/
{ 
    color: #fcc629;
}
h1 span:nth-child(4)    /*h1의 네번째 span*/
{ 
    color: #4285f4;
}
h1 span:nth-child(5)    /*h1의 다섯번째 span*/
{ 
    color: #34a853;
}

h1 span:nth-child(6)    /*h1의 다섯번째 span*/
{ 
    color: #4285f4;
}

 

h1 span:nth-child(1) : h1부분의 첫번째 span을 불러온다.

색은 저용 됐다... 다만 서치바와 검색버튼의 위치가 이상함

 
form{
    text-align: center;
}

form에 있는 부분들을 가운데로 옮긴다.

 

 

간격 조절을 위해 input에 css를 적용한다.

input {
    width: 100%;
    max-width: 584px;
    height: 44px;
    border-radius: 24px;
    border: 1px solid #dfe1e5;
    margin: 25px 0 25px 0;
}

width: 먼저 넓이를 최대한 당기고

max-width: 적당한 넓이로 px을 설정한다.

height: 높이를 설정하고

border-radius: 서처바의 테두리를 둥글게 만든다.

border: 테두리의 투명색을 변경한다.

margin: google과 검색버튼 사이에 간격을 설정한다. 

 

 

search바에 클릭을 했을대 border의 색이 검정색으로 변한다. 색이 변하는것을 방지하고 싶다.

input:focus{
    outline: none;
}

적용해보니 색이 변하지 않는다.

button{
    background-color: #f8f9fa;
    min-width: 54px;
    height: 36px;
    border: 1px solid #f8f9fa;
    border-radius: 4px;
    cursor:pointer;
    font-size: 14px;
    padding: 0 16px 0 16px ;
}

버튼의 css를 적용한다. 

cursor: point > 버튼에 cursor를 닿을 경우 손모양 적용.

버튼을 클릭할 경우 테두리에 색 적용

button:focus{
    outline: 2px solid #4285f4;
}

버튼을 클릭했을 때 skyblue로 적영되었다. 

 

 

마우스를 버튼을 닿았을 때 이벤트가 발생하고 싶은 경우!

 

button:hover{
    border: 1px solid #dfe1e5;
}

 

 

google 검색 부분에 마우스 커서를 이동 했더니 투명색으로 변함!

 

style.css 전체 코드

h1{
    text-align: center;
    /* border: 1px solid black; */
    /* padding: 40px 40px 40px 150px */
    margin: 230px 0px 0px 0px;
    font-size: 90px;
}

h1 span:nth-child(1)    /*h1의 첫번째 span*/
{ 
    color: #4285f4;
}
h1 span:nth-child(2)    /*h1의 두번째 span*/
{ 
    color: #ea4335;
}
h1 span:nth-child(3)    /*h1의 세번째 span*/
{ 
    color: #fcc629;
}
h1 span:nth-child(4)    /*h1의 네번째 span*/
{ 
    color: #4285f4;
}
h1 span:nth-child(5)    /*h1의 다섯번째 span*/
{ 
    color: #34a853;
}

h1 span:nth-child(6)    /*h1의 다섯번째 span*/
{ 
    color: #ea4335;
}

form{
    text-align: center;
}

input {
    width: 100%;
    max-width: 584px;
    height: 44px;
    border-radius: 24px;
    border: 1px solid #dfe1e5;
    margin: 25px 0 25px 0;
} 

input:focus{
    outline: none;
}

button{
    background-color: #f8f9fa;
    min-width: 54px;
    height: 36px;
    border: 1px solid #f8f9fa;
    border-radius: 4px;
    cursor:pointer;
    font-size: 14px;
    padding: 0 16px 0 16px ;
}

button:focus{
    outline: 2px solid #4285f4;
}


button:hover{
    border: 1px solid #dfe1e5;
}

 

마지막으로 검색 기능을 만든다. 

구글에서 검색을 해봤다.

    <form method="get" action="https://www.google.com/search">
        <input type="text" name="q">
        <br>
        <button>Google 검색</button>
        <button>I'm feeling Lucky</button>
    </form>

html에 있는 form ㅂ분을 수정한다.

method :  로그인 기능이 없으므로 method 는 get으로 하고 action은 https://www.google.com/search 하고 서치버튼에 name  = "q" 를 적용한다.

 

검색 성공!!

html 전부 코드

<!DOCTYPE html>
<html lang="en">
<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>canyi</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>
        <span>G</span>
        <span>o</span>
        <span>o</span>
        <span>g</span>
        <span>l</span>
        <span>e</span>
    </h1>
    <form method="get" action="https://www.google.com/search">
        <input type="text" name="q">
        <br>
        <button>Google 검색</button>
        <button>I'm feeling Lucky</button>
    </form>
</body>
</html>