오늘의 배운 내용

구글 클론 코딩

style.css, googol.html html 파일과 css만 있으면 만들 수 있습니다.

googol로 유사 코딩을 진행했으며, 폼태그를 이용해서 만들었습니다.

버튼을 누르면 구글페이지에서 검색한 내용으로 출력이 됩니다.

오늘 배운 폼태그 코드

Googol

<form method="GET" action="https://www.google.com/search"> 
<!-- get방식 이용해서 서버에 요청, 구글에 사이트에 검색해서 연결함--> 
  <input type = "Text" name = "q"/> <!-- 폼태그-->
  <br><br>
  <button>Googol 검색</button>
  <button>I'm Feeling Lucky</button>
</form>

style.css

h1 {
    text-align: center;
    font-size: 90px;
    padding: 0px 0px 0px 0px;

}

h1  span:nth-child(1){ /* 부모 요소중에 스판 첫번째 요소 */
    color: #4285f4;
}

h1  span:nth-child(2){ /* 부모 요소중에 스판 두번째 요소 */
    color: #ea4335;
}

h1  span:nth-child(3){ /* 부모 요소중에 스판 세번째 요소 */
    color: #fcc629;
}

h1  span:nth-child(4){ /* 부모 요소중에 스판 네번째 요소 */
    color: #4285f4;
}

h1  span:nth-child(5){ /* 부모 요소중에 스판 다섯번째 요소 */
    color: #34a853;
}

h1  span:nth-child(6){ /* 부모 요소중에 스판 여섯번째 요소 */
    color: #ea4335;
}

form {
    text-align: center;
}

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

input:focus{
    outline: none;
}

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

button:focus {
    outline: 0.5px solid lightskyblue;
}

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