[CSS 스타일 샘플] 상하 중앙 정렬

카테고리 없음 2020. 1. 20. 09:01

오늘은 상하 중앙 정렬 문제 하나 드려봅니다.

저도 할 때 마다 잊어서 정리해 두고 필요할 대마다 찾아볼 생각으로 올리는거예요 ^^;

 

정렬은 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을 쓰면 상하좌우 가운데 정렬이 되지요.

 

상자 안에서 상하 중앙 정렬을 해야할 때 유용한 스타일이니 꼭 기억해 두세요.

설정

트랙백

댓글

Sigil 1.0.0 버전 업데이트

카테고리 없음 2019. 12. 23. 09:30

 

드디어 Sigil이 1.0.0 버전이 되었네요.

 

많은 것이 바뀌어서 중요한 변경사항 번역해 봤습니다.

번역 실력은 좋지 않아 핵심만 추려 의역합니다. 오역 있어도 이해하세요 ^^;

 

  • Upon initial load, the epub structure that exists will be loaded and kept in its "as-is" state, moving and renaming nothing
    EPUB 구조를 바꾸지 않습니다. 이전 버전은 Text, Images, Fonts 등 구성요소를 Sigil이 지정한 폴더로 옮겼는데 이제느 EPUB의 구조를 그대로 가져옵니다. 
  • The BookBrowser will still show the Text, Images, Styles, Fonts, Audio, Video, and Misc "folders" but these are now "virtual folders" that simply organize the existing resources by type but do not restrict their actual location within the epub.
    Book Browser에서는 기존대로 Test, Images, Fonts... 등의 구조를 유지합니다. 하지만 이는 구성요소를 구분하기 위한 가상 폴더일 뿐 실제로 폴더를 변경하지는 않습니다. 예를 들어 EPUB에 폰트를 Fonts 폴더가 아닌 Text 폴더에 넣었다면 EPUB 내에는 Text 폴더에 그대로 유지됩니다. Book Browser에서만 Fonts라는 가상 폴더에 폰트가 표시됩니다.

  • A new Preferences setting has been added to the Appearance Preferences that will determine if the book folder relative path will be shown in the BookBrowser or its shorter unique name (filename) will be used instead. In either case, the BookBrowser tooltips will always show the file's true book folder relative path. Duplicate file names (in different subfolders) will always show the longer path to be able to differentiate between them regardless of the new Appearance Preference.
    Book Browser에 전체 경로를 표시하는 기능이 추가되었습니다. 폴더 구조를 그대로 유지하지만  Book Browser에 구성요소 별로 구분을 하는 대신 파일의 전체 경로를 볼 수 있습니다.

  • A Tools menu item has been added to standardize any epub already loaded to Sigil's old structure
    EPUB2, EPUB3 파일을 새로 만드는 버튼입니다. 전엔 EPUB3를 만들려면 설정에서 EPUB3로 지정해 줘야 됐고, EPUB3 지정 후에는 EPUB2로 만들 때 다시 설정을 바꿔야 했는데 이젠 버튼으로 EPUB2, EPUB3를 바꿀 수 있습니다. 

  • A Tools menu item has been added to allow a user to design a custom "empty" epub layout
    EPUB 구조를 편집자가 만들 수 있는 기능이 추가되었습니다. 새로 만들기 할 때 편집자가 구성해 놓은 구조로 EPUB을 시작할 수 있게 됐네요. 이제 Javascript 등이 Misc로 들어가는걸 편집자 마음대로 바꿀 수 있게 돼네요.
  • A "Move" context menu item has been added to BookBrowser to enable moving of resources to where you want them to be.
    파일도 편집자 마음대로 폴더를 이동할 수 있습니다.

  • A "Rename" context menu item has been added to BookBrowser to enable renaming of the NCX and OPF resources.
    NCX와 OPF 파일 이름도 바꿀 수 있습니다. content.opf, toc.ncx로 알고 계신 분들이 많은데 이 파일도 이름을 마음대로 바꿀 수 있거든요. 1.0 버전부터는 이름 바꾸는 기능이 추가되었어요.
  • The python plugin interface has been extended to support all of this as documented in the new Sigil_Plugin_Framework_rev12.epub and online at MobileRead in our Plugin Development thread.
    플러그인 개발자를 위한 기능이에요. 플러그인 프레임워크가 바뀌었고 프레임워크 설명 파일 버전도 업데이트 됐다네요.

