갤러리 게시판의 썸네일 이미지 사이즈를 수정하는 방법
갤러리 게시판의 목록이미지 사이즈를 수정하는 방법에 대해 알아보겠습니다.
디자인관리 > 디자인 편집창에서 CSS 수정하기
디자인편집창 > /css/module/board/listPackage_gallary.css 갤러리게시판 썸네일 이미지의 크기를 지정해주는 css파일을 수정합니다.
아래 소스를 참고하여 css 수정으로 이미지의 사이즈를 늘리거나 줄일 수 있습니다. (width : 가로 / height : 세로)
.xans-board-listpackage-8 .xans-board-list-8 li { width:20%; }
/* 한 라인에 노출하고 싶은 갯수만큼 비율을 변경해주세요. (100%를 기준으로 20%는 5개씩, 25%는 4개씩, 33.3%는 3개씩 나열됩니다.) */
.xans-board-listpackage-8 .xans-board-list-8 li .imgLink img { display:block; width:187px; height:255px; margin:0 auto 10px; border:1px solid #ececec; } /* 이미지의 가로,세로 */
이미지 사이즈 수정 후 올린 이미지가 선명하지 않다면?
업로드한 이미지가, 설정한 화면보다 작을 경우 이미지가 선명하게 보이지 않습니다.
이미지를 큰 사이즈로 올리거나, CSS를 수정하여 해결할 수 있습니다.
※ 게시판관리 > 갤러리게시판 설정 > 자동 리사이징 기능
갤러리 게시판은 목록 이미지의 리사이징 기능을 제공하고 있습니다. 리사이징은 원본 이미지를 설정한 값에 맞게 잘라내는 기능입니다.
리사이징을 사용하는 경우, 위에서 설명한 css의 width, height값과 동일하거나 큰 값으로 설정 값을 넣어야 선명한 이미지로 출력할 수 있습니다.
만약 css에서 지정된 값보다 리사이징 설정한 가로/세로 값의 크기가 작다면 작은 이미지로 들어가게 되어 흐릿한 이미지로 출력될 것입니다.
아래 이미지는 css에 작성된 값과 동일한 가로:187px, 세로:255px 로 리사이징하여 등록한 이미지 입니다.