1.2.6.6 CSS 기초 - 이미지 스타일
이미지에 적용할 수 있는 스타일은 그리 많지 않다. CSS3를 활용하면 이미지 갤러리처럼 다양한 효과를 낼 수 있지만 일반적인 책 편집에는 간단한 스타일이 주로 사용된다.
전자책 편집에서 많이 사용하는 스타일은 정렬과 float(HWP의 어울림 기능)이 있다.
이미지 정렬 기능은 문단 정렬과 다르지 않다. 그래서 문단 정렬을 위해 만든 스타일을 그대로 사용할 수 있다. 만약 이미지에 테두리나 그림자를 두고 싶다면 border 속성을 사용할 수 있다.
▶ 문단 정렬 스타일 예시
.txt_center {
text-align : center;
}
.txt_right {
text-align : right;
}
.txt_left { /* 기본 정렬이 왼쪽으로 되기 때문에 왼쪽 정렬은 없어도 된다 */
text-align : left;
}
.img_border {
border : solid blue 2px;
margin : 0;
}
왼쪽 정렬 <p class="text_left"><img src="sample.jpg /></p>
가운데 정렬 및 테두리 <p class="text_center"><img class="img_border" src="sample.jpg /></p>
오른쪽 정렬 <p class="text_right"><img src="sample.jpg /></p>
전자책을 편집할 때 정렬보다 더 많이 사용하는 스타일이 float이다. float 스타일을 적용하면 HPW에서 어울림으로 이미지를 처리했을때와 같은 효과를 낼 수 있다. float 스타일 역시 다른 스타일과 함께 사용해서 이미지를 꾸밀 수 있다. float 스타일은 이미지에만 사용할 수 있는게 아니다. 문단의 왼쪽이나 오른쪽에 보충설명을 위한 텍스트상자를 넣고 싶을때도 유용하게 사용할 수 있다.
책을 편집하다 보면 이미지에 설명을 추가해야 하는 경우가 있다. 이때 caption 스타일을 미리 만들어 두명 유용하게 활용할 수 있다.
▶ float 스타일 예시
img {
width : 100%; /*이미지가 할당한 영역보다 크다면 이미지 크기를 할당 영역에 들어가도록 해야함*/
}
.float_left {
float : left;
}
.float_right {
float : right;
border : solid 1px grey;
}
.txt_float_left { /*float을 활용한 보충 설명용 텍스트 상자 */
float : left;
width : 30%;
border : solid 1px grey;
margin : 5px; /*테두리 바깥쪽 여백*/
padding : 10px;/*테두리 안쪽 여백*/
}
.caption {
font-size :0.8em;
color : red;
text-align : center;
display :block;
}
▶ float 스타일 적용 결과
float:left 적용
float:right 적용
전자책을 편집할 때 정렬보다 더 많이 사용하는 스타일이 float이다. float 스타일을 적용하면 HPW에서 어울림으로 이미지를 처리했을 때와 같은 효과를 낼 수 있다. float 스타일 역시 다른 스타일과 함께 사용해서 이미지를 꾸밀 수 있다.
전자책을 편집할 때 정렬보다 더 많이 사용하는 스타일이 float이다. float 스타일을 적용하면 HPW에서 어울림으로 이미지를 처리했을 때와 같은 효과를 낼 수 있다. float 스타일 역시 다른 스타일과 함께 사용해서 이미지를 꾸밀 수 있다.
□ 이미지 정렬 코드 예시
<p class="float_left"><img src="sample.jpg" /><span class="caption">float:left 적용</span></p>
<p class="float_right"><span class="caption">float:right 적용</span><img src="sample.jpg" /></p>
<p>전자책을 편집할 때 정렬보다 더 많이.....</p>
<p>전자책을 편집할 때 정렬보다 더 많이.....</p>
<p class="txt_float_left">전자책을 편집할 때 정렬보다 더 많이.....</p>
전자책을 편집할 때 정렬보다 더 많이 사용하는 스타일이 float이다. float 스타일을 적용하면 HPW에서 어울림으로 이미지를 처리했을 때와 같은 효과를 낼 수 있다. float 스타일 역시 다른 스타일과 함께 사용해서 이미지를 꾸밀 수 있다.
전자책을 편집할 때 정렬보다 더 많이 사용하는 스타일이 float이다. float 스타일을 적용하면 HPW에서 어울림으로 이미지를 처리했을 때와 같은 효과를 낼 수 있다. float 스타일 역시 다른 스타일과 함께 사용해서 이미지를 꾸밀 수 있다.
전자책을 편집할 때 정렬보다 더 많이 사용하는 스타일이 float이다. float 스타일을 적용하면 HPW에서 어울림으로 이미지를 처리했을 때와 같은 효과를 낼 수 있다. float 스타일 역시 다른 스타일과 함께 사용해서 이미지를 꾸밀 수 있다.
전자책을 편집할 때 정렬보다 더 많이 사용하는 스타일이 float이다. float 스타일을 적용하면 HPW에서 어울림으로 이미지를 처리했을 때와 같은 효과를 낼 수 있다. float 스타일 역시 다른 스타일과 함께 사용해서 이미지를 꾸밀 수 있다.
전자책을 편집할 때 정렬보다 더 많이 사용하는 스타일이 float이다. float 스타일을 적용하면 HPW에서 어울림으로 이미지를 처리했을 때와 같은 효과를 낼 수 있다. float 스타일 역시 다른 스타일과 함께 사용해서 이미지를 꾸밀 수 있다.
전자책을 편집할 때 정렬보다 더 많이 사용하는 스타일이 float이다. float 스타일을 적용하면 HPW에서 어울림으로 이미지를 처리했을 때와 같은 효과를 낼 수 있다. float 스타일 역시 다른 스타일과 함께 사용해서 이미지를 꾸밀 수 있다.
이 외에도 이미지에 활용하기 좋은 스타일로 box-shadow가 있다. box-shadow는 이미지의 상하좌우에 그림자를 그려주는 스타일로 잘 활용하면 이미지에 멋진 효과를 줄 수 있다.
.img_shadow {
float :left;
box-shadow: 10px 15px 5px grey;
border : solid 1px grey;
}
box-shadow는 테두리 주위에 그림자를 나타내 주는 스타일이다.
그림자 효과를 잘 활용하면 보다 입체적인 편집을 할 수 있다.