promotion의 input

기록하기

1. 링크 포커스시에 비비드 컬러 적용

   /* .Link:hover, .Link:focus */ 
   .Link:hover, :focus {
     background: var(--colorVividRed);
   }

2. 인풋을 클릭 하니 배경이 빨색으로 바뀐다. 왜??????????????(당황)

- 위에 선택자 때문이었음....😫 `.Link:hover, :focus`는 선택자 리스트이기 때문에 `.Link:hover, .Link:focus`의 의미가 아니다.

1. :focus 정리

   • :focus-visible, :focus:not(:focus-visible) 이 두가지를 설정했으면 :focus로 할 수 있는 모든 경우의 수(마우스, 키보드)는 전부 적용한 걸 텐데 왜 :focus를 만들어 줘야 할까?

   • 적용해 보니 :focus를 먼저 설정해야 :focus-visible의 스타일이 적용된다.

     /* 포커스 적용한 경우 */
     :focus {
       outline: none;
       box-shadow: 0 0 0 0.3rem var(--colorFocusable);
     }
   
     /* 마우스로 클릭했을 때 */
     :focus:not(:focus-visible) {
       box-shadow: none;
     }
   
     /* 키보드로 포커싱 되어 화면에 표시 되어야 하는 경우 */
     :focus-visible {
       box-shadow: 0 0 0 0.3rem var(--colorFocusable);
     }

2. ourStory__emailRegistration에 <br>에 넣어 줬다. 문장이 한 문장이기 때문에 ourStory__headline와 같이 스크린리더 사용자에게 도움을 주기 위해 role="text"를 사용한다.

3. 인풋에 position으로 위치를 잡을 떄 rem을 사용하는 것이 아닌 px값을 사용한다. 왜? 위치를 고정해야 하기 때문이다. 그렇다는 것은 알지만 rem 단위로 값을 잡아도 괜찮지 않을까? rem도 고정값이잖아?

4. 도구 에러 갑자기 내 코드 무시하는 척 하면서 다 적용시켜 주는건데 왜...? 속성 변경도 못하게 하는건데 왜... 이유라도 알려줘야지....

5. input뿐만 아니라 link 같은 경우에도 padding 값을 em 값으로 계산 할 때 px 값을 16으로 나눈 것이 아니라 해당 컨텐츠에 설정되어 있는 글자 크기 px 값으로 나누었다. 또 잊어버린 것 같으니 다시 기억하기

6. input 스타일링 흐름을 다시 기억하자. 기본적으로 디자인 시안에 나와있는 타이포 그래피 디자인을 적용 → 보더 적용 → 너비 적용 → 포지션 위치 지정 → 패딩값 적용 → / 이제 브라우저에서 확인하면서 포커스 됐을 때 확인하면서 레이블 글자 크기 및 포지션 위치 변경 → 인풋에서 레이블과 인풋의 입력 텍스트 겹치지 않도록 패딩탑 조절

7. 인풋의 포커스 스타일링을 할때 좀 더 쉽게 결과를 확인하는 방법?