posted by 내.맘.대.로 2024. 2. 6. 09:42

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

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

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

자세한 내용은 여기로: https://www.epubguide.net/notice/309

오래 전 작성된 글은 현재의 Sigil 버전과 차이가 날 수 있습니다. 등록 일자를 확인 하고 1년 이상 지난 글은 변경된 내용이 있는지 확인하시기 바랍니다.

강의 할 때 마다,

그리고 쪽지나 메일로 전자책(EPUB)을 어떻게 하면 잘 만드는지 물어보는 분들이 많이 있습니다.

강의를 할 때면 항상 듣는 질문이에요.

궁금해 하는 분들이 많은 것 같아,

전자책(EPUB)을 빠르게, 잘 만드는 방법 설명드립니다.

그대로만 하면 100% 성공 보장합니다.

1. 서로 다른 디자인으l EPUB을 100개 만들어 보세요.

책의 표지 삽입부터 판권까지 완벽하게 100권만 만들어 보세요.

이때 중요한게 있습니다.

처음 30권 정도는 이곳 저곳에서 스타일 복사해도 됩니다.

스타일 복사해 가면서 책 구조 익히고, 편집 프로그램 사용법을 익히세요.

HTML과 CSS가 무엇인지, 어떻게 작동하는지 감이 올거예요.

하지만 30권이 넘어가면 절대로 스타일 복사하지 말고, 직접 스타일을 잡으세요.

CSS나 HTML 속성을 참고해도 되지만, 복붙은 절대 하면 안됩니다.

EPUB 100개 만들어 보라고 하면,

"그건 너무 시간이 오래 걸리잖아요."

라는 분들이 계십니다.

네. 시간 오래 걸려요.

"좀 더 빨리 배울 방법 없어요?"

있습니다.

좀 더 빨리 EPUB 100개를 만들어 보세요.

그럼 제작 속도도 빨라질 거예요.

2. HTML과 CSS를 공부합니다.

1번 하려면 이건 공부 할 수 밖에 없어요.

HTML과 CSS를 완벽히 익힐 필요는 없습니다. 저도 모르는 태그 많고, 모르는 CSS 속성 많아요.

EPUB2에서는 거의 쓰지 않는 태그와 속성도 많이 있습니다.

전자책에 많이 쓰는 HTML 태그와 CSS 속성을 집중적으로 공부하세요.

그리고 이걸 자유롭게 활용할 수 있어야 합니다.

EPUB 100개를 스타일 복붙 하지 않고 직접 만들다 보면 자연스럽게 HTML과 CSS 공부를 하게 될거예요.

3. 유통사 뷰어를 연구합니다.

EPUB 100개 만들면서 국내 주요 유통사 뷰어에 하나씩 넣어 스타일이 어떻게 보이는지 확인해 보세요.

각 유통사 별로 어떤 CSS속성이 어떻게 표현되는지 확인합니다.

EPUB 100개 정도 테스트 해 보면 유통사 뷰어 별 특성이 보일거예요.

뷰어 특성에 맞게 스타일을 편집할 수 없으니

뷰어 공통으로 적용되는 스타일을 찾아갑니다.

그럼 유통사 뷰어 별로 깨지지 않는 EPUB을 만들 수 있습니다.

4. 폰트를 연구합니다.

폰트 관련 문의 중에, 폰트가 뭔지만 알아도 물어볼 필요가 없는 질문이 많아요.

폰트는 PC에서, 폰에서, 안드로이드에서, 아이폰에서 다른 특성을 보입니다.

PC에서는 볼드로 보이는데 안드로이드에서는 볼드가 아닐 수 있어요.

PC에서는 폰트가 제대로 적용되는데 아이폰에서는 적용 안되기도 합니다.

어떤 폰트는 글자가 있고, 어떤 폰트는 글자가 없습니다.

어떤 폰트는 약물이 전각으로 보이고, 어떤 폰트는 반각으로 보입니다.

이 외에도 수백가지 특성이 있어요.

EPUB 100개 만들면서 다양한 폰트를 써 보고,

유통사 뷰어의 PC, 모바일 뷰어에서 폰트가 어떻게 보이는지 확인해 보세요.

5. 이미지 포멧 별 특성을 공부합니다.

EPUB에서 많이 쓰는 jpg와 png은 확실히 알아야 돼요.

이 두 파일의 차이, 압축 비율에 따른 해상도 변화, 편집 프로그램에 따른 색감 변화 등을 연구합니다.

6. Sigil 또는 자신이 사용하는 편집 프로그램의 모든 기능을 이용해 봅니다.

