[문의] 대논쟁 철학베틀 스타일

문의가 한참 없다가 2개가 한번에 들어왔어요. 그래서 두번째 문의도 정리해 봤습니다.


문의가 들어온 책은 '대논쟁! 철학 베틀'이에요.


책이 없어 리디북스 미리보기 화면을 보니 이렇게 되어 있네요.



문의 내용은 2개였습니다.


1. 꼭 알아두자 글상자의 테두리는 그릴 수 있겠는데 글상자 위에 있는 '꼭 알아두자' 이미지는 어떻게 테두리에 겹치나?


2. 철학자 이미지 옆에 대화(?) 내용이 나오는데 이건 표로 만드는건가?



* 1번 테두리에 겹친 그림 설명

1번은 저도 자주 사용하는 스타일이에요.

블로그에도 여러번 언급한 적이 있는 스타일입니다.

참고를 하시려면 샘플 파일이 있는 아래 글을 확인해보세요.


http://epubguide.net/206


이게 같은 스타일? 이라고 생각하시는 분은... 안계시겠지요 ^^?

같은 스타일입니다. 이미지 대신 텍스트가 들어가고, 왼쪽이 아닌 가운데라는 점만 다를 뿐 이미지를 테두리 위에 겹치는 원리는 똑같아요.


'대논쟁 철학베틀' 스타일도 만들어 봤습니다. 제가 만든 스타일은 이래요.


.box_note {

border-radius : 15px;

border : 3px solid brown;

margin : 5px;

padding : 5px;

}


.box_title {

margin-top : -25px;

}


<div class="box_note">

<div class="box_title"> <img alt="img_note" src="../Images/img_note.png"/></div>

<p>앨리스는 언니와 함께 강둑에 앉아 있었다. 아무 것도 하지 않고 있자니 점차 몹시 지루해졌다. 언니가 읽는 책을 한두 번 흘깃 보았는데 거기엔 그림도 없고 대화도 없었다. “그림도 없고 대화도 없으면 책이 도대체 무슨 쓸모가 있는거지?”라고 앨리스는 생각했다.</p>

</div>


이미지 상자 위치는 글상자 안쪽에 넣어도 되고 바깥쪽에 넣어도 됩니다. 별 차이 없어요.


<div class="box_title"> <img alt="img_note" src="../Images/img_note.png"/></div>


이 코드를 글상자 바깥에 두고 싶으면 margin-top 대신 margin-bottom을 쓰면 됩니다.



*2번 철학자 이미지 옆 대화 설명


이건 표가 아닙니다.

그냥 이미지 float:left; 처리한거예요.

근데 float:left; 하면 이런 문제가 생겨요.



텍스트가 이미지를 벗어나면 이미지 아래에 붙습니다.

이미지 아래에도 '여백'이 생겨야 하는데 그 공간에 텍스트가 들어차지요.

제가 왜 '여백'을 강조했을까요?

저걸 해결하는 방법은 완전 초보라도 다 아는 여백 속성, margin을 이용하면 되기 때문이에요.

CSS는 응용이 중요하고, 그리고 간단합니다.

여백이 필요하면 여백을 주면 되는거예요.


그래서 이런 스타일이 나왔습니다.

'헉...' 소리 날 정도로 간단하지요?

물론, 저는 다른 스타일은 하나도 안주고, 설명에 필요한 스타일만 넣었기 때문에 간단한거예요. 여기에 글꼴을 넣고, 글자 크기를 바꾸고 줄간격이나 정렬을 추가하면 됩니다.

.img_philo {

float : left;

display: inline-block;

}


.txt_talk {

margin-left : 80px;

}

* 참고로, 설명을 위해 픽셀을 쓰고 이미지 크기도 지정하지 않았어요. 이미지 크기 지정하고, 여백은 이미지 크기에 따라 변하도록 %나 em을 쓰면 더 좋아요. 작은 화면에서는 이미지가 작게, 큰 화면에서는 이미지가 크게 나와야 보기 좋거든요.


