처음 작성한 THML 코드는
<body>
<div class="logo">
<img src="https://user-images.githubusercontent.com/61774575/95163201-34411c00-075c-11eb-9987-d6301acb4dab.png" alt="weegle">
</div>
<div class="search">
<input type="text">
<div class="icon">
<div class="glass">
<i class="fa-solid fa-magnifying-glass"></i>
</div>
<div class="extra">
<i class="fa-solid fa-keyboard"></i>
<i class="fa-solid fa-microphone"></i>
</div>
</div>
</div>
<div class="button">
<a href="#">Weegle 검색</a>
<a href="#">I'm feeling Lucky</a>
</div>
<div class="getFrom">
<strong>Weegle 제공 서비스</strong><span> : <a href="#">English</a></span>
</div>
</body>적용한 CSS는
.logo {
width: 300px;
margin: 0 auto;
}
img {
width: 100%;
}
.search {
position: relative;
width: 500px;
height: 30px;
margin: 0 auto;
}
input {
width: 100%;
height: 100%;
border-radius: 15px;
border: 1px solid #f1f1f1;
padding-left: 35px;
}
.icon {
position: absolute;
display: flex;
justify-content: space-between;
top: 9px;
right: 10px;
left: 15px;
margin: 0;
}
.fa-microphone {
margin-left: 10px;
color: #4d87ef;
}
.fa-magnifying-glass {
color: #818181;
}
.button {
display: flex;
justify-content: center;
}
.button a {
margin: 20px 10px;
padding: 15px;
color: #65666a;
text-decoration: none;
background-color: #f4f4f4;
border-radius: 3px;
}
.button a:hover {
background-color: #ddd;
}
.getFrom {
display: flex;
justify-content: center;
font-size: 12px;
}
.getFrom a {
color: #4145b5;
text-decoration: none;
}며칠 후 수정해 본 HTML 코드는(디테일한 컬러와 스타일은 무시함)
<body>
<div class="img-wrapper">
<img src="https://user-images.githubusercontent.com/61774575/95163201-34411c00-075c-11eb-9987-d6301acb4dab.png" alt="weegle">
</div>
<div class="input-wrapper">
<input type="text">
<div class="icons">
<div class="glass-wrapper">
<i class="fa-solid fa-magnifying-glass"></i>
</div>
<div class="keymic-wrapper">
<i class="fa-solid fa-keyboard"></i>
<i class="fa-solid fa-microphone"></i>
</div>
</div>
</div>
<div class="gray-wrapper">
<div class="grayBox"><a href="somewhere">Weegle 검색</a></div>
<div class="grayBox"><a href="somewhere">I'm feeling Lucky</a></div>
</div>
<div>Weegle 제공 서비스 : <a class="english" href="english">English</a></div>
</body>적용한 CSS 코드는
* {
box-sizing: border-box;
}
body {
display: flex;
flex-direction: column; // flex-direction: 활용 잘 하기!
align-items: center;
}
.img-wrapper {
width: 310px;
}
img {
width: 100%;
}
.input-wrapper {
width: 500px;
height: 30px;
position: relative;
display: flex;
}
input {
width: 100%;
height: 100%;
border-radius: 10px;
border: 1px solid #bbb;
}
.icons {
width: 100%;
position: absolute;
top: 6px;
display: flex;
justify-content: space-between;
}
.fa-magnifying-glass {
margin-left: 13px;
}
.fa-keyboard {
margin-right: 10px;
}
.fa-microphone {
margin-right: 13px;
color: skyblue;
}
.gray-wrapper {
display: flex;
justify-content: cneter;
}
.grayBox {
background-color: #bbb;
padding: 15px 20px;
margin: 20px 10px;
border-radius: 5px;
}
.grayBox a {
text-decoration: none;
color: black;
}
.english {
text-decoration: none;
}실행 결과는 같지만 유지 보수에 용이하도록 코드를 좀 더 깔끔하게 짤 필요가 있다!
Hello