수다닷컴

해상도에 따라 양쪽 이미지가 보이게 하려면 어떻게 하나요?

민아 2024.12.03 댓글 6

기본 웹페이지 너비는 1024 정도인데, 더 높은 해상도 모니터에서는 양쪽 이미지가 보이게 하고 싶어요.
낮은 해상도에서는 숨기고 높은 해상도에서는 나타나게 하려면 어떤 속성을 쓰면 될까요?
조언 부탁드립니다~

댓글 6

  • 큰모음 2024.12.03

    모두 정말 감사합니다^^ 많은 도움이 됐어요.

  • 철죽 2024.12.03

    CSS3 미디어 쿼리로 배경 이미지를 정할 수도 있어요. 다만 오래된 브라우저에서는 지원되지 않을 수 있습니다.
    너비가 1024인 래퍼는 작은 해상도에서 가로 스크롤이 생길 수 있으니 너비를 조금 줄이는 방법도 있어요.
    양쪽 이미지가 크면 하나의 이미지로 처리하기 어려울 수 있지만, 래퍼와 body의 배경 이미지를 활용할 수도 있습니다.

  • 진주 2024.12.03

    네, 맞아요 ㅎㅎ 태클을 걸려던 건 아니었는데 그렇게 들렸다면 죄송해요.
    말씀하신 것처럼 CSS로 레이아웃을 처리할 수 있어서 그 방법을 권한 거였어요. 제가 설명을 잘못 썼네요.

  • 희1미햬 2024.12.03

    onresize 이벤트로 처리할 수도 있어요~ 클라이언트에 부담이 크지 않으니 브라우저 호환성을 따져 CSS를 복잡하게 만드는 것보다 스크립트가 편할 수도 있습니다.

  • 가을 2024.12.03

    스크립트로 처리하면 화면 크기가 바뀔 때를 다루기가 까다로울 수 있어요.
    1024px 너비의 div를 가운데 두고 양옆 이미지의 z-index를 뒤로 보내면 화면이 좁을 때 래퍼에 가려지게 할 수 있습니다.
    큰 화면에서는 양쪽 이미지를 볼 수 있어요.

  • 해길 2024.12.03

    스크립트만 고집할 필요는 없어요. 페이지가 열릴 때 브라우저 크기를 확인해 이미지를 보이거나 숨길 수도 있고, 너비를 줄인 뒤 overflow:hidden으로 가릴 수도 있습니다.