4/1 TIL

오늘의 나는 무엇을 잘했을까?

weekly mission을 완료했다!

오늘의 나는 무엇을 배웠을까?

• CSS calc()

  • calc()는 css속성값을 계산하는 함수이다. 사칙연산이 가능하다.

    /* property: calc(expression) */
    width: calc(100% - 80px);

  • 주의할 점

    • 연산자를 사용할 때는 항상 좌우 space를 둔다. 생략시 마이너스값으로 인식되기 때문

    • 폰트 사이즈를 calc()로 넣을 때에는 항상 피연산자 중 하나는 상대단위가 있어야 한다.

      h1 {
        font-size: calc(1.5rem + 3vw); /* 브라우저 사이즈에 반응하는 가변 사이즈 폰트 */
      }

      
      
• div안에 img감쌀 때 주의점
  • div를 액자와 같이 사용하기 위해 div안에 img를 감싼 후 img크기와 딱 맞게 div크기를 설정할 시 꼭 선행되어야 하는 작업이 바로 img를 block요소로 바꿔주는 것이다. img태그가 기본적으로 inline요소이기 때문에 line-height가 기본값으로 잡혀 있어서 아무리 딱 맞게 div에 넣어줘도 밑에 5px만큼의 여백이 생기기 때문이다.
    
    
• height: fit-content

  • min-content

    • max-content와 min-content는 해당 요소의 콘텐츠에 의해 너비가 결정됨
    • 컨텐츠가 넘치지 않고 상자에 넣을 수 있는 최소 크기
    • 컨텐츠 내에서 가장 긴 단어가 너비가 된다.⇒ 고유한 최소 너비(The intrinsic minimum width.)

  • max-content

    • 모든 컨텐츠를 포함하기 위해 필요한 크기

  • fit-content

    • 가용 너비를 차지하지만, max-content는 초과하지 않는 크기⇒ "The box will use the available space, but never more than max-content" 를 의역(fit-content - MDN 에서 발췌한 내용)
    • max-content와 auto의 하이브리드 모드처럼 동작
    • 가용 너비가 부족하지 않은 경우 max-content 처럼 동작, 가용 너비가 부족할 경우 auto 처럼 동작

    출처 :

    🏡 fit-content in CSS _ welcoming

• 반응형 웹을 테스트 할 때는 크롬 창을 줄여가며 하지말고 모바일뷰 모드를 들어가서 해야한다. 정확도에 차이가 있기 때문!

오늘의 나는 어떤 어려움이 있었을까?

Weekly mission 진행 중 반응형웹이 잘 돌아가는 지 확인하기 위해 단순히 크롬 브라우저 창을 닫았다 늘렸다 반복했다. 잘 되는 듯 보여 그대로 push하고 머지했는데, 이후 크롬 모바일뷰 모드에서 보니 반응형이 망가지는 것을 확인하였다. 앞으로 꼭 반응형 개발시에는 모바일뷰 모드에서 테스트해야겠다.

내일의 나는 무엇을 해야할까?

• WIL 작성
• 주간 복습