원본)


큰 태블릿)


작은 태블릿)


모바일)



여기서 잠깐! 잘려지는 이유를 살펴볼까요?

먼저 이것은 의도된 사항입니다!

반응형 기본스킨의 메인 상단 풀사이즈 슬라이드배너의 이미지 가로크기는 1920px을 권장하고 있습니다.
태블릿이나 모바일같이 화면 크기가 작은 디바이스에서 보게 되면 이미지의 크기는 화면에 맞추어 작아지게 되는데,
모바일의 경우 가로 360px까지 줄어들게 되어 원본 크기 대비 약 1/5 정도의 크기로 작아지게 됩니다.
이 때, 이미지 안에 텍스트가 있다면 배너의 핵심 콘텐츠인 텍스트의 크기도 함께 작아지게 되어,
크기가 너무 작아져 내용을 확인하기 어려울 수 있습니다.

이러한 현상을 방지하기 위해 태블릿 이하의 화면에서는,
단계적으로 이미지 좌우의 일부를 잘라내어 이미지의 크기가 줄어드는 비율을 낮추어,
이미지 내의 핵심 콘텐츠인 텍스트의 가독성을 높이고 있습니다.

모바일에서 최대 얼마만큼 잘려지는지 다음과 같습니다.

 

• 해결방안 01)

  위의 배너 가이드에서 붉은 색 영역에는 핵심 콘텐츠를 배치하지 말고 치장적인 요소를 배치하는 것이 가장 이상적입니다.

• 해결방안 02)
  이미지가 잘려지지 않기를 원한다면 다음의 css 파일 맨 아래에 코드를 추가하시기 바랍니다.
  파일 : {스킨폴더}/css/user.css

  @media only screen and (max-width:1023px) { /* 큰 태블릿 */
      .wide_visual_slider .sslide img { max-width:100%; margin-left:0; margin-right:0; }
  }
  @media only screen and (max-width:767px) { /* 작은 태블릿 */
      .wide_visual_slider .sslide img { max-width:100%; margin-left:0; margin-right:0; }
  }
  @media only screen and (max-width:479px) { /* 모바일 */
      .wide_visual_slider .sslide img { max-width:100%; margin-left:0; margin-right:0; }
  }

  ( 이 방안은 모바일에서 가독성 이슈가 발생하므로 추천하지는 않습니다. )

• 해결방안 03)
  잘려지는 비율을 조절하고 싶다면 다음의 css 파일 맨 아래에 코드를 추가하고 수치를 조정하시기 바랍니다.
  파일 : {스킨폴더}/css/user.css

  @media only screen and (max-width:1023px) { /* 큰 태블릿 */
      .wide_visual_slider .sslide img { max-width:140%; margin-left:-20%; margin-right:-20%; }
  }
  @media only screen and (max-width:767px) { /* 작은 태블릿 */
      .wide_visual_slider .sslide img { max-width:160%; margin-left:-30%; margin-right:-30%; }
  }
  @media only screen and (max-width:479px) { /* 모바일 */
      .wide_visual_slider .sslide img { max-width:200%; margin-left:-50%; margin-right:-50%; }
  }

  수치 조정 방법)
  한 항목당 %의 합이 100%가 되도록하되, 마이너스의 수치는 균등하게 분배합니다.

  140% -20% -20% = 100%
  150% -25% -25% = 100%

※ 작업이 끝난후 화면을 다시 확인하실때 브라우저 캐시를 제거하고 보시기 바랍니다. ( CTRL + F5 )