여기까지가 '대논쟁, 철학베틀'의 스타일일거예요.

최종 결과물은 이렇습니다.




아마 이 책 CSS 코드를 열어봐도 큰 차이는 없으리라 생각합니다 ㅎㅎ

하지만 이 코드에는 한가지 문제가 있어요.

화면이 가로로 넓을 경우에 철학자 이미지가 위쪽으로 올라갈거예요.



이 문제를 방지하는 코드를 넣었을지 모르겠는데, 샘플만 봐서는 안들어갔을 가능성이 커보이네요.

그래도 별 문제는 없습니다. 최근엔 EPUB뷰어가 이렇게 가로로 긴 화면이 나오도록 하지 않거든요. iBooks나 캘리벌로 책을 열고 가로를 길게 만들면 책과 비슷한 범위에서 1페이지로 자르거나 2페이지로 나눠 보여줍니다. 그러니 저렇게 나온다고 해도 크게 문제되지는 않을거예요.


그래도, 화면이 아무리 넓어도 문제가 생기지 않는게 더 좋지 않을까요?

그리고 편집할 때 코드도 조금 복잡해요. 철학자 얼굴이 들어가는 위치에 똑같은 코드가 반복적으로 들어가야 하거든요.


clear:both; 속성 생각하셨다면 박수~~~

하지만 clear:both;로도 해결되지 않습니다. 그리고 clear:both; 속성은 제대로 모르고 쓰면 오히려 독이 되기도 해요. 몇몇 편집자가 이미지마다 clear:both;를 넣는데, 화면 크기를 마구 바꾸다 보면 이미지가 전혀 엉뚱한 곳에 나오거든요. 유통중인 책에도 이런게 몇종 있습니다.



clear:both:를 쓰면 이런 결과가 나올 수 있어요. 좀 더 가혹한(?) 테스트 환경을 만들어 보면, 이런 결과가 나올 수도 있습니다.


두번째 문장은 두번째 이미지에 와야 하는데 첫번째 이미지에 모든 문장이 붙은 것 처럼 보여요.


<div class="img_philo"><img alt="img001" src="../Images/img001.png"/></div>


<p class="txt_talk">그래서 앨리스는 일어나는 것보다 데이지 꽃다발이나 만드는 게 낫겠다고 생각하고는 (뜨거운 날씨 때문에 몹시 졸리고 바보가 된 느낌이라서 당연히 그럴 수 있었을 것이다), 데이지 꽃을 뽑기 시작했다. 그때, 갑자기 분홍 빛 눈의 하얀 토끼 한 마리가 가까이 뛰어왔다.&nbsp;</p>


<div class="img_philo"><img alt="img002" src="../Images/img002.png"/></div>


<p class="txt_talk">그래서 앨리스는 일어나는 것보다 데이지 꽃다발이나 만드는 게 낫겠다고 생각하고는 (뜨거운 날씨 때문에 몹시 졸리고 바보가 된 느낌이라서 당연히 그럴 수 있었을 것이다), 데이지 꽃을 뽑기 시작했다. 그때, 갑자기 분홍 빛 눈의 하얀 토끼 한 마리가 가까이 뛰어왔다. 그래서 앨리스는 일어나는 것보다 데이지 꽃다발이나 만드는 게 낫겠다고 생각하고는 (뜨거운 날씨 때문에 몹시 졸리고 바보가 된 느낌이라서 당연히 그럴 수 있었을 것이다), 데이지 꽃을 뽑기 시작했다. 그때, 갑자기 분홍 빛 눈의 하얀 토끼 한 마리가 가까이 뛰어왔다.</p>


그리고 코드 문제(라기 보다는 편집상 불편함)도 있습니다.

대화형태고 철학자 얼굴이 100번도 넘게 나오는 책이라면 이미지를 삽입하는 코드가 무한 반복되겠지요.


