이미지 캡션(자막) 디자인

이미지 기본형

티스토리 이미지의 기본 형태는 아래와 같으면 자막이 작성되어 있는 경우에만 .cap1 구조가 등장한다.

<p style="정렬값">
    <span class="imageblock" style="반응형 이미지설정 값">
        <img src="이미지 경로" style="반응형 이미지설정 값" width="이미지너비" height="이미지높이">
        <span class="cap1" style="이미지 너비에 대응하는 설정 값">자막 내용</span>
    </span>
</p>

간단히 스타일을 추가해보자.

.cap1 {
    padding: 10px 5px;
    font-size: 12px;
    color: #999;
    text-align: center;
}
.cap1:before {
    display: inline-block;
    content: "▲";
    padding-right: 5px;
    font-size: 13px;
}

안쪽 자막

이미지를 감싸고 있는 <p> 태그에 .inner-cap 추가함으로써, 자막을 이미지 안쪽에 배치한다.

.inner-cap .imageblock {
    position: relative;
}
.inner-cap .cap1 {
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 10px;
    color: #fff;
    text-align: left;
    background: #000;
    background: rgba(0,0,0,.4);
    filter: alpha(opacity=40);
}

테두리 추가

이미지를 감싸고 있는 <p> 태그에 .border 추가함으로써, 테두리를 추가한다.

<p style="정렬값" class="border">

.border .imageblock {position: relative;}
.border .imageblock:before {
    content: " ";
    position: absolute;
    top: 1px;
    left: 1px;
    bottom: 1px;
    right: 1px;
    border: 1px solid #fff;
    border: 1px solid rgba(255,255,255,0.2);
    outline: 1px solid #ccc;
    outline: 1px solid rgba(0,0,0,0.2);
}

폴라로이드 형태

이미지를 감싸고 있는 <p> 태그에 .polaroid 추가함으로써, 폴라로이드 형태의 디자인으로 변경된다.

<p style="정렬값" class="polaroid">

.polaroid .imageblock {
    padding: 10px;
    background-color: #fff;
    border: 1px solid #dedede;
    -webkit-box-shadow: 5px 5px 10px rgba(0,0,0,.1);
    box-shadow: 5px 5px 10px rgba(0,0,0,.1);
}
.polaroid .cap1 {
    padding-top: 20px;
    padding-bottom: 10px;
}
.polaroid .cap1:before {
    display: none;
}