TIL - Input 외 여러 실습

박지훈·2022년 3월 1일
0

HTML/CSS

목록 보기
4/4

1. input, textarea, button 실습

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;
}

2. Weegle 검색 바 만들기 실습

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;
}

0개의 댓글