CSS Tips-: placeholder shown 아날로그 클래스를 사용하여 Material Design 같은 input 만들기

이번에는 Placeholder-shown이라는 아날로그 종류의 사용 방법을 소개하고 싶습니다.
나도 움직이는 샘플을 만들어 보았으니 가능하면 참고하세요.

placeholder shown이란?

: placeholder shown은 CSS의 위조 클래스 중 하나입니다. placeholder가 표시될 때만 적용되는 스타일을 정의할 수 있습니다.input:not(:placeholder-shown) { ... }placeeholder가 표시되지 않으면 값을 입력할 때만 유효한 스타일을 정의할 수 있습니다.
능숙하게 사용할 수 있다면 지금까지 자바스크립트로 구현한 콘텐츠를 CSS 완결 형식으로 구현할 수 있다.

샘플 프로그램

견본
https://runstant.com/phi/projects/10bd7a40

머티리얼 디자인 흔한 인풋을 만들어 봤어요.
초점이 맞춰지면 라벨이 작아지고 왼쪽 상단에 가까워진다.

소스 코드 및 설명

샘플의 > 내용은 다음과 같다.
index.html

    <label class='input'>
      <input type='text' placeholder="&nbsp;" />
      <span class='label'>nickname</span>
      <div class='border'></div>
    </label>

CSS, 이번에는 LESS로 써봤어요.
main.less

.input {
  font-size: 16px;
  position: relative;
  .label {
    position: absolute;
    left: 0;
    transform-origin: 0 0;
    transition: 256ms;
  }
  input {
    border: none;
    outline: none;
    background: none;
    border-bottom: 2px solid gray;
    padding-bottom: 8px;
    
    // フォーカスしたら移動アニメーション & 下線の色を変更
    &:focus {
      + span {
        color: blue;
        transform: translateY(-26px) scale(.75)
      }
      border-bottom: 2px solid blue;
    }
    // 入力済みだったら移動後の表示のままにする
    &:not(:placeholder-shown) {
      + span {
        transform: translateY(-26px) scale(.75)
      }
    }
  }
}

절차로, 우선, > 측에서 placeholder에 공문을 설정하고, placeeholder 대신 label을 input에 겹쳐서 표시합니다.
그런 다음 초점을 맞춘 시점에 레이블을 왼쪽 위 기준으로 배율 애니메이션하여 Material Desgin과 같은 UI를 구현합니다.

최후

JavaScript와 마찬가지로 CSS도 매일 진화하고 있습니다.
이전에 코드로 쓴 복잡한 처리 방식도 CSS의 기능을 활용하면 쉽게 실현할 수 있습니다!
grid와 관련된 CSS, backdrop-filter도 마찬가지다.
서비스 활용 관점에서 볼 때 외관과 관련된 동작은 CSS에서 하는 것이 가장 좋다고 생각합니다.
코드로 이뤄지면 어떻게 해서든 오류가 생기거나 상관없는 곳에 영향을 미칠 위험이 높아지기 때문이다.
앞으로도 코드가 구현됐지만 이제 CSS가 쉽게 완성할 수 있는 팁을 소개하고 싶다.