오늘 한 일

• 로그인 페이지 레이아웃 구현
• 회원가입 페이지 레이아웃 구현

끄적

• 회원가입 페이지 만들면서 input과 label을 겹치고, input창에 커서가 focus됐을 때 label이 보이지 않도록 만들고 싶었다.

그래서 아래와 같이 input창과 label에 z-index값을 주었다.

input {
  &:focus-within {
    z-index: 2;
  }
}

.configLabel {
  z-index: 1;

<label className="configLabel" htmlFor="userPwCheck">
  <span>비밀번호 확인</span>
</label>
<input name="id" />

하.지.만. z-index는 적용되지 않았다. 😇
찾아보니 position값이 static일 때는 z-index가 적용되지 않는다고 한다. 이는 static의 특성때문에 그렇다. static은 top, bottom, left, right뿐만 아니라 z-index에 대해서도 간섭받지 않는다. (마치 자물쇠에 걸린 것처럼?!)

그래서 z-index 값을 적용하려는 위치에 relative를 입력하는 경우가 많다.
아래의 코드처럼 말이다.

input {
  position: relative;
  &:focus-within {
    z-index: 2;
  }
}

.configLabel {
  z-index: 1;

• onFocus는 커서가 focusing되었을 때(깜박일 때) 이벤트를 발생시킨다면, onBlur는 커서가 focusout되었을 때 이벤트를 발생시킨다.

• JSX 문법을 사용할 때 “Invalid DOM property for. Did you mean htmlFor”에러가 뜨는 경우
  :: JSX는 label의 속성인 for를 반복문 for로 오해할 여지가 있다. 그래서 이를 명확히 구분하기 위해 html에서 쓰이는 for는 htmlFor로 표기하도록 에러코드를 띄운다. class도 마찬가지이다. class 컴포넌트로 오해할 여지가 있기 때문에 class가 아닌 className을 사용한다.