이번 버전에서는 반가운 변화가 많이 보이네요^^

특히 EPUB2를 EPUB3로 바꾸는 기능은 정말 꼭 필요한 기능이었어요.

울 나라 유통사들도 이제 EPUB3 포멧으로 넘어가야 할텐데... 언제까지 폐기된 EPUB2 포멧을 고수할까요?

 

설정

트랙백

댓글

  • 깜사 2020.01.14 18:07 ADDR 수정/삭제 답글

    쓰신 글 참고하여 따라해보려합니다. 초반 부터 막혀서 막막한데요.
    txt 파일에서 본문을 붙여넣을 때 북뷰에서 넣어야 쉬운 것 같은데, 시질1.0버젼에서 북뷰와 소스뷰를 바꾸는 아이콘이나 메뉴를 못 찾겠네요. 도와주실 수 있나요.

    • 깜사 2020.01.14 19:09 수정/삭제

      자문자답입니다.

      https://github.com/Sigil-Ebook/Sigil/releases/tag/0.9.16

      https://github.com/Sigil-Ebook/Sigil/wiki#yes-book-view-is-really-gone

      https://github.com/Sigil-Ebook/PageEdit/releases/tag/1.0.0

    • 전자책 제작과 편집에 관한 모든 정보 내.맘.대.로 2020.01.15 11:29 신고 수정/삭제

      궁금한 점 있으면 댓글 보다는 메일로 보내주세요 ^^ 댓글은 잘 안봅니다 ^^;;

      Sigil 0.9.14버전까지 책보기가 있고 0.9.15부터 책보기가 외부 편집기로 변경됐어요.
      https://sigil-ebook.com/2019/12/17/pageedit-1-0-0-release/
      페이지 에디터 설치 후 외부편집기 연결하면 돼요. 외부 편집기가 불편하면 0.9.14 버전을 이용하세요.

리디움 Cloud Reader로 홈페이지에 전자책 뷰어 만들기

Tip&Tech 2019. 12. 18. 09:03

홈페이지에 전자책 뷰어를 만들어 전자책을 올리고 싶다는 문의가 종종 들어오네요.

다양한 목적이 있기 때문에 목적에 딱 맞는 방법을 모두 설명드리긴 어렵겠지만,

간단히 전자책 뷰어를 만들어 올리는 방법을 소개해 드리려고 합니다.

 

제가 이용하려는 뷰어는 Readium에서 개발하고 있는 Cloud Reader입니다.

Readium 뷰어는 다양한 환경에 적용 가능한 EPUB3 표준 뷰어입니다.

많은 전자책 뷰어가 리디움 소스를 활용하고 있고,

W3C EPUB PUB 워킹그룹에 적극적으로 활동하며 EPUB3 표준을 준수하고 있습니다.

그리고 오픈소스여서 무료로 누구나 쉽게 뷰어를 만들 수 있지요.

물론, 상업적인 용도로 쓰려면 어마어마한 회원 가입비가 들긴 하지만요 ^^

 

홈페이지에 전자책 뷰어를 만들어 전자책을 올리고 싶다는 문의가 종종 들어오네요.

다양한 목적이 있기 때문에 목적에 딱 맞는 방법을 모두 설명드리긴 어렵겠지만,

간단히 전자책 뷰어를 만들어 올리는 방법을 소개해 드리려고 합니다.

 

제가 이용하려는 뷰어는 Readium에서 개발하고 있는 Cloud Reader입니다.

Readium 뷰어는 다양한 환경에 적용 가능한 EPUB3 표준 뷰어입니다.

많은 전자책 뷰어가 리디움 소스를 활용하고 있고,

W3C EPUB PUB 워킹그룹에 적극적으로 활동하며 EPUB3 표준을 준수하고 있습니다.

그리고 오픈소스여서 무료로 누구나 쉽게 뷰어를 만들 수 있지요.

물론, 상업적인 용도로 쓰려면 어마어마한 회원 가입비가 들긴 하지만요 ^^

 

리디움 뷰어 공식 샘플

https://readium.firebaseapp.com/?

 

리디움 Cloud Reader 를 이용하면 누구나 이런 홈페이지를 만들 수 있습니다.

기본 세팅 하는데 30분도 안걸려요. 물론 책 목록을 넣으려면 시간이 좀 걸리지만요.

 

1. Readium Cloud Reader 소스 파일을 다운로드 받습니다.

 

https://github.com/readium/readium-js-viewer/releases

 