그래서 저는 이렇게 수정을 했습니다.


<p class="txt_philo01">그래서 앨리스는 일어나는 것보다 데이지 꽃다발이나 만드는 게 낫겠다고 생각하고는 (뜨거운 날씨 때문에 몹시 졸리고 바보가 된 느낌이라서 당연히 그럴 수 있었을 것이다), 데이지 꽃을 뽑기 시작했다. 그때, 갑자기 분홍 빛 눈의 하얀 토끼 한 마리가 가까이 뛰어왔다. </p>

<p class="txt_philo02">그래서 앨리스는 일어나는 것보다 데이지 꽃다발이나 만드는 게 낫겠다고 생각하고는 (뜨거운 날씨 때문에 몹시 졸리고 바보가 된 느낌이라서 당연히 그럴 수 있었을 것이다), 데이지 꽃을 뽑기 시작했다. 그때, 갑자기 분홍 빛 눈의 하얀 토끼 한 마리가 가까이 뛰어왔다. 그래서 앨리스는 일어나는 것보다 데이지 꽃다발이나 만드는 게 낫겠다고 생각하고는 (뜨거운 날씨 때문에 몹시 졸리고 바보가 된 느낌이라서 당연히 그럴 수 있었을 것이다), 데이지 꽃을 뽑기 시작했다. 그때, 갑자기 분홍 빛 눈의 하얀 토끼 한 마리가 가까이 뛰어왔다.</p>


어때요? 코드가 훨씬 깔끔해 졌지요?

txt_philo01 클래스를 철학자별로 하나씩 만들어서 철학자의 대화에 넣어주면 됩니다.

이미지를 무한 반복해서 넣지 않아도 되서 html 코드가 깔끔해 졌어요. 그리고 화면이 올라가는 문제도 해결을 했습니다.



극한으로 가면 여전히 약간의 문제는 보여요. 이건 줄간격을 넓히면 해결되지만 줄간격이 너무 넓으면 본문이 보기 싫기 때문에 적정한 선에서 조절을 하면 됩니다.



텍스트가 위쪽 이미지 아래 바짝 붙는건 이미지 위아래에 투명한 여백을 살짝만 줘도 해결이 되요. margin을 이용해 해결할 수도 있고요.


업그레이드한 스타일을 적용한 최종 결과물은 이렇습니다. 정상적인 가독 상황이라면 업그레이드 해도 차이는 없어요. 하지만 편집 시간이 달라집니다. 100개의 div 태그+ 이미지 태그를 넣는 것 보다는 100개의 clsss를 넣는게 훨씬 간단해요.





업그레이드 스타일은 철학자마다 스타일이 하나씩 있어야 하기 때문에 CSS가 복잡해 질 수 있습니다.

철학자가 100명이고 철학자가 한번씩 나온다면 100명의 CSS를 만들기 보다는 div로 이미지를 넣는게 좋아요.

철학자가 10명이고, 철학자가 수다스러워서 한명당 수십번 얘기를 한다면 이 스타일이 더 좋고요.


업그레이드 스타일이 궁금하신 분은 메일 주세요.


여기 올린 내용은 마음대로 써도 되지만 최소한의 양심은 지켜야 하는데, 그러지 못한걸 몇번 보고 나니 저도 조심스러워지네요.

출처를 밝히는 것 까지도 바라지 않습니다. 참고를 했으면 최소한 '내가 만들었다'라고 하지는 말아야지요.

설정

트랙백

댓글

[문의]패턴(웨이브)을 넣은 테두리

오랜만에 문의가 들어와 만들어봤습니다.


테두리 샘플 이미지


샘플 이미지처럼 위쪽과 왼쪽에만 이런 물결무늬 테두리를 넣을 수 있냐는 문의였어요.

border를 쓰면 실선, 이중실선, 점선 등의 테두리는 만들 수 있는데 물결무늬는 표현이 되지 않습니다. 이런 물결무늬를 표현하려면 border-image 옵션을 써야되요.


