index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google</title>
<link rel="stylesheet" href="styles.css">
<script src="https://kit.fontawesome.com/c1ca648c07.js" crossorigin="anonymous"></script>
</head>
<body>
<div id="google">
<header id="google-header">
<a href="" id="gmail-btn">Gmail</a>
<a href="" id="img-btn">이미지</a>
<a href="" id="app-btn">
<img src="image/google-app-icon.PNG">
</a>
<a href="" id="sign-btn">로그인</a>
</header>
<article id="google-main">
<div id="logo">
<img src="image/logo.PNG">
</div>
<div id="search-box">
<i class="fas fa-search" id="search-icon"></i>
<input type="text" id="search">
<i class="fas fa-keyboard" id="keyboard-icon"></i>
<i class="fas fa-microphone" id="microphone-icon"></i>
</div>
<div id="button-box">
<button id="google-search-btn">Google 검색</button><button id="lucky-btn">I'm Feeling Lucky</button>
</div>
</article>
<footer id="google-footer">
<div id="country">대한민국</div>
<div id="more">
<span id="more1">
<a href="">광고</a>
<a href="">비즈니스</a>
<a href="">Google 정보</a>
<a href="">검색의 원리</a>
</span>
<span id="more2">
<a href="">개인정보처리방침</a>
<a href="">약관</a>
<a href="">설정</a>
</span>
</div>
</footer>
</div>
</body>
</html>styles.css
body {
padding: 0;
margin: 0;
}
/* Google Header */
#google-header {
display: flex;
justify-content: flex-end;
align-items: center;
font-size: 13px;
margin-top: 15px;
}
#google-header a {
margin-right: 20px;
}
#gmail-btn,
#img-btn {
text-decoration: none;
color: black;
}
#app-btn img {
width: 23px;
height: 21.5px;
padding-top: 3px;
}
#sign-btn {
background-color: #4485f3;
color: white;
font-weight: 1000;
text-align: center;
width: 67px;
height: 29px;
line-height: 29px;
border-radius: 3px;
text-decoration: none;
}
/* google-main */
#google-main {
margin-top: 100px;
}
#logo {
text-align: center;
}
#search-box {
text-align: center;
margin-top: 10px;
}
#search {
width: 360px;
height: 45px;
border-radius: 25px;
outline: 0;
border: 1px solid #c4c4c4;
padding-left: 40px;
padding-right: 100px;
}
#search-icon {
position: absolute;
margin: 18px;
color: #c4c4c4;
font-size: 14px;
}
#keyboard-icon {
position: absolute;
color: gray;
font-size: 18px;
margin: 17px -90px;
}
#microphone-icon {
position: absolute;
color: blue;
font-size: 18px;
margin: 17px -40px;
}
#button-box {
text-align: center;
margin-top: 30px;
}
#google-search-btn {
padding: 5px;
margin-right: 15px;
}
#lucky-btn {
padding: 7.1px 12px;
}
#google-search-btn,
#lucky-btn {
font-size: 15px;
border: none;
background-color: #f8f9fa;
color: #202124;
}
/* google-footer */
#google-footer {
background-color: #f2f2f2;
display: flex;
flex-direction: column;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
border-top: 1px solid #e0e1e4;
}
#country {
background-color: #f2f2f2;
color: #6d6d6d;
font-size: 16px;
margin-left: 20px;
padding: 13px;
}
#more {
border-top: 1px solid #e0e1e4;
padding: 13px;
display: flex;
justify-content: space-between;
}
#more a {
color: #6d6d6d;
text-decoration: none;
font-size: 15px;
}
#more1 a {
padding-left: 17px;
}
#more2 a {
padding-right: 25px;
}
느낀점
직접 웹사이트를 구현해보니 쉽지 않았다. 이론공부 위주, 영상을 따라 코딩했던 공부가 잘못됐었다는 것을 분명히 깨닫게 해준 연습이었다. 물론 따로 검색을 하지 않아도 배웠던 것들이 생각나면서 적용을 바로바로 했지만 시행착오를 겪으며 혼자 클론 코딩하며 공부하는 것이 더 도움이 많이 되는 것 같다.
hover, focus 등 보완해야할 부분은 많지만 비슷하게 만들어봐야 겠다는 목표는 이뤘기 때문에!! 나중에 여유있을 때 보완해야겠다. 특히 마이크 상,하부분 색 다르게 하는거 어디에서 배웠는데... 꼭 찾아서 적용시켜봐야겠다.
빨리 자바스크립트 공부하러 가자!!
Front-end developer