TIL
20230718_TIL
웹개발자지망생
2023. 7. 18. 16:43
오늘의 배운 내용
구글 클론 코딩
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;
}