What I Learned Today
오늘 수업 시작은 어제 했던 알림 UI를 조금 변경하는걸로 시작했다.
중간에 들어온 컨테이너에 display:contents 속성을 주면 그 컨테이너는 무시되고 자식들이 아이템화 된다.
그리고 텍스트에 직접 그라디언트 효과를 주는 방법도 배웠다.
.text {
/* 배경을 주고 clip을 한 다음 글자 색을 투명으로 준다. */
background-img : linear-gradient(145deg, #1bf008 20%, #03cca8 80%);
background-clip : text;
color : transparent;
}
- focus와 focus-visible는 가상요소로 사용자가 마우스로 누르거나 키보드로 접근했을때 동작한다.
- focus와 focus-visible의 차이
- focus : 마우스 또는 키보드로 포커스를 했을 때 동작한다.
- focus-visible : 마우스로 눌렀을 때는 동작하지 않고 키보드로 포커스해야 동작한다.
- focus와 focus-visible의 차이
원래는 focus 속성만 존재했는데 개발자들이 마우스로 클릭할때 포커스가 나와서 디자인을 할때 이쁘지 않다고 사용하지 않았다.
하지만 focus를 사용하지 않으면 접근성이 떨어진다.
따라서 접근성과 사용성을 모두 충족하기 위해 focus-visible이 생겼다.
focus-within은 자식 요소를 선택했을때 부모 요소에 접근할 수 있도록 해주는 속성이다.
has 속성도 배웠는데 focus-within와 비슷하지만 조금 다르다.
focus-within은 포커스 상태에만 적용된다.
has는 범용적으로 다양한 상태를 지정할 수 있다. 따라서 유연하다.
The Problem I Faced
실습을 하면서 아직 이해하지 못한 속성들이 많은것같았다.
What I Tried to Do
이전에 내가 작성했던 포스트들과 공식 문서들을 찾아보며 진행했다.
How I Solved It
해결했다기보다는 속성들을 모두 외우지는 못하더라도 열심히 공부를 해서 손에 익혀야겠다고 생각했다.
물론 강사님을 보며 따라해서 해결을 하긴 했다.
So
Aha Moments
사용자 입력에서 keydown과 keypress에서는 동작을 실행하게 해서는 안된다.
그 이유는 사용자의 마음이 바뀌었을때 취소를 해야하기 때문이다.
따라서 keyup을 사용하여 동작하도록 해야한다.
요소들을 배치하는 방법이 평소 내가 생각하는 방식이랑 많이 다르다는 것을 알았다.
앞으로는 효율적으로 배치하는 방법을 열심히 고민해봐야겠다.
