여러분 👋안녕하세요.

그래서 오늘은 HTML과 CSS를 이용하여 플로팅 라벨을 만드는 방법에 대해 알아보겠습니다 😎.

📄 HTML

먼저 HTML을 설정해 보겠습니다.

<main>
  <form>
    <div>
      <input id="email" type="email" placeholder=" " />
      <label for="email">Email</label>
    </div>
    <div>
      <input id="password" type="password" placeholder=" " />
      <label for="password">Password</label>
    </div>
    <button>Login</button>
  </form>
</main>

🎨 CSS

이제 CSS를 설정해 보겠습니다.

div {
  display: flex;
  flex-direction: column-reverse;
}

input {
  border: none;
  padding: 1rem;
  margin-top: 2rem;
  font-size: 1.6rem;
  border-bottom: 0.2rem solid #bdbdbd;
  outline: none;
}

label {
  padding-left: 1rem;
  color: #bdbdbd;
  transform: translateY(4.8rem);
  transform-origin: left top;
  cursor: text;
}

이제 input에 포커스가 있을 때 input 기능을 설정해 보겠습니다.

input:focus,
input:not(:placeholder-shown) {
  border-bottom: 0.2rem solid #212121;
}


input:focus ~ label,
input:not(:placeholder-shown) ~ label {
  padding: 0;
  color: #212121;
  transform: translateY(2rem) scale(0.8);
}

바로 그것 😎.

예시

📚 추가 읽을거리:

:not

:focus

:placeholder-shown

읽어 주셔서 감사합니다! 제 이름은 Bipin Rajbhar입니다. 나는 사람들이 새로운 기술을 배우도록 돕는 것을 좋아합니다 😊. 새로운 기사와 리소스에 대한 알림을 받고 싶다면 저를 팔로우하세요.