[CSS 스타일 샘플] 이미지로 테두리 만들기

테두리에 이미지 넣는 방법은 여러번 올렸는데, 묻는 분들이 많네요.

 

이런 테두리 그릴 때 이미지를 씁니다.

물론 border를 그릴 수도 있지만.... 생각 하기도 싫네요 ㅎㅎ

 

이 테두리는 이 이미지로 만들었습니다.

이미지 크기는 상관 없어요.

모양만 같으면 돼요.

 

테두리 이미지는 border-image를 씁니다.

 

.box_TOC {

border : 10px solid transparent ;

border-image: url("../Images/TOC_border.png") 50 stretch;

padding : 10px;

}

 

이때 테두리의 두께는 이미지 두께와 전혀 상관 없어요.

border로 두께를 주면 됩니다.

border : 10px solid transparent;

border 두께에 따라 모양은 유지한 채 테두리 두께가 달라집니다.

 

투명한 테두리를 만들 때 transparent 속성을 씁니다.

그런데 간혹 border-image 태그를 안먹는 뷰어가 있더라구요.

이런 뷰어는

border : 10px solid #FF0000;

이렇게 넣어줘도 돼요. border-image가 적용되면 이미지로, 적용 안되면 빨간 테두리가 그려집니다.

요즘은 웬만한 뷰어가 border-image 적용이 되니 투명하게 그려줘도 됩니다.

 

전자책에서는 이렇게 보여요.

설정

트랙백

댓글

반투과 LCD(RLCD) 탑재한 전자책 단말기

https://goodereader.com/blog/reviews/unboxing-the-hisense-q5-rlcd-android-tablet

 

Unboxing the Hisense Q5 RLCD Android Tablet

Hisense has released their first tablet with an transflective LCD display. It needs ambient light reflection to achieve screen clarity, so you need a light source. There is no backlight display, so unlike traditional LCD screens, there is nothing shining i

goodereader.com

 

주류를 이루는 전자책 단말기는 EPD, e-ink라는 상표명으로 더 알려진 전자잉크 디스플레이 제품입니다. 킨들, 리디 페이퍼, 크레마 등이 EPD를 사용하지요.

EPD는 인쇄와 유사한 방식, 그리고 해상도를 제공해 책을 볼 때 좋지만 반응속도가 느리고 화면에 잔상이 많이 남습니다. 책 보는 용도 외에 다른 목적으로 사용하기 어렵지요. 20~30만원대 기기를 책만 보자고 살 사람은 그리 많지 않습니다.

 

Hisense Q5는 EPD의 대안이 될 수 있을 것 같습니다.

화질이 어떨지 궁금하네요.

Hisense Q5는 LCD입니다. 그런데 백라이트가 없어요. 지금 보고 있는 모니터나 휴대폰에 백라이트를 꺼보세요. 그래도 희미하게 내용이 보일거예요. LCD나 LED도 백라이트 없이 내용을 표시합니다. 다만, 읽기 힘들 정도로 어두울 뿐이지요.

 

요즘은 많이 쓰이지 않지만, LCD 전자시계 기억하는 분들이 계실거예요. LCD 계산기는 지금도 많이 쓰지요.

LCD 전자시계, 계산기의 LCD 화면은 백라이트가 없어도 글자가 잘 보입니다. 흰색을 표현하지 않아도 되기 때문에 디스플레이의 배경을 검은 색으로 만들 필요가 없어 가능한 방식입니다.

LCD 배경이 은빛에 가깝고, 글자는 굵은 검정색으로 되어 있지요. 

 

화소도 엄청 크지요. 200ppi, 300ppi 수준이 아니에요. 회사원들이 많이 쓰는 탁상용 계신기는 화소 하나가 가로 2~3mm, 세로 5~10mm 정도로 일반 디스플레이의 화소와 비교하면 축구공과 축구장 만큼 차이가 납니다. 

 

그래서 백라이트 없이 밝은 곳에서도 글자가 잘 보입니다.

 

제가 차고 있는 Suunto Ambit의 디스플레이도 RLCD예요. 이건 화소가 전자계산기 보다 작아요. 그래도 200ppi에는 턱없이 부족합니다. 이 LCD를 디스플레이로 만든게 RLCD입니다. 중국의 한 업체가 이 기술을 발전시켰나봅니다.

 

RLCD는 백라이트가 없어 책을 볼 때 눈이 편안하고, 반응 속도도 EPD보다 빠릅니다. 동영상도 볼 수 있는 수준이지요. 백라이트가 없으니 EPD만큼은 아니어도 배터리가 오래 갈 것 같습니다. EPD보다 더 선명한 컬러 지원도 됩니다. 다만, 얼마나 밝게 보일지는 의문입니다. LCD 특성상, 어두운 새벽녘에 글자를 보는 듯한 느낌이 아닐까 싶어요.

 

이 기술이 적용 된 기기가 출시되었으니 확인해 볼 수 있겠지요.

 

설정

트랙백

댓글

[CSS 스타일 샘플] 많이 쓰는 세로 제목 스타일

https://www.epubguide.net/notice/309

내맘대로의 EPUBGUIDE.NET에서 편집자의 의도를 그대로 살려 전자책을 제작해 드립니다.

 

종이책의 편집 스타일을 최대한 유지하며, 팝업 주석 처리, 이미지 확대 축소 등 전자책의 장점을 반영하여 전자책을 제작합니다. 탬플릿을 사용하지 않고, 책 한권 한권 고유 스타일을 살리기 때문에 전자책에서도 종이책 디자인을 느낄 수 있습니다. 

한국출판문화진흥원의 [텍스트형 전자책 제작 지원 사업] 선정 도서는 ‘제작 난이도별 제작비 산정 기준에 근거하여’ 제작 단가를 산정하고, 일정에 맞춰 제작을 해 드리니 많은 문의 바랍니다.

 

지원사업 때문에 일이 몰려서 한동안 정신 없었네요.

 

많이 쓰는 스타일이 들어와 소개합니다.

이런 세로 제목 스타일이에요.

 

유통 중인 책을 보면 이런 제목은 이미지로 많이 넣던데,

텍스트로 간단히 스타일을 잡을 수 있습니다.

 

 

전자책으로는 이렇게 보여요.

 

 

CSS 속성은 이렇습니다.

h3 {

    writing-mode: vertical-lr;

    font-family: "제목";

    font-size: 1.3em;

    color: #EC7289;

    ...

    ...

}

 

writing-mode라는 속성을 사용했어요.

이 속성이 글자를 세로로 표현해 줍니다.

 

그런데 영문이나 문장부호는 가로로 놓일 거예요.

그래서

 

.txt_eng_spacing {

letter-spacing : 0;

writing-mode: initial;

}

 

이렇게 영문 스타일은 writing-mode가 적용되지 않도록 스타일을 잡았지요.

 

Writing-mode는 국내 유통사 뷰어에서 문제가 생겨 거의 안썼는데

지금은 리디북스 안드로이드 뷰어 외에는 잘 표현됩니다.

리디 안드로이드 뷰어도 몇가지 설정만 해 주면 잘 나오고요.

 

세로로 글자를 표현하고 싶을 때 writing-mode를 잊지 마세요~

설정

트랙백

댓글