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는 테두리 주위에 그림자를 나타내 주는 스타일이다. 

    그림자 효과를 잘 활용하면 보다 입체적인 편집을 할 수 있다.