border-image 참고 : https://www.w3schools.com/cssref/css3_pr_border-image.asp


이걸 참고해서 코드를 만들면 이렇습니다.


.wave_edge {


border : 30px solid transparent;

margin : 10px;

padding: 5px;

-webkit-border-image: url("../Images/wavebox.png") round;


border-image: url("../Images/wavebox.png") round;

border-image-slice: 36%;

}

 


사용한 테두리 이미지는 이거예요. 설명을 위해 급조한 이미지라 매끄럽지 않지만, 보다 정교하게 만들면 결과물이 더 깔끔하겠지요?


이미지 크기는 중요하지 않습니다. 이미지 크기와 물결무늬 크기는 아무 관계가 없습니다. 다만, 너무 작으면 물결무늬가 커졌을 때 흐릿하게 깨질 수 있으니 낮은 해상도보다 높은 해상도를 권해드려요.


그런데 border-image를 쓰면 이렇게 나옵니다. 문의는 특정면에만 테두리를 치는건데 4면 모두 테두리가 나오지요.




이 문제는 응용력을 조금만 발휘하면 해결할 수 있습니다.

답을 알면 '겨우 이런거야?' 라고 생각할 정도로 아주 아주 쉽지요.


4면 테두리가 아닌 2면만 테두리를 치고 싶다.


borde-left, border-top은 알잖아요.


그럼 border-image-left, border-image-top도 당연히 있을거예요.


.wave_edge {

border-right : 0;

border-bottom : 0;

border-top: 30px solid transparent;

border-left: 30px solid transparent;

margin : 10px;

padding: 5px;

-webkit-border-image: url("../Images/wavebox.png") round;

border-image: url("../Images/wavebox.png") round;

border-image-slice: 37%;

}


border-right : 0; border-bottom : 0;은 없어도 되는데(되야 하는데) 일부 뷰어에서 점선이 생기네요.

그래서 테두리가 필요 없는 부분은 필요 없다고 선언을 해버렸습니다.


제가 사용하는 CSS 속성이나 초보 편집자가 사용하는 CSS 속성은 별 차이가 없습니다. 정말 예외적인 스타일이 아니면 책 한권에 들어가는 속성은 거의 비슷해요.

다만 초보 편집자는 응용을 잘 하지 못합니다. CSS는 제한된 속성을 얼마나 잘 응용하느냐에 따라 결과물이 엄청난 차이를 보입니다.


아래는 특정 면만 테두리를 적용한 결과물이에요. 교보와 알라딘 뷰어에서 캡쳐했습니다.


이건 알라딘 뷰어에서 본 결과


이건 교보ebook 뷰어에서 본 결과입니다.



설정

트랙백

댓글

알츠하이머의 종말

책 제목 : 알츠하이머의 종말

제작 포인트 : 전형적인 스타일의 책


알츠하이머의 종말은 경제경영/자기계발 류의 전형적인 스타일을 갖고 있습니다. 


1. 본문과 다른스타일의 문단 인용구

2. 목록 스타일의 인용구

3. 이미지와 이미지 설명

4. 표

5. 박스 형태의 글상자

6. 팝업 주석

7. 한글-외국어(영어, 한자 등) 병용 표기

8. 괄호 설명

9. 여러 단계의 소제목...


교과서 같은 편집 스타일이라 제작 결과물을 공유합니다.


부 제목 페이지는 이렇게 2페이지로 되어 있습니다. 

이걸 전자책에 그대로 넣으면 쓸모 없는 페이지 넘김이 발생해 독자들이 불편해요.

전자책을 안읽는 사람은 모르겠지만, 전자책을 읽는 분들은 불필요한 페이지 로딩이 반복되는게 많이 불편하거든요.




그래서 이렇게 수정을 했습니다. 

부 제목 페이지를 하나로 합쳐 종이책 스타일을 살리면서 전자책에 어울리도록 만들었습니다.

