모바일과 PC에서 각각 동작하는 CSS

| 2024.05.23
    .daerew { 
        background: #EEE;
        text-align: justify;    
        }
    @media only screen and (max-width: 767px) {  /* 모바일에서 작동 */
        .daerew { padding: 0 3rem 5rem 3rem; }
        }
    @media all and (min-width:767px) { /* 데스크 탑에서 작동 */
        .daerew { padding: 0 7rem 5rem 7rem; }
        }

 

오래 전에는 홈페이지를 만들 때 모니터 크기가 다르고 브라우저가 다른 것을 고려해야 했다면,

이제는 모바일을 고려해야 하고 오히려 모바일 중심으로 만드는 것이 대세기 때문에 미디어쿼리가 필수적이다.

  • 나그네 2024.11.30 03:28
    제로보드 시절 많은 도움을 받았던 대류님. 문득 생각이나서 검색해보니 이 블로그를 발견. 잘 지내고 여러모로 성공 하신 것 같아 기분이 좋아집니다. 얼굴도 이름도 모르지만 오래전 인터넷을 통해 알게 된 분의 소식이 왜 이렇게 반가운 건지.