문의가 한참 없다가 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">그래서 앨리스는 일어나는 것보다 데이지 꽃다발이나 만드는 게 낫겠다고 생각하고는 (뜨거운 날씨 때문에 몹시 졸리고 바보가 된 느낌이라서 당연히 그럴 수 있었을 것이다), 데이지 꽃을 뽑기 시작했다. 그때, 갑자기 분홍 빛 눈의 하얀 토끼 한 마리가 가까이 뛰어왔다. </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명이고, 철학자가 수다스러워서 한명당 수십번 얘기를 한다면 이 스타일이 더 좋고요.
업그레이드 스타일이 궁금하신 분은 메일 주세요.
여기 올린 내용은 마음대로 써도 되지만 최소한의 양심은 지켜야 하는데, 그러지 못한걸 몇번 보고 나니 저도 조심스러워지네요.
출처를 밝히는 것 까지도 바라지 않습니다. 참고를 했으면 최소한 '내가 만들었다'라고 하지는 말아야지요.
