다양한 형태의 박스 샘플

우리가 폭력이라 부르는 것들(해냄에듀)은 학습서라 그런지 다양한 박스가 들어있습니다.

이런 상자들은 대부분 border, background, background-image 등의 속성으로 그릴 수 있습니다.

 

다양한 모양의 상자가 전자책에서는 어떻게 보이는지 샘플을 보여드리겠습니다.

 

종이책에서 이렇게 보입니다.

전자책에서는 이렇게 보입니다.

전자책에 맞춰 약간 변형을 했지만, 기본 디자인은 최대한 살렸지요.

이 스타일은 background-image, border 속성을 사용했습니다.

 

종이책에서 이렇게 보이는 스타일입니다.

이 상자는 테두리가 특이하지요?

 

전자책에서 이 테두리는 border-radius 속성을 사용해 그렸습니다.

이미지를 써도 되지만, border 속성만 이용해도 충분히 그릴 수 있어요.

 

간혹 각주를 상자로 처리할 때가 있습니다. 

이 책에도 각주를 상자로 처리했어요.

 

전자책에서도 상자로 처리했습니다.

다만, 문단 단위로 각주가 들어가 있어, 각 문단의 시작 부분에 각주를 넣었습니다.

각주 표시가 있는 줄에 맞춰 넣을 수도 있습니다. 하지만 그러기 위해서는 인라인 태그를 블럭 태그로 바꾸고, 문단 사이에 각주 설명을 넣어야 해서 태그가 지저분해집니다. 그리고, [사회계약으로 국가가...]  부분을 복사 하면 [사회계약으로 사회계약 시민과 국가 사이의...] 이렇게 각주 내용이 복사되지요. 물론, 검색도 문제가 생기고요.

상자가 조금만 복잡해도 무조건 이미지로 넣은 편집자가 많이 있습니다.

웬만한 상자는 박스 모델로 처리가 가능하니, 이미지 보다는 박스 모델을 사용하기를 권해드립니다.