CSS5 [전자책 디자인] 여백 간격을 항상 동일하게 하기, rem 단위 사용 1. 문제 전자책을 만들 때, 글씨 크기나 줄간격, 여백 등등은 기본으로 em이라는 단위를 사용한다고 말씀드린 적이 있습니다. 그런데 em 단위를 쓰다가 문득 이상하게 느껴질 때가 있습니다. 아래 사진을 보면, 첫 단락도 좌우 여백이 1em이고 다음 단락도 좌우 여백이 1em인데, 실제로 보이는 좌우 여백에는 차이가 있습니다. 두 단락은 글씨 크기가 다를 뿐, 좌우 여백은 동일하게 설정되어 있습니다. 그렇다면 실제 나타난 형태에서 좌우 여백에 차이가 나는 이유는 글씨 크기 때문이라는 것을 짐작할 수 있습니다. em이라는 단위는 그 단위가 쓰인 부분의 글씨 크기에 영향을 받는다고 합니다. (참고 : webdesign.tutsplus.com/ko/tutorials/comprehensive-guide-when.. 2021. 4. 11. [전자책 디자인]내어쓰기를 깔끔하게, 고정폭 빈칸 thin space 여러 가지를 목록으로 나열할 때 '불릿'을 씁니다. 아래아한글에서는 '글머리표'라고도 하고, 여기 티스토리 글쓰기 메뉴에서는 '리스트'라고 하네요. 그리고 불릿 기호 뒤쪽에 한 칸 띄고 내용을 시작하는 경우가 있습니다. 기호를 전각 기호로 쓴다면 상관없겠지만, 1.가나다 2.라마바 3.사아자 이런 식으로 번호를 붙이거나, 대시(-)처럼 키보드에서 바로 입력하기 편한 기호를 쓴다면, 1. 가나다 2. 라마바 3. 사아자 이렇게 기호 뒤에 한 칸을 띄는 게 보기에도 좋고 기호와 내용이 더 명확하게 구분됩니다. 1. 문제 그런데 이 불릿 기호 뒤에 일반적인 빈 칸(Spacebar)을 쓰면, 내용이 길어져 줄이 바뀔 때 띄어쓰기 간격이 달라집니다. 이렇게요. 전자책에서도 마찬가지 현상이 일어납니다. 불릿 기호 .. 2021. 3. 31. [전자책 디자인]그래프 최대 너비 지정하기, max-width 최근에 그래프가 많이 들어가 있는 책을 전자책으로 만들었습니다. 이 그래프 넣는 것을 놓고 고민을 좀 했습니다. 그냥 생각 없이 width=100%로 속성을 부여해 100% 너비로 지정하면, 화면을 가로로 늘렸을 때 이미지가 지나치게 커집니다. 그래프가 텍스트와 어울리지 않게 너무 커져 있어서, 한 화면을 거의 가득 채울 정도였습니다. 물론 이미지가 클수록 좋을 수도 있지만, 텍스트에 비해서 지나치게 큰 이미지는 책의 조화를 깨뜨립니다. 그래서 이미지 최대 너비를 고정해 주어 일정 정도 이상 커지지 않게 했습니다. 그러면 아래와 같이 나옵니다. 최대 크기를 고정한(두 번째 사진) 쪽이 좀 더 깔끔해 보입니다. 스마트폰과 같이 작은 화면에서 볼 때는 화면을 가득 채워야 그래프를 알아볼 수 있지만, PC 모.. 2021. 3. 30. 아래아한글로 전자책 만들기 5. html 태그 속성 정리 아래아한글로 전자책 만들기 4. 스타일시트 만들기, 기본 태그들 지난 글에 이어서, 이번에는 클래스(class)에 지정할 수 있는 여러 속성들을 정리하겠습니다. "전자책 만들기"가 핵심인 만큼, 전자책을 만드는 데에 필요한 속성들을 위주로 씁니다. 1. 글꼴(Font) 속성을 정리하기 전에, 책의 기본이라고 할 수 있을 글꼴부터 정리해야겠습니다. 영어 책들은 따로 글꼴 파일을 넣지 않아도 될 것입니다. 기본적으로 html에서 지원하는 글꼴이 있기 때문입니다. 하지만 기본 한글 글꼴은 책에 쓰기에는 적당하지 않기 때문에, 글꼴(폰트) 파일을 따로 추가합니다. 다만, 폰트에도 저작권이 있으니 아무 글꼴이나 막 쓰기 전에, 전자책 제작에 사용 가능한 폰트인지 확인하셔야 합니다. 무료로 사용 가능한 폰트 중에서.. 2021. 3. 24. 아래아한글로 전자책 만들기 4. 스타일시트 만들기, 기본 태그들 아래아한글로 전자책 만들기 3. head 구문 변경하기, 그리고 스타일시트 지난 글에서는 간단하게 스타일시트 만드는 법을 설명해 드렸습니다. 이 스타일시트에 제목과 본문 등등의 여러 스타일들을 담아 두면 전자책을 만들 때 간단하게 불러와서 적용할 수 있습니다. 1. 스타일 중에서도 가장 기본인 것이 태그입니다. 아래는 하나의 예시입니다. p{ /*본문 기본*/ font-family: "kopub_bl"; font-size: 1em; line-height: 1.8em; margin: 0; padding: 0; text-indent: 1em; text-align: justify; } 는 본문 등 대부분의 기본 요소에 쓰는 태그라고 보면 되겠습니다. 메인 텍스트, 인용문, 주석, 이미지 캡션, 등등 거의 모든.. 2021. 3. 23. 이전 1 다음
