[CSS] @media 사용하는 방법

---

😢 내가 겪은 문제

나는 역시 개발을 못하는 구나. 

하고 느끼는 부분이 CSS 다. 참 모바일 뷰 대응을 진짜 너무 못하겠다.

진짜 모바일 뷰 대응하다가 머리카락 다 빠질것 만 같다. 핸드폰은 왜 크기가 다 다른지 정말 싫다.

뭐 하나하면 다른 화면에서 문제고 수정하면 또 다른 화면에서 문제다.

일단 해결방법 중 하나가 CSS @media 를 이용하는 방법인데, 이 방법도 많이 사용한다고 하니, 기록하려고 한다.

/* 화면 너비가 320px 이하일 때 스타일 적용 */
@media (max-width: 320px) {
    /* 스타일 */
}

/* 화면 너비가 768px 이하일 때 스타일 적용 (일반적인 모바일 기기) */
@media (max-width: 768px) {
    /* 스타일 */
}

/* 화면 너비가 768px 이상, 1024px 이하일 때 스타일 적용 (태블릿 및 작은 데스크탑) */
@media (min-width: 768px) and (max-width: 1024px) {
    /* 스타일 */
}

/* 화면 너비가 1024px 이하일 때 스타일 적용 (보통의 데스크탑) */
@media (max-width: 1024px) {
    /* 스타일 */
}

/* 화면 너비가 1440px 이상일 때 스타일 적용 (큰 데스크탑) */
@media (min-width: 1440px) {
    /* 스타일 */
}

/* 화면 너비가 1920px 이상일 때 스타일 적용 (매우 큰 데스크탑) */
@media (min-width: 1920px) {
    /* 스타일 */
}

이정도로 나눠서 화면 크기별로 Class 나 Id 값을 이용해 CSS 를 조절해 주면 된다.

나는 이렇게 해도 참 화면크기가 너무 다양해 대응하기가 쉽지 않은 것 같다. 그래서 나에게 제일 어려운건 CSS 인 것 같다.