많은 분들이 자신이 쓰는 기능만 써요.

그럼 발전을 할 수 없습니다.

편집 프로그램에 있는 모든 기능을 하나씩 써보세요.

EPUB 100개 만들다 보면 여러 문제가 생길텐데, 편집 프로그램의 다양한 기능 안에 해결 방법이 있습니다.

각주 800개의 번호를 바꾸려면 4~5시간 걸려요.

Sigil의 기능을 이용하면 30분이면 끝낼 수 있습니다.

이렇게 자신이 쓰는 편집 프로그램을 완벽히 익히세요.

7. 책의 구조를 이해합니다.

인디자인이나 쿽 처럼 종이책 조판을 EPUB으로 변환할 때 필요합니다.

책의 구조도 모르면서 책을 만들려는 분들이 많더라구요.

책의 구성 요소는 아주 다양합니다.

표지, 날개, 간지, 속표지, 부, 장, 절, 판권, 제목, 본문, 인용, 참고문헌, 주석, 첨자.....

책에 어떤 요소가 있는지 알아야 책을 만들 수 있어요.

그리고 책의 구조를 알면, 인디자인이나 쿽 파일을 EPUB으로 변환 할 때 속도를 엄청나게 줄일 수 있습니다.

8. EPUB 표준 문서를 꼼꼼히 읽고 이해합니다.

EPUB 전문가라고 주장(?)하는 사람들 중에도 EPUB 표준문서 제대로 본 사람이 별로 없습니다.

그래서 EPUBCheck오류를 물어보면 "아마 이런 이유일거예요."라고 어림짐작으로 얘기를 하지요.

이런 사람들은 표준문서를 제대로 안본거예요.

표준 문서는 EPUB을 만드는데 필요한 모든 지식이 담겨있는 문서예요.

이 문서를 제대로 이해하면 EPUBCheck에서 생기는 모든 오류를 다 잡아낼 수 있습니다.

"정말이요?"

네. EPUBCheck는 EPUB 표준문서에 위배되는 내용을 찾는 프로그램이에요.

그러니 EPUB 표준문서를 알면, EPUBCheck가 표준문서에 위배된다고 찾은 항목의 원인, 수정 방법을 알 수 있지요.

진짜 전자책 편집을 잘 하려면 표준문서 이해는 필수입니다.

책 100권을 어디서 구하냐는 분들이 계세요.

각 유통사 온라인 서점 들어가 보세요.

본문 도입부까지 미리보기 할 수 있습니다.

전자책 만드는데 본문 내용은 전혀 중요하지 않아요.

구조만 동일하면 내용이 뭐든 상관 없이 스타일을 적용할 수 있어요.

본문은

lorem ipsum dolor sit amet, consectetuer adipiscing elit.

이거면 됩니다. HTML과 CSS 공부하는 사람들 한테 아주 유명한 문장이에요.

본문은 저 문장 넣고, 유통사에서 다양한 분야 책 미리보기 100권 찍어서

종이책 스타일 그대로 전자책을 만들면 됩니다.

이정도만 하면

누구나 EPUB을 빠르고 깔끔하게 만들 수 있습니다.

100% 성공 보장합니다.

반응형
posted by 내.맘.대.로 2024. 2. 5. 12:19

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

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

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

자세한 내용은 여기로: https://www.epubguide.net/notice/309

오래 전 작성된 글은 현재의 Sigil 버전과 차이가 날 수 있습니다. 등록 일자를 확인 하고 1년 이상 지난 글은 변경된 내용이 있는지 확인하시기 바랍니다.

Sigil의 클립 기능은 최고의 편집 도구입니다.

편집에 필요한 다양한 코드를 미리 저장해 두고 필요할 때 언제든 꺼내 쓸 수 있지요.

저도 수십개의 클립을 등록해 두고 EPUB을 편집할 때 사용합니다.

클립 사용 빈도는 아주 높스니다.

책을 만들 때 단 한 번도 클립을 사용하지 않은 적이 없습니다.

 

클립 사용법은 여기로...

https://www.epubguide.net/87

https://www.epubguide.net/495

 

 

이렇게 중요한 중요한 편집 도구인 만큼 Sigil은 다양한 형태로 클립 사용을 지원합니다.

그 중 하나가 클립바입니다.

총 2개의 클립바에 40개의 클립을 도구 버튼으로 지정해 사용할 수 있습니다.

저는 편집창 크기 때문에 클립바 1개에 사용빈도 높은 순으로 클립을 표시해 놓고 사용하지요. 

 

그리고 키보드 단축키로 클립을 지원합니다.

