2022년 01월 19일

📚 오늘 도전하고, 배운 것

• 《리팩터링(2판)》 - Chapter 02, 03 읽기
  • 리팩터링을 해야 하는 이유와 어떨때 리팩터링을 해야하는지 알 수 있었다. 책 내용 중간중간에 설명하기보다 경험에 의해 알 수 있다는 내용이 많이 나왔는데 나도 그럴 수 있었으면 좋겠다.

CSS

• 상속을 명시적으로 상속하고 제어하는 법
  • inherit 키워드를 사용하면 모든 속성이 상위의 계산된 값을 상속하도록할 수 있다.
  • initial 키워드를 사용하면 속성을 기본값으로 되돌린다.
  • unset 키워드는 속성의 상속 가능 여부에 따라 다르게 동작, 속성이 상속 가능하다면 inherit과 동일하게 동작, 상속이 불가능하다면 initial과 같이 동작
• color
  • 색상 값의 종류
    • 16진수 표기법, #000000, 알파값은 투명도인데 뒤에 2자리를 추가한다. ex) #000080
    • RGB(Red, Green, Blue)
    • HSL(Hue, Saturation, Lightness)
    • 키워드 (148가지 명명된 색상)
• Sizing
  • 숫자로 설정. opacity, line-height, rgb()에서 사용
    • 숫자의 의미는 문맥에 따라 다르다. 예를 들어 line-height를 정의할 때 단위 없이 숫자로 정의하면 숫자는 비율을 나타낸다.
  • 퍼센테이지로 설정
    • margin, padding을 퍼센테이지로 설정하면 상위 요소 너비의 일부가 된다.
    • transform은 transform 속성이 있는 요소를 기반으로 한다.
  • 절대 길이
    • 절대 길이는 동일한 기준에 대해 해석된다. 예측이 가능하다. 인쇄용으로 디자인할 때 유용
      • cm, mm, Q, in, pc, pt, px
  • 상대 길이
    • 퍼센테이지 처럼 기본 값에 대해 계산
    • 상대 길이와 백분율의 차이점은 상황에 따라 요소 크기를 조정할 수 있다는 것이다. 예를 들면 vw(뷰 포트의 너비를 기반으로)같은 단위가 있다.
    • 상대 길이는 반응 특성으로 인해 웹에서 유용
    • em, ex, cap, ch, ic, rem, lh, rlh
    • vw, vh, vi, vb, vmin, vmax
  • Angle 단위
    • degree 값, rad, grad...
  • Resoution 단위
    • dpi: 인치당 도트 수
    • 레티나 디스플레이 같은 고해상도 화면을 감지해서 이미지를 제공할 때 사용

🤔 학습하면서 궁금하거나 어려웠던 점

• rgb() 와 hsl()는 단순히 선호도에 따라 선택하는걸까? 아니면 어떤 이유에서 사용하는지 궁금하다.
  • 📖 https://sujansundareswaran.com/blog/why-hsl-is-better-than-hex-and-rgb
    • 잠깐 서치하니 위 글이 나왔는데 읽어봐야겠다.

🌅 내일은 무엇을?

• 《리팩터링(2판)》 - Chapter 04, 05, 06 읽기
• Learn CSS

🖋 log

• Warp라는 것을 알게되어서 신청했고 오늘 설치할 수 있었다. 근데 한글 입력이 한박자 느리다. 아직 쓸 때가 아닌 듯 하다.