.jpeg)
HTML
<html>
<body>
<section class="container">
<div>
<img src="https://user-images.githubusercontent.com/61774575/95163201-34411c00-075c-11eb-9987-d6301acb4dab.png"
alt="weegle_logo" />
</div>
<div class="searchWrapper">
<i class="fas fa-search"></i>
<input type="text" />
<i class="fas fa-keyboard"></i>
<i class="fas fa-microphone"></i>
</div>
<div class="buttonWrapper">
<button>Weegle 검색</button>
<button>I'm feeling lucky</button>
</div>
<div class="lang">
Weegle 제공 서비스 : <a>English</a>
</div>
</body>
</html>CSS
*{
box-sizing: border-box;
margin : 0;
padding : 0;
}
html, body {
height: 100%;
}
body {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.container img{
width: 200px;
}
.searchWrapper{
display: flex;
width: 300px;
margin: 15px;
padding: 5px;
border: 1px solid gray;
border-radius: 15px;
}
.searchWrapper input{
flex: 7;
border: none;
outline: none;
}
.fas{
flex: 1;
}
.buttonWrapper button{
margin-bottom: 15px;
padding: 10px 5px;
border: none;
border-radius: 5px;
cursor: pointer;
}
.lang a{
color: blue;
text-decoration: underline;
}
개발자 지망생 서하입니당