워드프레스 테마의 선정과 사용법 3-1 - Front Page의 슬라이더 이미지의 크기 설정

아래는 현재 사용하고 있는 테에마 Freesia에 대한 내용이다.

보통은 테에마 사용 매뉴얼에 최적 보여주기에 대한 이미지 크기를 적어 놓았지만, 실제 그 크기로 설정하여 사용하더라도 보여주는 장치에 따라 디스플레이되는 이미지크기에 변화가 생긴다.

이것은 테에마 개발자마다 제어하는 방식과 기준에 차이가 있어 보인다.
Freesia의 경우 Front Page에 슬라이딩 되는 이미지의 크기는 매뉴얼에 1920 x 768을 추천하는 pixel 로 제시하지만, 실제 보여주는 브라우저 화면에서는 풀 사이즈를 보여주지 않고 상하 좌우 가장자리 일부가 크롭되어 잘려서 보여진다.

그리고 PC나 타블릿 또는 핸드폰등 반응형 테에마이기 때문에 보는 장치의 화면 가로세로 비율 때문에 보여주는 크기도 비례하여 커지고 작아진다.

아래는 PC 의 웹브라우저 경우 가로폭 1024 픽셀 즈음에 슬라이딩 이미지 보여주는 크기가 변화가 생깁니다. 즉 보여주는 크기와 크롭되는 영역에 크게 변동이 생깁니다.
그 중간단계에는 슬라이드 이미지 이외의 보여주는 항목만 줄을 바꾸어 보여주는 변화가 생기며 이미지 자체는 비례하여 크기가 변화되며 보여줍니다. 영역에는 큰 변화가 없다는 얘기입니다.

이미지 디폴트 크기는 1920 x 768을 추천하며, 포스트 내용에는 960 x 600 또는 960 x 1225에 맞추면 됩니다.

주의할 사항은 같은 행에서 보여주는 이미지의 경우 가로 세로 크기를 동일하게 맞추어 주어야 무리없이 보여주게 됩니다.

참고로...
슬라이딩 이미지의 크기나 영역의 변화가 원하는대로 안되는 경우에는...
절대치를 입력하여 크롭을 없애는 방법입니다.
즉 아래의 코드를 입력하는 방법입니다.
테에마가 업그레이드되면 이 내용이 없어지기 때문에 다시 설정해야 합니다.

Appearence>Edit CSS에 들어가서

/*
Welcome to Custom CSS!

To learn how this works, see http://wp.me/PEmnE-Bt
*/

.main-slider .image-slider {
background-attachment: inherit;
background-position: inherit;
min-height: 560px;
}

굵은체 부분을 입력합니다.
즉 세로크기를 고정합니다. 560px를 원하는 수치로 바꾸시면 됩니다. 400 이나 500 으로...