[TIL] 2023. 1. 30. 반응형 CSS

✅ 오늘 한 일

• 프로젝트 마무리
• 발표회 & 회고
• 리팩토링
• 쉬면서 피자 먹기

💡 오늘 배운 것

반응형 CSS

• 100vh일 때 header를 제외한 main 높이
  height: calc(100vh - ${HEADER_HEIGHT});

• 모바일 기기 확대 방지

  <meta
    name="viewport"
    content="width=device-width, initial-scale=1,
  maximum-scale=1, user-scalable=no
  "
  />

• 아이폰은 버튼 텍스트 색상이 지정되어 있어 커버 해주어야 함.
  1) index에서 css를 일괄 적용하는 방법, 2) 데스크탑, 모바일 환경에서 같은 스타일링을 보장하는 라이브러리를 사용하는 방법이 있을 것 같다.

  button {
    color: black;
  }

• 이미지 드래그 방지

  img {
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
  }

• 이미지 셀렉트 방지

  img {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
  }

🏃‍♀️ 학습할 것

• CORS 오류란?

💭 오늘의 잡담

• 이번 프로젝트 결과물 짱 맘에 든다. 포트폴리오에 추가할 수 있도록 리팩토링 해봐야지 😊
• 욕심부리지 않고 핵심 기능을 완성도 있게 구현한 것이 신의한수였다.