2022년 01월 26일

📚 오늘 도전하고, 배운 것

• BAEKJOON-1912

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월부터 가능했다. 집에 돌아와서 재빨리 예약을 했다.