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>
<a href="">광고</a>
<a href="">비즈니스</a>
<a href="">Google 정보</a>
<a href="">검색의 원리</a>
<a href="">개인정보처리방침</a>
<a href="">약관</a>
<a href="">설정</a>
</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: bold;
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;
}float 문제 발견 후 해결
header의 아이콘들을 오른쪽에 배치하기 위해 float : right를 사용했다. float을 사용한 순간 header부분과 article부분이 구분되지 않았다. goggle logo에 margin-top을 적용하여 위치를 조정하려고 했는데 header부분과 함께 margin이 적용되는 것을 확인할 수 있었다.
float:right 대신 flex-end과 margin을 사용해 문제를 해결하였다.
그러면 float:right를 사용해 문제를 해결하기 위해서는 어떻게 해야할까?
header부분과 article사이에 margin을 사용해 여백을 주면 된다!!!
float은 position : absolute와 같이 위치 조정할 때 주의하여 사용해야겠다는 생각이 들었다.
Front-end developer