기본 단축키는 CTRL+ALT+ 1 ~ 0까지 총 10개가 지정되어 있습니다.

편집자가 원하면 총 40개까지 단축키를 추가할 수 있지요.

 

어떤 분이 클립 단축키를 어떻게 지정하느냐, 원하는 클립과 매핑이 되지 않는다고 질문을 했는데

질문 내용도 제대로 이해 못하고 동문서답을 한 모 (자칭)자타공인 전문가의 댓글을 본 적이 었어요.

Sigil의 클립 기능이 뭔지 제대로 알지도 못하고, 클립과 단축키 매핑 규칙은 아예 모르는데 전문가라니...

 

클립 매핑 규칙은 도구 상자 표시 규칙과 동일합니다.

 

1. 그룹이 지정되어 있지 않아야 한다.

2. 중간에 그룹이 있을 경우 그룹은 무시한다.

3. 그룹이 지정되지 않은 클립 중, 클립 편집기에 표시된 순서 대로 1 부터 40까지 지정할 수 있다.

4. 클립 편집기에 표시된 순서 1번이 단축키 1번(CTRL+ALT+1)에 해당한다.

5. 도구상자에는 1 ~ 3을 만족하는 클립이 순서대로 클립 바 1에 20개, 클립 바 2에 다음 20개가 표시된다.

 

좀 복잡한가요?

제 클립 편집기로 예를 보며 설명을 할게요.

 

클립 편집기를 실행해 보면 이렇게 클립 목록을 볼 수 있습니다.

 

1. Unnamed Entry

2. Unnamed Entry

3. 임시-명화로 읽닌...

     3-1. 제목

     3-2 맺으며 제목

     3-3 연표 제목

4. ==기본==

5. 이미지 가운데

6. 장 표지

7. 한줄 추가

,...

 

이런 순서로 클립이 있습니다.

클립 바와 클립 단축키는 그룹을 무시합니다. 

그룹을 무시하고 다시 순서를 지정하면 이렇게 됩니다.

1. Unnamed Entry

2. Unnamed Entry

Group. 임시-명화로 읽닌...

     --1. 제목

     --2 맺으며 제목

     --3 연표 제목

3. ==기본==

4. 이미지 가운데

5. 장 표지

6. 한줄 추가

 

그룹은 위치가 어디에 있든 무조건 무시하기 때문에 그룹 위치는 신경 쓸 필요가 없습니다.

그리고 그룹에 포함되어 있는 클립도 모두 무시합니다.

 

그룹을 무시하고 다시 순서를 지정했이니 클립바를 다시 볼까요?

아래 클립 바를 보면 그룹을 무시하고 다시 지정한 순서대로 클립이 표시된 것을 확인할 수 있습니다.

 

이제 단축키를 입력해 봅니다.

CTRL+ALT+1 부터 6까지 누르면 아래 목록처럼 클립이 들어갑니다.

 

CTRL+ALT+ 1. Unnamed Entry

CTRL+ALT+ 2. Unnamed Entry

Group. 임시-명화로 읽닌...

     --1. 제목

     --2 맺으며 제목

     --3 연표 제목

CTRL+ALT+ 3. ==기본==

CTRL+ALT+ 4. 이미지 가운데

CTRL+ALT+ 5. 장 표지

CTRL+ALT+ 6. 한줄 추가

 

저는 책을 만들 때 마다 책에 맞는 클립을 몇개씩 추가하기 때문에 단축키를 많이 사용하지 않아요.

현재 책에 사용할 클립은 앞쪽에 넣어서 뒤에 붙은 단축키의 번호가 바뀌거든요.

하지만 클립을 고정해 놓고 사용하는 분이라면 클립 단축키가 아주 유용할거예요.

반응형
posted by 내.맘.대.로 2024. 1. 16. 10:33

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

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

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

자세한 내용은 여기로: https://www.epubguide.net/notice/309

오래 전 작성된 글은 현재의 Sigil 버전과 차이가 날 수 있습니다. 등록 일자를 확인 하고 1년 이상 지난 글은 변경된 내용이 있는지 확인하시기 바랍니다.

Sigil에서 본문 검색을 하는데 태그만 찾을 때가 있습니다.

클래스 이름에 찾고 싶은 단어가 들어갔거나

p*, i* 처럼 정규식을 쓰면 이런 문제가 생기지요.

예를 들어, 본문에 있는 영어 단어만 찾아 첨자 스타일을 적용하고 싶다.

([a-zA-z]++)

찾기에 정규식을 이렇게 넣으면,

본문의 단어보다 p, div, sub 같은 태그가 더 많이 걸립니다.

