[전자책] 스타일시트, 이미지 편

전자책 스타일시트, 이미지 편

EPUB2에서 안정적으로 작동하는 CSS 속성을 고려하여 이미지에 적용할 수 있는 스타일시트를 아래에 작성하겠습니다.

/* 이미지의 최대 너비를 부모 요소의 100%로 설정 */
img {
  max-width: 100%;
  height: auto;
}

/* 이미지를 가운데 정렬 */
img.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* 이미지 왼쪽 정렬 */
img.float-left {
  float: left;
  margin-right: 10px;
}

/* 이미지 오른쪽 정렬 */
img.float-right {
  float: right;
  margin-left: 10px;
}

/* 이미지 테두리 추가 */
img.border {
  border: 1px solid #ccc;
}

/* 이미지와 텍스트 사이의 간격 */
img.margin {
  margin: 10px;
}

이 스타일시트에서는 EPUB2에서도 안정적으로 지원되는 기본적인 CSS 속성들만을 사용했습니다. 여기에는 이미지의 크기 조절, 정렬, 테두리, 마진 등을 설정할 수 있습니다. 이 스타일시트를 사용하면 EPUB2 환경에서도 이미지를 효과적으로 관리할 수 있을 것입니다.

 

XHTML에서 스타일시트 적용

 

스타일시트의 클래스를 HTML 요소에 적용은 다음과 같이 합니다. 클래스를 적용하려는 HTML 태그 내부에 class 속성을 추가하면 됩니다. 예를 들어, 위에서 제공한 스타일시트를 사용한다고 가정하겠습니다.

 

가운데 정렬을 원하는 이미지에 center 클래스 적용

이렇게 하면 해당 이미지는 img.center 클래스의 스타일을 따르게 됩니다.

<img src="example.jpg" class="center">

 

왼쪽 정렬을 원하는 이미지에 float-left 클래스 적용

이 이미지는 img.float-left 클래스의 스타일을 따르게 됩니다.

<img src="example.jpg" class="float-left">

 

테두리를 원하는 이미지에 border 클래스 적용

이 이미지는 img.border 클래스의 스타일을 따르게 됩니다.

<img src="example.jpg" class="border">

 

여러 클래스를 동시에 적용

이 이미지는 center와 border 클래스 두 가지를 동시에 적용받아, 가운데 정렬되면서 테두리도 생깁니다.

<img src="example.jpg" class="center border">

 

정리

클래스를 이런 식으로 적용하면 HTML 요소에 원하는 스타일을 효율적으로 부여할 수 있습니다. EPUB2에서도 이러한 방식으로 클래스를 적용할 수 있으므로, 스타일 관리가 더욱 용이해집니다.