2페이지에 담긴 내용을 한페이지로. 그래서 부 제목을 한번에 넘길 수 있도록 했어요.

* 교보 뷰어에서 캡쳐하니 워터마크가 들어가네요.


목차 페이지는 별로 손댈게 없어 최대한 종이책 스타일을 살렸습니다. 


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


많은 책들이 장 제목의 번호에 스타일을 줍니다. 이 책도 장 번호 스타일이 독특합니다. 단순해 보이지만 이런 스타일은 잡기 어렵지요. 이미지로 넣는다면 글자 크기를 변경할 때 이미지 크기도 같이 변경하도록 해야합니다. 이미지의 배경색을 투명으로 하면 사용자가 배경색을 바꿔도 어색하지 않아요. 


그리고 장의 첫번째 단락에는 이미지가 들어갔습니다.

글자 모양이 다르거나 이렇게 이미지가 들어간 책이 많이 있지요.

이 이미지도 글자 크기를 바꾸면 글자 크기와 같은 비율로 바뀝니다. 

배경색을 없애 독자가 배경색을 바꿔도 이미지가 하얀 네모로 보이지 않아요.


* 이미지 배경을 없애면 글자 크기나 배경색이 바뀌어도 글머리 기호 같은 이미지는 하얀 네모로 표시되지 않습니다. 글자 크기와 이미지 크기를 연동시켜 글자를 확대하거나 축소해도 이미지는 글자 비율에 맞춰 자동으로 확대/축소 됩니다.  



이 책은 목록 스타일의 인용구가 많습니다.

목록 스타일도 글머리 번호와 글머리 기호로 구분돼 있습니다.


글머리 번호 중에 강조가 들어간 경우도 있습니다. 


인용구는 위, 아래, 왼쪽만 여백을 줬습니다. 글자 크기는 본문보다 작게. 종이책 편집을 그대로 살렸습니다. 


이미지와 이미지 설명입니다.

이미지 설명은 본문보다 작은 글씨로 이미지 폭에 맞춰 넣었습니다. 


이 책에 들어간 표는 한 칸에 들어있는 내용이 많지 않고 2단~3단으로 열이 많지 않습니다.

반면 글자가 많고 판형이 조금 큽니다. 그리고 2페이지 이상 걸쳐있는 표가 많지요. 그래서 표를 이미지로 넣을 경우 스마트폰에서는 글자가 작아 읽기 불편합니다.


그래서  이미지로 넣지 않고 표로 넣었어요. 표로 넣을지, 이미지로 넣을지는 표에 따라 달라집니다. 이 책은 이미지 보다는 표로 들어가는게 가독성에 좋다고 판단했습니다. 




글상자가 많지는 않습니다. 하지만 이렇게 회색이나 패턴 배경이 들어가 있습니다. 




본문 안에 글상자가 들어간 경우도 있습니다. 

본문 안에 들어간 글상자는 배경색이 아니라 패턴이 있는 배경이미지 입니다. 



글상자가 단독으로 들어가면 패턴 배경이 확실하게 보입니다. 


팝업주석입니다.

팝업주석을 넣을 때는 주의해야합니다. 예스24 안드로이드 버전에서는 팝업 주석이 링크로 연결되거든요. 그래서 팝업과 링크 모두 포함하는게 좋습니다. 팝업 주석이 지원되는 뷰어는 팝업으로, 링크만 지원하는 뷰어는 링크로 이동합니다.


교보, 리디, iBooks는 팝업주석이 지원하는 대신 주석 내용이 나타나지 않습니다. 그래서 주석 내용이 있는 부분에는 일부 뷰어에서 주석 내용은 팝업으로만 볼 수 있다는 안내 문구를 넣어 주는 것도 좋습니다. 



설정

트랙백

댓글

장애인 접근성이란? - 2018년 장애인 접근성 강화 전자책 제작 지원 사업 공고