<p class="style_name">본문에 있는 영어 단어keyword 찾기</p>

이런 코드가 있고, 찾고 싶은 내용은 keyword인데,

정규식에서 영문자만 찾으라고 식을 넣어 검색하면

p, class, style, name를 모두 찾습니다.

이러면 정규식을 쓰는 것 보다 하나씩 확인해 스타일을 적용하는게 빠르겠다는 생각이 들지요.

이럴 때 쓰는 정규식 설정이 [텍스트]예요.

[텍스트] 설정의 기능은 이렇습니다.

HTML 파일에서 태그는 제외하고 검색을 하는 기능이지요.

이렇게 설정을 한 후

<p class="style_name">본문에 있는 영어 단어keyword 찾기</p>

이런 코드에서 찾기를 하면

태그와 태그 안의 class, id, title 등의 요소는 무시하고 본문에 있는 영어 단어만 찾습니다.

반응형
posted by 내.맘.대.로 2023. 11. 2. 09:24

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

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

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

자세한 내용은 여기로: https://www.epubguide.net/notice/309

오래 전 작성된 글은 현재의 Sigil 버전과 차이가 날 수 있습니다. 등록 일자를 확인 하고 1년 이상 지난 글은 변경된 내용이 있는지 확인하시기 바랍니다.

재미있는 스타일 몇개 소개해 드립니다.

먼저 대본 스타일 본문인데, 앞에 캐릭터 이미지가 들어가있어요.

텍스트로 이름만 들어있어면 좀 더 간단한데, 이미지까지 들어가고, 이미지폭도 전부 제각각이라 편집이 조금 더 복잡해지네요.(왼쪽이 EPUB)

 

이 스타일의 포인트는 위에 박혀있는 column이에요.(오른쪽이 EPUB)

저렇게 딱 붙여도 몇몇 뷰어에서는 강제 여백이 생기고, 강제 여백을 막는 강제 스타일 적용 코드 넣어주고...

유통사가 그냥 CSS에 장난치지 않았으면 하다가도,

유통사에서 뷰어 기획하던 시절에 봤던 그 엄청난 쓰레기 EPUB을 생각하면 유통사 뷰어 담당자 마음도 이해가 가고...

 

column과 비슷한 스타일이 [정리]예요.

만드는 방법은 똑같지요.

배경 전체를 핑크로 넣을까 하다가, 어차피 body 스타일 안먹는 뷰어에서는 더 지저분해지니 텍스트가 들어간 곳만 핑크로.

물론, 편집자가 '전체 배경 넣어주세요' 하면 수정을 해야겠지만...

 

끝으로,

전자책은 예쁘지 않다.

텍스트와 이미지 대충 배열하면 된다는 소리를 여전히 듣고 있네요.

"그런거 다 할 수 있어요."

하면

"그런거 할 수 없다고 했다. 절대로 할 수 없다."

이런 소리나 하고...

'고정 판형'과 '가변 판형'의 차이로 인한 스타일 문제가 아니라면

종이책에서 가능한 건 전자책에서도 가능해요.

전자책이 예쁘지 않은 것은

전자책을 대충 만들기 때문이지

전자책을 예쁘게 만들 수 없어서는 아니에요.

반응형
posted by 내.맘.대.로 2023. 5. 8. 09:49

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

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

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

자세한 내용은 여기로: https://www.epubguide.net/notice/309

오래 전 작성된 글은 현재의 Sigil 버전과 차이가 날 수 있습니다. 등록 일자를 확인 하고 1년 이상 지난 글은 변경된 내용이 있는지 확인하시기 바랍니다.

영어공부를 위한 원서, 오즈의 마법사입니다.

전자책으로 본문을 보다, 해석이 어려운 문단이 나오면

팝업 주석으로 해석을 볼 수 있습니다.

 

 

 

 

전자책 구매는 교보문고에서~

https://ebook-product.kyobobook.co.kr/dig/epd/ebook/E000005195549

 

오즈의 마법사 | 라이먼 프랭크 바움 | 내맘대로- 교보ebook

팝업 영한대역***주의! 이 책은 팝업 주석을 지원하는 모바일 뷰어에서 이용할 수 있습니다.*** ***팝업 주석을 지원하지 않는 PC 뷰어에서는 한글 번역을 볼 수 없습니다.*** ❖ 팝업 영한대역이란?

ebook-product.kyobobook.co.kr

 

경기도 사이버도서관 등 전자책 도서관에서 대여도 가능합니다.

 

 

경기도사이버도서관 전자책(구독)

