요즘 전자책이 정말 핫해지고 있습니다.
보관이 쉽고, 읽기도 쉽고, 이동 중에 들을 수도 있고 게다가 출판 비용이 종이책보다 저렴하니 많은 사람들이 전자책을 제작하기 위해 도전합니다.
그러나.....
전자책은 html이라는 코드와 css라는 스타일 문서로 이루어져 있어서, html 코드에 익숙하지 않은 사람들은 전자책을 스스로 제작해보려다가 지레 겁을 먹고 고개를 설레설레 흔들 때가 많습니다.
사실 전자책을 제대로 배우고 고난이도의 디자인을 하려면 html과 css문서를 아는 것은 필수입니다.
그러나 이것들을 완전히 익히고 전자책을 제작하려면 상당한 많은 노력과 시간이 지니야만 합니다.
그래서 저는 전자책 에디터 '윙크'로 코드없이 전자책을 만드는 과정을 설계하기 시작했습니다. 보다 많은 사람들이 전자책 제작을 편하게 경험해 보기를 원하기 때문입니다.
물론 코드없이 전자책을 만든다는 것은 말이 안 되는 이야기입니다. 그러나 한번도 코딩화면을 보지 않고 전자책을 을 만들 수 있다면 이를 "코딩없이 전자책 만들기"라 불러도 괜찮을 것 같다는 생각을 하게 되었습니다. 그래서 저는 조금(?) 오해의 소지가 있더라도 조심스럽게 코딩없이 전자책 만들기라는 이름의 포스팅 시리즈를 쓰기로 했습니다.
전자책에서의 코딩은 html 태그를 사용하는 일종의 행위를 말합니다.
<html 태그> 내용 콘텐츠 </html 태그>
이렇게 내가 표현하고자 하는 내용 콘텐츠를 html 태그 안에 넣어서 표현하는 것이 전자책의 코딩입니다.
그런데 코딩을 사용하지 않겠다고 말하던 사람이 갑자기 왜 코드를 이야기하고 있을까요?
약속대로 우리는 이 포스팅에서 html코드를 직접 배우고 익히지는 않을 것입니다. 하지만 사용되는 코드의 종류와 특성을 알고 전자책 제작을 제작하면 많은 오류를 피할 수 있기에 태그 종류과 특성에 대해서는 짚고 넘어가려 합니다.
html 코딩을 알면 오류가 생겼을 때 오류를 찾아서 바로 고칠 수 있지만 html 코딩을 모를 경우는 오류를 찾아내는 것이 어려울 뿐 아니라 수정하는 것은 상상도 못할 일입니다. 그래서 간단한 코딩의 설명과 몇몇 태그의 이름 그리고 특성에 대한 이야기를 먼저 시작합니다.
html 코드 문법
모든 태그는 여는 태그가 있으면 닫는 태그가 존재해야 한다는 법칙이 있습니다. 이는 html 태그 뿐 아니라 태그를 사용하는 모든 문서에 적용되는 법칙입니다.
<태그> 내용 콘텐츠 </태그>
그러나 태그를 사용하다 보면 내용 콘텐츠에 해당하는 부분이 없이 그냥 여는 태그와 닫는 태그만 써야하는 경우가 종종 있습니다.
줄바꿈을 나타내는 br img hr 등의 태그가 그러한데 그것은 이 태그들 사이에 내용이 존재할 수 없기 때문입니다.
<br/> 강제 줄바꿈 태그 - 여기서부터 여기까지만 줄바꿈이 이루어지고 나머지는 줄바꿈이 이루어지지 말아라 라고 구역을 정하는 내용을 넣을 수 없습니다. br 태그를 넣는 순간 구역을 바로 줄바꿈이 이루어지기 때문에 줄바꿈의 명령에 내용을 포함시킬 수 없습니다.예) 코딩없이 전자책 만들기는 <br/> 유용하다.(o) 코딩없이 <br>전자책 만들기는</br> 유용하다.(X)<img/> 이미지 태그 - 이미지 태그는 태그 안에 이미지 경로를 포함합니다. 그러니 열고 닫는 식으로 내용 콘텐츠를 표현할 수 없습니다.
예) <img src="경로" alt=""> (o) <img src="경로" alt=""> 사람이 사람을 사랑하는 것</img> (x)<hr/> 태그도 마찬가지입니다.
이렇게 열고 닫는 태그의 사이에 내용을 포함시킬 수 없는 경우가 종종있습니다.
하지만 문법적규칙에 따르면 이러한 태그들도 반드시 여는 태그와 닫는 태그를 사용해야합니다.
그래서 위의 태그들은 실제
<태그></태그>
이렇게 쓰이는 것이 맞습니다. 그런데 자세히 보면 의미없이 태그를 한번 더 입력하는 것과 마찬가지라는 생각이 듭니다. 가뜩이나 코딩으로 넣어야 하는 문자들이 많은데 의미없이 태그를 반복하는 것은 업무효율을 떨어뜨릴 수 있습니다. 그래서 이렇게 의미없이 여느 태그와 닫는 태그가 반복될 때 중복되는 부분들을 제거해도 된다는 규칙이 생겼습니다.
<태그></태그>
중복되는 부분을 지워보도록 하겠습니다.
<태그>/
자세히 보면 /이 남아 있는데 이것은 <>바깥에 있습니다. 태그라함은 <>안에 표현되는 것을 말하는데 이렇게 되면 /가 태그가 아닌 상태로 남게 됩니다. 그래서 /를 앞의 태그에 포함시킵니다.
<태그/>
네! 이것이 앞으로 여러분이 가끔씩 보게될 새로운 형태의 태그 표현입니다. 이것은 여는 태그와 닫는 태그가 합쳐진 것인데 위의 말한 태그들이 바로 이렇게 쓰입니다. 그러니 br, img, hr 등의 태그를 쓰실 때 꼭 뒤에 /를 넣어 주십시오.
이제 본격적인 내용을 시작해 볼까요?
html태그는 크게 블럭요소와 인라인요소로 구분됩니다. 우리는 이를 쉽게 표현하기 위해 블럭태그, 인라인태그로 바꿔 부를수도 있습니다.
블록태그는 자신만의 공간을 가지고 있는 태그이고 인라인태그는 자신만의 공간이 없어서 블록태그 안에 존재하는 태그를 말합니다.
다시 말하면 블록 태그는 하나의 상자와 같아서 상자의 안쪽 공간과 바깥쪽 공간을 모두 설정할 수 있는 태그입니다.
h1-6태그, p태그, div태그 등이 이에 해당되지요.
인라인 태그는 상자 안에 존재하는 내용물과 같습니다. 상자와 같은 포장이 없기에 단독으로 쓰이면 내용이 망가집니다. 그래서 인라인 태그는 반드시 상자(블록태그)안에서 사용되어야 하고 그렇지 않을 경우 우리는 이를 오류라고 합니다.
인라인 태그는 아까 우리가 위에서 사용했던 br태그 img태그 등입니다. 그리고 a태그 span태그도 이에 해당하지요.
잘 이해되지 않는다면 그냥 인라인 태그는 반드시 블록 태그 안에서 쓰여야 한다는 것만 기억해 주세요.
이번 포스팅은 여기서 마치도록 하겠습니다. 다음 포스팅에서는 각각의 태그와 그 태그들이 책과 문장의 구성에서 어느 부분에 해당하는지 말씀드리도록 하겠습니다.
윙크 구입 문의 [email protected] 또는 [email protected]