✅ 공부한 내용

네이버 로그인 페이지 구현

반응형 레이아웃

미디어 쿼리를 활용해 반응형 디자인하기.

@media (max-width: 480px) {
  ...
}
@media (min-width: 481px) {
  ...
}

키보드 접근

<div class="login-state">
  <input type="checkbox" class="login-state-checkbox" id="loginState" name="state" />
  <label for="loginState" class="login-state-label">
    <span class="icon-check"></span>로그인 상태 유지
  </label>
</div>

input 요소의 type="checkbox"를 디자인 할 경우 기본으로 설정된 디자인을 숨겨야 하는데 이때, display: hidden을 사용할 경우 키보드를 이용해 접근할 수 없고 form data를 전송할 수 없다.
따라서 appearance 속성을 이용해 기본 스타일을 제거하게 되면 키보드로 접근할 수 있다.

.login-state-checkbox {
  position: absolute;
  top: -0.4rem;
  left: -0.4rem;
  width: 2.4rem;
  height: 2.4rem;
  appearance: none;
}

validation 메세지

aria-*

<label for="userEmail" class="a11y">아이디</label>
<input type="email" name="userEmail" placeholder="아이디(이메일)" required aria-invalid="false" aria-describedby="userEmailError" aria-live="assertive" />
<span class="error-message" id="userEmailError">아이디는 이메일 형식으로 입력해 주세요.</span>

• aria-invalid="false"
  • 유효하지 않은 데이터를 포함하고 있는지 여부를 나타낸다.
  • 값이 "false"로 설정되면, 값이 유효하다는 것이다.
• aria-describedby="식별자"
  • 추가적인 설명을 제공하는 데 사용된다.
  • 다른 요소의 식별자를 가르키는데, 식별자가 있는 요소를 통해 에러 메시지나 유효성 검사에 대한 설명을 제공할 수 있다.
• aria-live="assertive"
  • 동적으로 변경되는 콘텐츠를 스크린 리더 사용자에게 즉시 알리기 위해 사용한다. 기본값은 off.
  • polite값은 중요도가 낮은 내용에 사용하여 현재 진행중인 음성 또는 타이핑을 방해하지 않고 뒤늦게 전달한다.
  • assertive값은 중요도가 높은 내용에 사용하여 현재 진행중인 보조기기 작업을 중단하고 갱신 내용을 즉시 사용자에게 전달한다.

Etc

legend 요소 숨김 처리
화면에서는 안보이게 숨김 처리 하지만 스크린 리더에서는 접근 가능하게 하기.

legend.a11y {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  visibility: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
}

🤔 새롭게 배운 내용

마진 상쇄

여러 블록의 위쪽 및 아래쪽 바깥 마진은 경우에 따라 제일 큰 여백의 크기를 가진 단일 여백으로 상쇄되곤 한다.

마진 상쇄는 다음과 같은 세 가지 기본 상황에 발생한다.

1. 인접 형제 박스 간 상하 마진이 겹칠 때

<div class="wrapper">
  <div class="box1"></div>
  <div class="box2"></div>
</div>

* {
  margin: 0;
  padding: 0;
}
.wrapper {
  background: skyblue;
  height: 400px;
  width: 400px;
}
.box1,
.box2 {
  width: 100px;
  height: 100px;
}
.box1 {
  background: orange;
  margin-bottom: 30px;
}
.box2 {
  background: teal;
  margin-top: 30px;
}

box1에 margin-bottom: 30px을 box2에 margin-top: 30px을 적용했지만 아래 사진과 같이 box1과 box2의 여백은 30px이다.

2. 부모와 자손을 분리하는 콘텐츠 없을 때

<div class="wrapper">
  <div class="box1"></div>
</div>

* {
  margin: 0;
  padding: 0;
}
.wrapper {
  background: skyblue;
  height: 400px;
  width: 400px;
  margin-top: 30px;
}
.box1 {
  background: orange;
  width: 100px;
  height: 100px;
  margin-top: 30px;
}

부모인 .wrapper에 margin-top: 30px을 적용하고 자식인 .box1에 margin-top: 30px를 적용해도 자식과 부모간의 여백이 생기지 않는다.

3. 빈 요소의 상하 마진이 겹칠 때

<div class="wrapper">
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3"></div>
</div>

* {
  margin: 0;
  padding: 0;
}
.wrapper {
  background: skyblue;
  height: 400px;
  width: 400px;
}
.box1,
.box3 {
  width: 100px;
  height: 100px;
}
.box1 {
  background: orange;
  margin-bottom: 60px;
}
.box2 {
  margin-top: 30px;
  margin-bottom: 60px;
}
.box3 {
  background: teal;
  margin-top: 30px;
}

'빈 요소' 란 높이(height)가 0인 상태의 블록 요소를 말하는데,

• height / min-height / max-height / padding / border 등 상하로 늘어나는 프로퍼티 값을 명시적으로 주지 않았거나
• 내부에 inline 콘텐츠가 존재하지 않는 요소인 경우

위와 아래를 가르는 경계가 없으므로, 자신의 상단 마진의 값과 하단 마진의 값을 비교해 더 큰 값으로 상쇄한다.

flex-direction: column

flex-direction: column을 이용하지 않고 레이아웃을 column으로 정렬하는 방법이있다.

.login-form-container {
  display: flex;
  /* flex-direction: column; */
  flex-flow: row wrap;
}
.user-email,
.user-password,
.login-state-ip-security-checkbox-wrapper,
.btn-login {
  width: 100%;
}

부모가 display: flex 상태이며 flex-wrap: wrap;인 경우 자식들을 부모의 크기 100%로 적용하면 줄바꿈이 되며 column으로 정렬이 가능해진다.

clamp()

최소 경계와 최대 경계 사이의 값 범위 내에서 중간 값을 고정한다.
따라서 최소값, 기본 값, 최대 값의 세 가지 매개 변수를 사용한다.

font-size: clamp(1.5rem, 2.5vw, 4rem);

첫 번째 인수는 최소 값, 두 번째 인수는 기본 값, 세 번째 인수는 최대 값이다.

• 뷰포트의 너비가 2.5vw보다 작을 경우, 글꼴 크기는 1.5rem으로 설정된다.
• 뷰포트의 너비가 2.5vw보다 크고 4rem보다 작을 경우, 글꼴 크기는 뷰포트 너비의 2.5vw로 설정된다.
• 뷰포트의 너비가 4rem보다 큰 경우, 글꼴 크기는 4rem으로 설정된다.

따라서 글꼴 크기는 뷰포트의 크기에 따라 유동적으로 조정되지만, 지정된 최소 및 최대 값 범위 내에서 유지할 수 있다.

가상 클래스:checked를 이용해 텍스트 변경하기

  .ip-security-label::before {
    content: "OFF";
    display: block;
    width: 28px;
    text-align: right;
    font-weight: 700;
  }
  .ip-security-checkbox:checked + .ip-security-label::before {
    content: "ON";
    color: #03cf5d;
  }

text indent

블록에서 텍스트 줄 앞에 놓이는 빈 공간(들여쓰기)의 길이를 설정한다.

text-indent: 0;

text-indent: 30%;

text-indent: -3em;