분류없음 2018.03.08 15:52

출판문화진흥원에서 '2018년 장애인 접근성 강화 전자책 제작 지원 사업'을 진행하고 있습니다.


[전자출판팀] 2018년 장애인 접근성 강화 전자책 제작 지원 사업 공고


그런데 '장애인 접근성'이 뭔지 모르시겠다구요?


말 그대로 독서를 하는데 신체적인 어려움이 있는 분들이 책을 보다 편하게 읽을 수 있도록 전자책을 만들자는 얘기입니다.


그럼 어떻게 만들어야 할까요?


사업 공고에 표준 지침이 나와있는데, 그 중 EPUB과 관련된 지침은 4개입니다. 링크 걸려있으니 다운받으려면 아래 제목을 클릭하세요.



여담이지만, 간혹 '네가 뭘 알면서 떠드냐?'고 (물론, 대놓고는 아니지만) 하는 분들이 계신데, '독서 장애인을 위한 전자책 접근성 가이드', EPUB EDUPUB 프로파일 및 부속문서, EPUB3.0.1 ODPF 단체 표준, EPUB EDUPUB 프로파일 및 부속 문서 ODPF 단체 표준 등 표준문서를 만드는 기술위원입니다. 이 문서들은 모두 TTA(한국정보통신기술협회) 표준 문서로 등록되어 있습니다. 그리고 2009년 국내 처음으로 EPUB을 상업화 한 프로젝트 그룹(S사와 K사 주관)에서 메인으로 뛴 EPUB 상업화 1세대입니다.  

할일 없어서 인터넷 검색해 가며 이해하지도 못하는 내용 복붙 하거나 몇시간 짜리 전자책 제작 강의 듣고 어설프게 전문가 흉내 내며 아는 척 하는 사람은 아닙니다. 

국내 EPUB 제작 수준이 많이 형편 없어서 제대로 만들어 보자고 '제대로 알고' 시간 내서 정리하는 것이니 '내맘대로의 EPUBGUIDE.NET'에 있는 글은 믿어도 됩니다.


이 중 '독서 장애인을 위한 전자책 접근성 가이드 제1부:저작 지침'과 '이미지의 대체 텍스트 작성 지침'을 따라 EPUB을 만들고, 이렇게 만든 EPUB을 '독서 장애인을 위한 전자책 접근성 가이드 제2부:인증 기준'을 참고해 제대로 만들어 졌는지 확인하면 되니다. 


'이미지의 대체 텍스트 작성 지침'이란 

저시력 독서 장애인이 TTS 등으로 책을 들을 때 

책 속의 이미지를 TTS가 읽을 수 있도록 추가하는 대체 텍스트를 어떻게 만드는지를 설명하는 내용입니다. 


단순히 본문 내 삽화만 생각하실 분들이 많을텐데 문장을 꾸미기 위해 넣는 의미 없는 이미지나 글머리 이미지까지 어떤 식으로 대체 텍스트를 넣어야 하는지를 설명하고 있습니다. 


자세한 내용은 TTA 문서를 참고하세요.

TTA 문서를 받으려면 로그인을 해야합니다. 쉽게 가입을 할 수는 있지만, 가입하기 싫고, 문서는 보고싶은 분이라면 저한테 메일 보내주세요. 


설정

트랙백

댓글

무료로 사용할 수 있는 전자책 글꼴 Guide

이전 내용은 이곳에서 확인하시기 바랍니다.

http://epubguide.net/245


전자책에 무료로 쓸 수 있는 글꼴을 모았습니다.

글꼴의 저작권(라이선스), 제작처, 받을 수 있는 경로, 그리고 글꼴파일이 지원하는 언어(한중일, 한글 고어, 기본 특수문자 세트 등), 글자 크기별 모양 등을 한번에 확인할 수 있습니다. 


다운로드 https://goo.gl/98udBq



❖ 판올림 내용

- tvN 즐거운 이야기체

