내맘대로의 EPUBGUIDE.NET에서 편집자의 의도를 그대로 살려 전자책을 제작해 드립니다.
종이책의 편집 스타일을 최대한 유지하며, 팝업 주석 처리, 이미지 확대 축소 등 전자책의 장점을 반영하여 전자책을 제작합니다. 탬플릿을 사용하지 않고, 책 한권 한권 고유 스타일을 살리기 때문에 전자책에서도 종이책 디자인을 느낄 수 있습니다.
한국출판문화진흥원의 [텍스트형 전자책 제작 지원 사업] 선정 도서는 ‘제작 난이도별 제작비 산정 기준에 근거하여’ 제작 단가를 산정하고, 일정에 맞춰 제작을 해 드리니 많은 문의 바랍니다. 자세한 내용은 여기로: https://www.epubguide.net/notice/309오래 전 작성된 글은 현재의 Sigil 버전과 차이가 날 수 있습니다. 등록 일자를 확인 하고 1년 이상 지난 글은 변경된 내용이 있는지 확인하시기 바랍니다.
오늘은 상하 중앙 정렬 문제 하나 드려봅니다.
저도 할 때 마다 잊어서 정리해 두고 필요할 대마다 찾아볼 생각으로 올리는거예요 ^^;
정렬은 2가지 형태가 있습니다.
좌 우 정렬. 이건 가운데 정렬이라 하고, center로 쓰지요.
text-align : center;
가장 많이 쓰는 스타일 중 하나이기도 합니다.
중앙 정렬은 영문으로는 있는데 한국어로는 이거다 하고 정해놓은 용어가 없는 것 같아요.
중앙인데 가운데라고 쓰기도 하고...
영문으로는 vertical-align이라는 스타일이 있고, 이 스타일의 중앙 값을 middle로 씁니다.
text-align은 좌우의 가운데(center)지만 vertical-align은 상하의 가운데(middle)를 뜻해요.
좌우 가운데, 상하 가운데 하면 헷갈리니까, 저는 좌우는 가운데 정렬로, 상하는 중앙 정렬로 쓸게요.
앞에 좌우, 상하 없이 가운데 하면 좌우, 중앙 하면 상하 정렬입니다.
그런데 vertical-align은 적용이 잘 안될거예요.
예를 들어 이런거.
장 제목을 표현하려면 상하 중앙 정렬이 필요합니다.
EPUB에서는 이렇게 보입니다.
눈에 확 들어오도록 세로 길이를 크게 늘려봤어요.
이러면 중앙정렬이 어떤건지 딱 보이지요?
중앙 정렬은 생각보다 까다로와요.
vertical-align이 아무때나 쓸 수 없기 때문이지요.
vertical-align은 inline 속성에서만 쓸 수 있습니다.
그래서 box나 block 속성에서는 적용이 안되지요.
가장 쉬운건
display : table-cell;
vertical-align : middle;
속성을 줘서 inline화 시키는거예요.
하지만 인라인 속성화 시키면 display:block; 속성을 써서 줄바꿈을 못합니다.
저는 주로 중앙정렬 할 때 box-orient를 썼어요.
display: box;
box-orient: horizontal;
box-align: center;
display: -webkit-box;
-webkit-box-orient: horizontal;
-webkit-box-align: center;
근데 이렇게 하면 table-cell처럼 상자 안쪽에도 영향을 줘서 display : block; 이 적용되지 않아요.
물론, 줄바꿈을 블럭 태그로 나눠서 처리하면 되지요.
이러면 제목을 한 줄에 표현할 수 없다는 문제가 생기지만요.
이럴 때 flex를 쓸 수 있습니다.
display:flex;는 박스 모델에서 점전 비중이 높아지고 있어요.
box, talble, block 등의 속성들이 flex 하나로 모두 처리 가능해졌지요.
.title_sec {
height : 4em;
border-left : 2px solid #000000;
border-radius : 3em;
padding-left : 1em;
font-size : 1.2em;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-justify-content: center;
justify-content: center;
text-indent : 0;
margin-bottom : 3em;
box-sizing : border-box;
}
.title_sec .title_sec_No {
display : block;
}
<h3 class="title_sec"><span class="title_sec_No">첫 번째 기술: </span>다른 여성과 경쟁하지 마라</h3>
사실
.title_sec .title_sec_No {
display : block;
}
이 스타일도 필요 없어요. 이미 flex가 적용됐기 때문에 block을 주지 않아도 줄바꿈이 됩니다.
table-cell에서 쓸 수 없던 text-align:center;도 쓸 수 있어요.
text-align을 쓰면 상하좌우 가운데 정렬이 되지요.
상자 안에서 상하 중앙 정렬을 해야할 때 유용한 스타일이니 꼭 기억해 두세요.