2. 다운 받은 파일을 압축을 풀어 홈페이지에 올립니다. Cloud-Reader, Readium 등 폴더를 만들어 올리는게 좋아요.

3. http://homepageurl/cloud-reader/index.html을 입력합니다.

4. 그럼 리디움 뷰어가 보일거예요.

 

참 쉽지요 ^^

그런데 Readium Cloud Reader는 아직 책 업로드를 지원하지 않습니다.

크롬 뷰어를 쓰면 업로드가 될것 같긴 한데... 나중에 시간 되면 Worker 파일을 뜯어볼까 생각중이에요.

하지만 아직은 파일 업로드가 되지 않아요.

 

그래서 책을 넣으려면 추가 작업이 필요합니다.

 

5. EPUB파일 하나를 압축 해제합니다.

6. Cloud-Reader 하위 폴더에 epub_content 라는 폴더를 만드세요.

   - cloud-reader 대신 다른 폴더명을 썼다면 그 폴더에 풀면 돼요.

   - epub_content일 필요는 없습니다. 하지만 폴더명을 바꾸면 다른 설정도 바꿔야 하니 편히 가려면 epub_content 로 만드세요 ^^

7.epub_content 펄더에 압축 해제한 파일을 업로드 합니다.

 

여기까지 했다면

 

http://homepageurl/Cloud-Reader/index1.html?epub=epub_content/Content-Folder

 

브라우저 주소 창에 이렇게 입력해 보세요.

당연히 Clound-Reader와 Content-Folder명은 제대로 입력을 해 줘야되요.

이렇게 입력하면 책이 보일거예요.

 

http://lesiles.synology.me/cloud-reader/index1.html?epub=epub_content/MO_mobydick

 

이렇게요.

 

여기까지 따라왔다면 90% 끝났습니다.

 

이제 서재 목록을 만들어 줘야되요.

 

8. 첨부 파일을 다운받으세요

   - epub_lib_test.opds : 제가 테스트용으로 사용한 모비딕 서재 목록

   - epub_library.opds : 리디움 공식 샘플(https://readium.firebaseapp.com/?)에 사용한 서재 목록

 

9. 파일명은 epub_library.opds  이걸 사용하세요. 저처럼 파일명을 바꾸려면 index.html 파일을 수정해 줘야합니다.

   

<entry>

  <title>Mobydick</title>

  <author>

    <name>test</name>

  </author>

  <link type="image/jpeg" href="http://lesiles.synology.me/cloud-reader/epub_content/MO_mobydick/OEBPS/Images/Moby-Dick_FE_title_page.jpg" rel="http://opds-spec.org/image/thumbnail"/>

  <link type="application/epub" href="http://lesiles.synology.me/cloud-reader/epub_content/MO_mobydick/" rel="http://opds-spec.org/acquisition"/>

  <updated>2016-02-12T00:00:00Z</updated>

  <id>READIUM_OPDS_0123456789_1</id>

</entry>

 

이게 책 하나의 세트입니다.

 

- 책 제목

<title>Mobydick</title>

 

- 저자 명

  <author>

    <name>test</name>

  </author>

 

- 서재의 섬네일 표지 이미지

<link type="image/jpeg" href="http://lesiles.synology.me/cloud-reader/epub_content/MO_mobydick/OEBPS/Images/Moby-Dick_FE_title_page.jpg" rel="http://opds-spec.org/image/thumbnail"/>

 

- 콘텐츠 URL

<link type="application/epub" href="http://lesiles.synology.me/cloud-reader/epub_content/MO_mobydick/" rel="http://opds-spec.org/acquisition"/>

 

- 업데이트 날짜(등록 날짜를 쓰면 됩니다. 안써도 돼요)

  <updated>2016-02-12T00:00:00Z</updated>

 

- 책 ID(ISBN이나 UID를 쓰면 됩니다)

  <id>READIUM_OPDS_0123456789_1</id>

 

10. opds 파일을 만들었다면 'epub_content' 폴더에 업로드 하세요.

11. 이제 서재 목록을 다시 들어가 보세요.

    http://homepageurl/cloud-reader/index.html

    이렇게 입력하면 책 표지가 보일거예요. 그리고 표지를 누르면 책이 열립니다.

 

    http://lesiles.synology.me/cloud-reader/index1.html

    이렇게 보이면 제대로 만든거예요^^

 

홈페이지에 서재 만들기 어렵지 않지요^^?

설정

트랙백

댓글