1.2.7.5 CSS 템플릿 활용하기 - 목록 스타일 편집

EPUB3에서는 EPUB2에서 사용하던 TOC를 없애고 Navigation이라는 HTML 기반의 목차를 사용한다. Navigation은 일반 HTML 파일과 동일하게 편집을 하면 되지만 목차 목록을 정리하기 위해서는 <ol>과 <li> 태그를 사용하게 된다. <ol><li> 태그는 목록 편집을 간편하게 해 주지만 기본 스타일이 정해져 있어 원하는 글머리 숫자가 붙고, 하위 목록은 들여쓰기가 된다.(참고 : http://epubguide.net/27)

1. 과일
   1. 사과
      1. 홍옥
      2. 아오리
      3. 부사
   2. 배
   3. 감
2. 야채
   1. 토마토
   2. 오이
   3. 당근

아래에서는 목록에서 유용하게 사용할 수 있는 스타일을 설명하도록 하겠다.

1. 글머리 없애기

ol {

list-style-type : none;

}

.nav_ol {

list-style-type : none;

}

글머리가 자동으로 붙으면 편할 수도 있지만 편집에 제약이 생긴다. 글머리 스타일을 없애고 편집자가 직접 글머리를 붙이고 싶을 때 사용할 수 있는 스타일이다. ol 태그에 직접 스타일을 적용하면 스타일이 적용된 페이지의 모든 글머리가 사라진다. 목차 같은 특정 항목에만 글머리를 없애려면 클래스를 지정해서 스타일을 적용한다.

2. 들여쓰기 간격 조절

ol {

padding : 0;

list-style-type : none;

}

.nav_ol {

padding : 0;

list-style-type : none;

}

글머리 스타일은 기본으로 왼쪽 여백이 지정돼 있다. 편집자가 여백을 조절하고 싶다면 ol 태그에 padding을 0으로 준다. 그러면 기본으로 설정되어 있는 여백이 사라진다. 이후 사용자가 원하는 만큼 왼쪽 여백을 li 태그에 지정해서 사용할 수 있다.

li {

margin-left : 1em;

}

.nav_li {

margin-left : 1em;

}

이렇게 ol 태그에서 padding을 0으로 설정하고 li 태그에 margin-left를 1em 설정하면 기본 여백 대신 단계별로 1em씩 여백이 생긴다. margin 대신 margin-left를 사용한 이유는 margin을 사용하면 상하좌우 여백이 함께 지정되기 때문에 상하 간격도 벌어지기 때문이다. 필요에 따라 margin,margin-left 등을 선택해서 사용하면 된다. li 태그에 margin-left를 1em 적용하면 하위 목록으로 내려가면서 보두 1em 씩 여백이 생기고, .nav_li 처럼 클래스를 지정하면 클래스가 지정된 항목에만 1em의 여백이 적영된다.

참고로 padding을 0으로 하고 다른 여백을 두지 않으면 글머리는 아래처럼 기본 영역 바깥에 위치하기 때문에 기본으로 붙는 글머리가 표시되지 않을 수 있다. 그렇기 때문에 padding을 0으로 설정할 때는 list-style-type : none;을 함께 지정하기를 권한다.

padding : 0;을 하면 글머리는 뷰어 바깥 영역에 표시되어 글머리가 없는 것처럼 보일 수 있다.

1. 과일
   1. 사과
      1. 홍옥
      2. 아오리
      3. 부사
   2. 배
   3. 감
2. 야채
   1. 토마토
   2. 오이
   3. 당근

* ol 스타일 중 일부는 브라우저에 따라 다르게 표현될 수 있습니다. 정확한 스타일 확인을 위해서는 PC브라우저를 이용하길 권합니다.