TIL#14 Weegle検索バーの実装
🔥 Assignment
フラグには、次の画像アドレスが使用されます.
https://user-images.githubusercontent.com/61774575/95163201-34411c00-075c-11eb-9987-d6301acb4dab.png
CSS positionプロパティを使用してアイコンを配置します.
💡 inputとアイコンを含む親ラベルのdivを作成し、アイコンの位置決めを容易にします.
2つのグレーボックスで同じクラス名を使用し、cssを1回使用します.
Aラベルを使用してEnglishを実装します.
🏁 My Code
[HTML]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="https://kit.fontawesome.com/20635ad1aa.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="wrap">
<img src="https://user-images.githubusercontent.com/61774575/95163201-34411c00-075c-11eb-9987-d6301acb4dab.png" alt="weegle">
<div class="icon">
<i class="fas fa-search search"></i>
<i class="fas fa-keyboard keyboard"></i>
<i class="fas fa-microphone mic"></i>
<input type="text">
<button class="button">Weegle 검색</button>
<button class="button">I'm feeling Lucky</button>
<p>Weegle 제공 서비스 : <a>English</a></p>
</div>
</div>
</body>
</html>[CSS]
* {
box-sizing: border-box;
}
.wrap {
width: 700px;
margin: 0 auto;
height: 100vh;
text-align: center;
}
img {
width: 500px;
}
.icon {
position: relative; // 부모 속성 relative로 설정
}
input {
width: 100%;
height: 40px;
border-radius: 30px;
border: 1.5px solid #EDEDED;
}
.search {
position: absolute; // 자식 속성 absolute로 설정
top: 12px;
left: 25px;
color: #AAAAAA;
}
.keyboard {
position: absolute; // 자식 속성 absolute로 설정
top: 12px;
right: 50px;
}
.mic {
position: absolute; // 자식 속성 absolute로 설정
top: 12px;
right: 25px;
color: #4F86EC;
}
.button {
padding: 13px;
margin: 15px 3px 10px 3px;
background-color: #F4F4F4;
border: none;
border-radius: 5px;
color: #6e6a6a;
font-weight: 500;
}
a {
color: #4d4fcf;
}
p {
font-size: small;
}✔️ Result
What I Learned
Reference
この問題について(TIL#14 Weegle検索バーの実装), 我々は、より多くの情報をここで見つけました https://velog.io/@threeplef/TIL14-Weegle-검색바-구현テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol