> For the complete documentation index, see [llms.txt](https://shhn0509.gitbook.io/make-better-netflix-website/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://shhn0509.gitbook.io/make-better-netflix-website/styling/scss-project-log/main/our-story/input.md).

# 로그인 input 스타일 방법

## 설계 

### \<input> CSS 상태&#x20;

* :invalid 상태일 때 color 또는 border-bottom 스타일 적용&#x20;
* :valid 상태일 때 color 스타일 적용&#x20;

### 경고 안내 텍스트&#x20;

* \[role="alert"]을 선택자로 해서 스타일링 할 수 있다.&#x20;
* normal 상태 → 경고 일 때 스타일링 적용 ➕ display: none
* invalid 상태 → display: block으로 경고 텍스트가 보이게 한다.&#x20;

### \<label> 스타일링&#x20;

* input:focus일 때, label 위치 설정 → padding, em 단위로 설정&#x20;

## 코드 참고&#x20;

```css
/* Promotion → Email form 스타일링 ------------------------------------------------------ */
.emailContainer {
  &__block {
    position: relative;
    width: rem(228);

    @include media('>=lg') {
      width: rem(540);
    }

    label {
      letter-spacing: -0.04em;
      color: get-color(gray);
      transition: all 0.2s ease(out-expo);
      @include font-and-line-height(13px, 1.35);
      @include position(absolute, top 12px left 15px);

      @include media('>=lg') {
        top: 18px;
        font-size: rem(16);
      }
    }

    input {
      width: 100%;
      border: 0;
      border-radius: rem(50);
      background: get-color(white);
      @include fsp(13, 18 20 7);

      @include media('>=lg') {
        border-radius: 0;
        font-size: rem(16);
        @include fsp(16, 23 20 16);
      }
    }

    input:focus + label {
      top: 3px;
      left: 20px;
      font-size: rem(11);

      @include media('>=lg') {
        top: 5px;
        left: 19px;
        font-size: rem(12);
      }
    }

    input:valid {
      color: get-color(black);
    }

    input:invalid {
      border-bottom: 3px solid get-color(red);
      color: get-color(red);
    }

    [role='alert'] {
      display: none;
      margin-top: rem(5px);
      line-height: 1.35;
      letter-spacing: -0.04em;
      font-size: rem(14px);
      font-weight: bold;
      color: get-color(red);
    }
  }

  // emailContainer____block--valid (--nvalid)
  &__block--invalid [role='alert'] {
    display: block;
    @include text(align center);

    @include media('>=lg') {
      text-align: left;
      @include p(l rem(20));
    }
  }

  &__block--valid label,
  &__block--invalid label {
    top: 3px;
    left: 20px;
    font-size: rem(11px);

    @include media('>=lg') {
      top: 5px;
      left: 19px;
      font-size: rem(12px);
    }
  }
}
```