2022년 01월 26일
수정하기
문서 생성 2022-01-26 22:53:48 최근 수정 2022-01-26 22:58:55
📚 오늘 도전하고, 배운 것
CSS
Pseudo-classes
:valid
,:invalid
,:in-range
를 사용할 땐 색맹 및 저시력 사용자는 상태 변화를 제대로 보지 못하거나 놓칠 수도 있으므로 상태 변화를 나타내기 위해 색상에만 의존하는 것은 좋지 않음. (특히 빨간색/녹색)nth-child
,nth-of-type
을 사용할 때 인덱스 값은 1부터 시작first-child
는 첫 번째 자식 요소를 선택하는데 해당 타입인 첫 번째 요소를 선택하려면:first-of-type
을 사용.parent div:first-of-type
,.parent
의 자식 요소 중 첫 번째div
태그 요소
border-radius
박스의 코너를 둥글게 만들 때 사용
.el {border-radius: 1em 2em 3em 4em;/* border-top-left-radius, border-top-right-radius *//* border-bottom-right-radius, border-bottom-left-radius */}
Focus
- 포커스 스타일은 요소의 기본 스타일과 대비되는 것으로 설정하는 것이 매우 중요하다.
- 일반적으로
outline
속성을 이용한다.box-shadow
로outline
을 대체하면 안된다. 윈도우의 고대비 모드에서 표시되지 않는다.
Shadows
- 이미지의 곡선을 따라 그림자를 넣으려면
drop-shadow
필터를 사용하면 된다.
z-index와 쌓임 맥락
- flexbox 또는 grid에서는
position: relative
추가 없이z-index
를 설정할 수 있다.
🤔 학습하면서 궁금하거나 어려웠던 점
🌅 내일은 무엇을?
- 백준 알고리즘 문제 풀기
- Vue 3 학습
- Learn CSS 학습
🖋 log
- 확진자가 엄청나게 늘기 시작했다. 오늘 나가서 걷는 운동만 했는데 살짝 불안하기도 하다. 빠른 시일 내에 일상회복이 되었으면 좋겠다. 3차 예약한 날에 컨디션이 안좋아서 취소를 했는데 다시 예약하려니 2월부터 가능했다. 집에 돌아와서 재빨리 예약을 했다.