전자책 [전자책] 오즈의 마법사 저자 : 라이먼 프랭크 바움출판사 : 내맘대로출간일 : 2023-05-15 책에 대한 상세내용 · 페이지 0 page · 공급사 내맘대로 · 서비스형태 EPUB · 파일크기 2.9 MB · 웹뷰어

cyberlibrary.dkyobobook.co.kr

 

반응형
posted by 내.맘.대.로 2023. 1. 19. 09:14

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

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

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

자세한 내용은 여기로: https://www.epubguide.net/notice/309

오래 전 작성된 글은 현재의 Sigil 버전과 차이가 날 수 있습니다. 등록 일자를 확인 하고 1년 이상 지난 글은 변경된 내용이 있는지 확인하시기 바랍니다.

전자책 만들다 보면 다양한 테두리를 그리게 됩니다.

테두리 모양은 전부 제각각이라 초보 편집자에게 종종 질문을 받아요.

테두리는 아무리 복잡해도 '기본'만 알면 쉽게 그릴 수 있습니다.

그 기본이란,

border(border와 연결된 속성 전부)

border-image

background(background와 연결된 속성 전부)

이렇게 3개.

이 3개가 어떻게 쓰이는지 예시로 보여드릴게요.

아래 예시 이미지는 모두 왼쪽이 종이책(PDF), 오른쪽이 전자책입니다.

1. 패턴이 들어간 테두리 선, 그리고 안쪽 영역 라운딩 처리

이런 테두리는 background-image를 사용합니다.

박스를 2개 그리지요. 패턴 이미지가 있는 바깥쪽 상자, 그리고 흰색 안쪽 상자.

안쪽 상자에 border-top-left-radius를 주면 라운드 처리를 할 수 있지요.

 

2. 너무 쉬운데 의외로 그릴 줄 아는 사람이 별로 없는 테두리

이런 테두리는 아주 그리기 쉽습니다.

border와 border-radius 속성만 있으면 됩니다. 상자도 하나면 되고요.

border-radius를 어떻게 쓰는지 공부하면, 아주 쉽게 그릴 수 있는 테두리입니다.

 

이 테두리는 여러가지로 활용을 할 수 있습니다.

예를 들어 이런거.

앞쪽에 있는 반달 모양의 원형 테두리 역시 border와 border-radius로 만들 수 있어요.

위, 아래, 좌, 우, 타원형, 원형 등 어떤 형태로든 만들 수 있기 때문에

연 평균 200~300권 만들다 보면 10번 정도 쓰게 되는 스타일입니다. 이정도면 엄청 높은 빈도예요.

3. 팁상자/상자형 각주 스타일

이건 단순하게 border만 이용하면 됩니다.

너무 쉬워서 설명할 필요도 없을 것 같지만,

의외로 float 속성을 모르는 사람들이 많아 가볍게 언급합니다.

float은 이미지에만 사용하는 줄 아는 초보 편집자가 많아요. float은 block, inline 속성 태그면 어디든 쓸 수 있어요.

 

4. border로 그릴 수 없을 때는 border-image로 그리면 된다

이런 테두리는 border로 그릴 수 없습니다.

위, 왼쪽은 2줄, 각 모서리 모양이 모두 다르고, 오른쪽 아래에는 돋보기 아이콘까지 들어있지요.

이런 테두리를 그리라고 하면 상자를 여러개 중첩시킬 생각을 하는데,

그냥 border-image를 쓰면 간단해요.

 

5. border와 background의 활용

이건 2번에서 설명한 테두리와 똑같아요. border와 border-radius를 이용했지요.

그런데 왼쪽 위에 연필 아이콘이 있습니다.

이렇게 연필 아이콘이 있으면, 이미지를 직접 삽입하는 분들이 많더라구요.

그냥 background-image를 쓰세요.

왜? 간단하니까.

종이책(PDF)

전자책(EPUB)

이미지를 직접 삽입한다면 태그가

<div class="border-box">

<div class="bullet_image">

<img src="../Images/bullet.jpg" alt="bullet image">

</div>

</div>

이렇게 되고

배경이미지를 쓰면

<div class="border-box"></div>

이렇게 끝나거든요.

6. 한쪽 모양만 다른 테두리

4개 면은 border로 그릴 수 있는데 한쪽만 그릴 수 없다면?

이렇게 복잡하게 생각하지 마세요.

그냥, 이건 border-image로 그리면 됩니다.

4번이랑 이거랑 똑같아요. 4개 면이 다르던, 한쪽 면이 다르던

border로 그릴 수 없다면 border-image를 쓰면 됩니다.

 

반응형