[TIL 2022] CSS 반응형 - 미디어쿼리

유현진·2022년 5월 24일
0

CSS

목록 보기
1/1

학습한 내용

  • CSS로 반응형 페이지 만들기
  • CSS에 @media 쿼리를 사용
  • @media (최대, 최소 너비) {스타일을 설정}
  • 화면의 조건을 만족하면, css가 작동하는 것이 가능함

학습 내용 중 어려웠던 점

  • 스크린 화면의 크기에 따른 최적화가 어려움
  • min과 max의 구분이 헷갈림
  • 화면의 크기와 해상도의 차이가 어떤 차이인지 헷갈린다.

해결 방법

  • @media(max-width:800px) 뜻은 화면이 800px보다 작아졌을 때를 의미함
  • @media(min-widthL800px) 뜻은 화면이 800px 이상 일때
  • 디바이스별 최적화 참고 링크

학습 소감

  • 최적화를 고려하여 코드를 짜야겠다.
profile
print('dullgi')

0개의 댓글