10월 07, 2022
Blogger 이미지 작업 | 방법과 비망록
게시글에 있어서 이미지는 흥미와 가독성을 높이는 중요한 요소이다. 게시글 화면 공간을 문단과 이미지를 아름답고 효율적으로 배치하는 방법을 알아본다.
갤러리 만들기
간단하게 다음과 같이 아름다운 갤러리를 페이지마다 독자적으로 만들 수 있다. 응용 여하에 따라 여러 개도 가능하다.
스크립트 삽입
블로그 템플릿 html의 </head> 앞에 아래의 스크립트와 링크를 넣는다.
<script src='https://storage.cloud.google.com/jgallery/jquery.justifiedGallery.min.js'/>
<link href='https://storage.cloud.google.com/jgallery/justifiedGallery.min.css' rel='stylesheet'/>
스크립트 코딩
다음의 스크립트를 페이지(게시글)에 넣으면 된다. 스크립트 수정으로 이미지의 크기나 배열 개수를 자유자재로 조절할 수 있다. 방법은 아래에 있는 상세 페이지(링크)를 참고하면 된다.
<script>
$('#fruit').justifiedGallery({
rowHeight : 150,
lastRow: 'justify',
captions: true,
rel: 'uniqueName',
captionsShowAlways : true,
margins : 5,
nonVisibleOpacity: 0.7
});
</script>
$('#fruit').justifiedGallery({
rowHeight : 150,
lastRow: 'justify',
captions: true,
rel: 'uniqueName',
captionsShowAlways : true,
margins : 5,
nonVisibleOpacity: 0.7
});
</script>
이미지 수정
이미지를 업로드하고 이미지 <div>를 아래의 상세 페이지를 참고하여 수정한다.
상세 페이지 보기
이미지 감싸기
이미지 왼쪽이나 오른쪽에 문단(텍스트)을 정렬하려면 먼저 이미지 html의 <img> 넓이를 백 퍼센트(width:100%;) 이하로 설정하고, ‘float:left;’나 ‘float:right;’ 태그를 지정하면 된다.
그런 다음 이어서 문단을 작성하면 자동으로 오른쪽이나 왼쪽에 문단이 정렬된다. 이미지와 문단 사이의 여백은 padding을 지정하면 된다. 기본적으로 문단이 이미지 전체를 감싸지만 ‘overflow:auto;’를 설정하면 문단이 왼쪽이나 오른쪽에 정렬된다.
그런 다음 이어서 문단을 작성하면 자동으로 오른쪽이나 왼쪽에 문단이 정렬된다. 이미지와 문단 사이의 여백은 padding을 지정하면 된다. 기본적으로 문단이 이미지 전체를 감싸지만 ‘overflow:auto;’를 설정하면 문단이 왼쪽이나 오른쪽에 정렬된다.
여러 개 배열
이 글 첫머리에 피력한 갤러리 만들기로 이미지를 가로로 여러 개 배열할 수 있으나 아래와 같이 캡션(설명글)을 넣기 위해서는 다음의 방법이 필요하다.
최상위 <div> 안에 이미지<div>를 포함하면 가로로 이미지가 배열된다. 이미지 설명글인 ‘캡션’을 한쪽에만 넣으면 크기가 달라지므로 같이 넣어야 한다.
반드시 최상위 <div> 는 display:flex;와 justify-content:center;가 지정 되어야 하고, 하위 <div> (텍스트)에는 width:0;과 min-width:100%;로 설정되어야 이미지 넓이와 문단 폭이 같아진다. 문단 좌우에 여백은 min-width:90%; 처럼 수정하면 된다.
이미지 관련 문제
커서
이미지 위에 커서가 작동하지 않으면 overflow 테그 여부를 점검해야 한다.
파일 용량
이미지 개수가 많으면 파일 용량이 커져 속도 저하 등의 문제가 생기므로 용량 대비 화질이 좋은 ‘webp’ 포맷 방식으로 변환이 바람직하다.
중앙 정렬
블로그 문서편집 과정에서 이미지를 삽입할 경우 기본적으로 좌우 여백이 설정되는 문제를 자동 또는 수동으로 해결한다.
- html 편집창에서 이미지의 좌우 margin 값을 지우거나 0으로 처리해도 되고 ,
- 탬플릿 css에 ,separator 클래스를 만들어 좌우 margin 값을 0으로 하면된다.
alt 태그와 title 태그
- alt 태그는 시각장애자 들을 위한 특수태그로 이메일 에서만 볼수 있다.
- title 태그는 마우스를 오버할때 호버되는 이미지의 정보 출력으로 간략하게 작성하는 것이 효과적이다.
object-fit
- contain
- fill
- cover
- scale down
- unset
- inherit
가로 최대 확장
스마트폰에서 특정 이미지를 여백 없이 가로로 최대한 확장하여 가독성을 높일 수 있다.
<style>
#wide{
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
</style>