브라우저 크기에 따라, 이미지를 변경할 수 있나요?
본문
디자이너님께서 원하시는데, 제 역량에 벅차는지 검색해도 안나오고. 해본적도 없어
이렇게 자문을 구합니다 ㅜ^ㅜ
html5를 통해 자체적으로 반응형웹을 제작을 하였는데.
헤더/콘텐츠/풋터 부분은 브라우저 크기에 따라 유동적으로 변하도록 css값을
잘 넣어줬습니다!!
그러나 ...........
이미지슬라이드 부분을 단순히 오픈소스를 사용하지 않고, 자체적으로 만들었고
단순히 무브슬라이더 값을 줘서 움직이게 구현했습니다.
문제는, 이미지값을 반응형(320px 모바일 상태)으로 할때에는 이미지의 가로x세로 사이즈가
너무 작아지는 경향이 있어서요.
이 부분에 대해 일반적인 이미지를 안보이게 처리하고,
모바일전용 이미지를 불러오도록 하는것을 원합니다.
이미 모바일전용 이미지는 모두 만들어져있지만. 제 경험 부족으로 어떻게 이 난관을
헤쳐나가야할지 모르겠습니다.
총 이미지슬라이드가 3개가 있는데요.
이걸 각 이미지별로 브라우저의 크기가 작아졌을때 변경하는 방법이 있는지에 대해 여쭙습니다.
답변 4
기본적으로 html에 두 이미지를 다 입력해 놓고, (각각 클래스를 다르게 해서)
css 미디어쿼리를 통해 보이고 싶지 않은 사이즈에 display:none; 하시면 사이즈에 맞춰 두 이미지를 바꿔서 보여주게 됩니다~
웹디님께서 처음 시안잡아주셨을때는 이와같이 크기가 작아짐에 따라 미디어쿼리에 작업을 해주셨는데.
문제는 이것을 슬라이드에 적용하려니 일이복잡해진겁니다 -_- .. 헐퀴
지금 http://www.usefulparadigm.com/2014/11/03/processing-images-on-responsive-web/
반응형웹에 이미지처리하는 정보를 찾았지만. 이해가 제대로 되지가 않아 다시 자문을 구하고 있네요 ㅜㅜ
슬라이드를 자체적으로 만드셨다고 했는데 그 부분이 왜 잘 안되는지 소스를 알 수 없으니
조언을 드릴 수가 없네요.
일반적으로 많이 쓰이는 bxslider 나 flexslider로 작업한 사이트 알려드릴게요,
안에 소스들 보고 참고해보세요~
(PC용과 작은 사이즈의 이미지를 따로 두고 사이가 바뀜에 따라 이미지를 변경했습니다.)
flexslider : http://www.meiko-community.jp/
bxslider : http://www.alpha-come.co.jp/ec/index.html
일단은 반응형웹페이지를 만드는 이유가 모바일기기나 태블릿같은 기기를 고려하기 때문이니까 PC에서의 창크기에 모두 대응한다는 생각을 좀 버리면 부담감이 현저히 줄어듭니다.
그누보드5에서 모바일인지 아닌지를 판단하는 함수가 이미 작성되어 있어서 이를 응용해서 모바일일때 특정 클래스를 붙이거나 출력할 이미지를 변경하거나 하는 식으로 풀이가 가능합니다.
혹은, 작성하신 슬라이더 스크립트를 현재 페이지의 창크기를 구해 특정 크기 이하에서는 출력할 이미지를 변경하시는 방법으로 분기를 두셔도 되고요. 물론 이때는 처음 창크기뿐만 아니라 창크기가 변할때에 대한 이벤트도 함께 고려하셔야 겠죠.
보통 반응형 이미지 만들 때...
width:특정px ; height:auto 값을 줍니다.
그리고,
이미지의 최대 너비는 max-width 속성으로,
최소 너비는 min-width 속성으로 지정해서 사용합니다.
그러면 딱히 기존 pc이미지 이외에, 브라우저 크기가 작아졌을때,
기존 이미지를 불러오는방법은 딱히 존재하지 않는가요?
음. 신비님 말씀대로 하니까 어느정도 제가 생각한것은 나왔는데
웹디가 맘에 안들어했숩니다 ㅜ.ㅜ
