index.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" />
</head>
<body>
<div class="survey-container">
<div class="input-wrap">
<input type="text" placeholder="ID(필수)">
</div>
<div class="input-wrap">
<input type="password" placeholder="비밀번호">
</div>
<div class="input-wrap">
<input type="number" value="123456">
</div>
<div class="input-wrap">
<textarea>소개:</textarea>
</div>
<button>제출완료</button>
</div>
</body>
</html>
style.css
width: 200px;
margin: 100px auto;
}
input, textarea {
width: 100%;
font-size: 13px;
margin-bottom: 5px;
border-radius: 5px;
padding: 7px 12px;
}
input {
border: 1px solid black;
}
textarea {
resize: none;
}
input[type="text"]::placeholder {
color: red;
}
button {
color: white;
font-size: 15px;
background-color: #4CAF50;
padding: 5px 10px;
border-radius: 5px;
}
button:hover {
cursor: pointer;
opacity: 0.8;
}
input:hover, textarea:hover {
border: 1px solid #4CAF50;
}
index.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/83f99099b5.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="assignment23">
<div class="weegle1">
<img class="img_weegle" src="https://user-images.githubusercontent.com/61774575/95163201-34411c00-075c-11eb-9987-d6301acb4dab.png">
</div>
<div class="weegle2">
<input type="text">
<i class="fa-solid fa-magnifying-glass"></i>
<i class="fa-solid fa-keyboard"></i>
<i class="fa-solid fa-microphone"></i>
</div>
<div class="weegle3">
<button>Weegle 검색</button> <button>I'm feeling lucky</button>
</div>
<div class="weegle4">
Weegle 제공 서비스 : <a href="https://www.google.com/">English</a> </div>
</body>
</html>
style.css
.assignment23 {
text-align: center;
}
.img_weegle {
width: 50%;
}
div.weegle2 {
position: relative;
width: 100%;
}
.fa-magnifying-glass {
position: absolute;
top: 7px;
left: 20px;
}
.fa-keyboard {
position: absolute;
top: 7px;
right: 40px;
}
.fa-microphone {
color: #77a0f0;
position: absolute;
top: 7px;
right: 20px;
}
input {
width: 600px;
padding: 0 100px 0 50px;
font-size: 25px;
margin-bottom: 15px;
border: 1px solid #f4f4f4;
border-radius: 20px;
}
button {
margin: 0 5px 15px 5px;
padding: 15px;
color: gray;
border: none;
border-radius: 5px;
}
div.weegle4 {
font-size: 10px;
}