📒 [ TIL ] 2022.08.09_79일차 # 최종 프로젝트 개선(3)

[ 2022-08-09 (화) 오늘의 TIL ]

[ Today Project ]

drf 백엔드개발 + 프론트개발
: 이번 프로젝트는 팀프로젝트로 시작합니다.

[ Today Learn ]

• 모바일이용시 미디어쿼리 적용
• 배포완료

✏️ 내가 배운것, 얻은것

• CSS 미디어 쿼리 (Media Query) 사용법

다양한 디바이스들이 웹브라우징을 지원하면서 웹에서 화면의 해상도에 따라 유연하게 컨텐츠를 배치하는 기술이 점점 중요해지고있다.

< 기본문법 >

미디어 쿼리는 CSS에서 어떤 스타일을 선택적으로 적용하고 싶을 때 사용하며
@media 키워드로 시작하는 미디어 쿼리의 문법 구조는 아래와 같다.

@media (조건) {
  스타일
}

스타일 부분에는 일반적인 CSS 코드가 들어가는데, 조건 부분이 만족될 때는 스타일이 적용되고, 만족되지 않을 때는 스타일이 무시된다.

< 좁은 화면 스타일링 >

핸드폰처럼 좁은 화면에서만 특정 스타일을 적용하고 싶을 때는 화면의 최대 너비를 조건으로 하여 미디어 쿼리를 사용할 수 있다.

다음과 같이 max-width 속성을 이용하여 미디어 쿼리를 작성해주면 된다.

@media (max-width: 800px) {
  .small-tomato {
    background-color: tomato;
  }
}

< 넓은 화면 스타일링 >

반대로 TV처럼 넓은 화면에서만 특정 스타일을 적용하고 싶을 때는 화면의 최소 너비를 조건으로 하여 미디어 쿼리를 사용할 수 있다.

다음과 같이 min-width 속성을 이용하여 미디어 쿼리를 작성해주면 된다.

@media (min-width: 800px) {
  .large-tomato {
    color: tomato;
  }
}

< 화면 너비에 따라 엘리먼트 숨기기 >

미디어 쿼리는 특정 엘리먼트를 화면의 너비에 따라 숨길 때도 많이 사용한다.

다음과 같이 max-width 속성과 min-width 속성을 이용하여 미디어 쿼리로 작성해주면된다.

@media (max-width: 600px) {
  .desktop {
    display: none;
  }
}

@media (min-width: 1000px) {
  .mobile {
    display: none;
  }
}