- 티몬체

- 고양체



Set03 무료 서체 목록

  • 가비아 글꼴

    • 가비아 봄바람

    • 가비아 납작블럭

    • 가비아 솔미체

  • 미생체

  • 야놀자 야체

  • tvN 즐거운 이야기체

  • 아리따 글꼴

    • 아리따 부리

    • 아리따 돋움

    • 아리따 Sans(로마자)

    • 아리따 흑체(중국어)

  • 배달의민족

    • 배민 한나체

    • 배민 주아체

    • 배민 도현체

    • 배민 한나는열한살체

    • 배민 기랑해랑체

    • 배민 연성체

  • 티몬

    • 티몬 몬소리

    • 티몬 티움(영문전용)

  • 고양

    • 고양체

    • 고양덕양체

    • 고양일산체




Set02 무료 서체 목록

  • 은글꼴

    • 은바탕

    • 은돋움

    • 은그래픽

    • 은궁서

    • 은필기

    • 은디나루

    • 은자모바탕

    • 은자모돋움

    • 은자모노벨

    • 은자모소라

    • 은펜

    • 은펜흘림

    • 은필기a

    • 은신문

    • 은타자

    • 은바다

    • 은옛글



Set01 무료 서체 목록 

  • 구글 노토(Google Noto)

    • Noto Sans KR

    • Noto Sans Mono KR

    • Noto Serif KR

  • 네이버 나눔 글꼴

    • 나눔명조

    • 나눔고딕

    • 나눔바른고딕

    • 나눔펜

    • 나눔바른펜

    • 나눔브러시

    • 나눔스퀘어

    • 나눔스퀘어라운드

    • 나눔바른고딕-옛한글

  • NHN 고도 글꼴

    • 고도 마음(godo Maum)

    • 고도 Rounded-L

    • 고도 Rounden-R

  • 저작권위원회 KCC 글꼴

    • KCC 김훈체

    • KCC 은영체

  • 문화체육관광부, 출판인회의 코펍(Kopub) 글꼴

    • 코펍 바탕(Kopub Batang)

    • 코펍 돋움(Kopub Dotum)

  • 만화진흥원(한국콘텐츠진흥원) 글꼴

    • 만화진흥원체

  • 서울시 서울 서체

    • 서울 남산체(정체)

    • 서울 한강체(정체)

    • 서울 남산체(장체)

    • 서울 한강체(장체)



1. 목차에서 글꼴의 모양을 확인할 수 있습니다.

글꼴 이름을 누르면 글꼴의 상세 정보로 이동합니다. 



2. 글꼴의 저작권 정보와 배포처, 다운로드 경로를 확인할 수 있습니다.



3. 글꼴의 상세한 내용을 확인할 수 있습니다.

한글, 옛한글, 영문, 일본어, 한자, 기타 언어(스페인, 독일, 프랑스, 러시아)의 지원 여부를 알 수 있고 특수문자 세트가 포함되어 있는지 확인할 수 있습니다. 



4. 한글, 영문 문단이 어떻게 보이는지 확인할 수 있으며 글자 크기에 따른 모양, 스타일(기울임, 진하게)을 적용했을 때의 모양을 알 수있습니다. 



5. 전자책 본문으로 썼을 때 글자가 어떻게 보이는지 알 수 있습니다. 본문 내에서 진하게, 기울임, 윗첨자, 괄호설명 등의 스타일이 어떻게 표현되는지 알 수 있습니다.





아직 본문 디자인은 편집중이고, 무료로 사용 가능한 글꼴 중 일부만 작업이 되었습니다. 시간 나는 대로 업데이트하고 있습니다. 글꼴에 대해 추가로 확인하고 싶은 내용이 있거나 더 추가하고 싶은 무료 글꼴이 있으면 언제든 댓글이나 이메일로 남겨 주십시오. 확인하는 대로 추가하겠습니다.

설정

트랙백

댓글


티스토리 툴바