br
br 태그는 글의 문단은 바꾸지 않으면서 강제로 줄바꿈만 하고 싶을 때 쓰는 태그이다. 문단 바꿈과 혼동하는 경우가 있는데, 아래 사진과 같이 강제 줄바꿈은 일상적으로 보이는 편집방식이다.
위 사진에서도 보듯이 적절한 줄바꿈은 문서의 가독성을 높여준다. 줄을 바꾸는 자리마다 <br />을 넣어주면 위 사진처럼 문단은 바뀌지 않고 줄만 바뀐다. 기왕 사진을 가져왔으니, 예제 문서로 사진의 문장을 사용하겠다. 위 사진에 표시된 다섯 개의 줄을 html 형식으로 바꾸면 다음과 같다.
<html>
<head>
<title>사용설명서</title>
</head>
<body>
<p>
사용 전에 '안전을 위한 주의 사항'을 반드시 읽고 정확하게 사용하세요.<br />
사용설명서를 읽고 난 후 사용하는 사람이 언제라도 볼 수 있는 장소에 보관하세요.<br />
제품보증서는 본 설명서에 포함되어 있습니다.
</p>
<p>
설치공사는 전문 기술이 필요하므로 설치 전문점 또는 서비스센터에서 설치되어야 합니다.<br />
설치공사 때문에 발생한 문제는 설치자의 책임이며, 이 경우 무상 서비스를 시행하지 않습니다.
</p>
</body>
</html>
위 html코드를 웹브라우저로 확인하면 다음과 같다:
타이틀 탭에 문서 제목이 보이고, 문서 내용에는 <br />태그가 있는 부분이 강제 줄바꿈이 되어 있음을 확인할 수 있다.
제목태그: h1, h2, ..., h6
html에서는 여섯 단계의 제목태그를 지원한다. 제목 태그는 ebook에서 목차 또는 차례를 작성할 때 기본으로 참조하는 곳이다. 즉, 전체 책의 구조를 결정한다. 따라서, 목차를 결정할 중요한 키워드는 제목 키워드를 적절히 사용해서 표시해 두어야 한다. 이번에도 출판된 문서를 예를 들어설명해 보겠다. 다음 사진을 보자.
큰 글씨의 제목들과 짤막한 본문들이 보이는데, 윗편에 있는 제목은 큰 글씨로 되어 있고, 아랫편의 제목은 본문보다는 크지만 첫 제목보다는 작은 글씨로 되어 있어서 작은 제목이 붙은 부분의 내용이 큰 제목이 붙은 내용에 부속되어있다는 느낌을 준다. html에서도 이러한 편집을 지원하여 h1부터 h6까지 여섯 단계로 내용을 구분할 수 있도록 하고 있다. 위에 표시된 내용은 다음과 같이 html 문서로 바꿀 수 있다.
<html>
<head>
<title>연결하기</title>
</head>
<body>
<h1>네트워크 연결하기</h1>
<p>
본 기기는 후면부의 LAN 단자연결을 이용하여 사용자의 로컬영역 네트워크에 접속할 수 있습니다. 광대역 네트워크 연결을 통해 소프트웨어 업데이트, BD-Live 서비스 등을 사용할 수 있습니다.
</p>
<h2>유선 네트워크 연결하기</h2>
<p>
사용자의 네트워크 기기와 함께 제공되는 사용설명서에서 추가 정보를 참고하세요. 이더넷 선을 이용하여 본 기기 후면의 LAN 단자와 사용자의 모뎀 또는 라우터의 LAN 단자를 연결하세요.
</p>
</body>
</html>
이렇게 만들어진 문서를 브라우저로 읽어들이면 다음과 같이 나온다.
hr
hr태그는 문서의 문단과 문단 사이에 가로줄을 만들어주는 역할을 한다. br 태그처럼 <hr />만 쓰면 충분하며, <p>...</p> 사이에 입력하면 작동하지 않는다. 이 가로줄은 아래와 같은 문서의 가로선을 말한다.
이 부분을 html문서로 바꾸어보자. 윗부분의 [없음], [변경] 따위는 제목의 역할을 하지 않으므로 일반 문단 안에 집어넣는다. 위 사진에서는 [없음], [변경]이 다른 것과 달리 좀 크고 진하게 표현되어있지만, 현재까지 설명된 것으로는 구현이 불가능하므로 내용전개가 좀 더 된 이후에 구현하는 법을 보여주기로 한다.
<html>
<head>
<title>비밀번호</title>
</head>
<body>
<h1>비밀번호</h1>
<p>
비밀번호를 등록, 변경 또는 삭제할 수 있습니다.
</p>
<hr />
<p>
[없음]<br />
새로운 비밀번호를 등록합니다.
</p>
<hr />
<p>
[변경]<br />
현재의 비밀번호를 변경합니다.
</p>
<hr />
</body>
</html>
이것을 브라우저로 불러와 읽어보면 다음과 같은 모양이 된다.
이정도를 하면 ebook의 기본 구조를 잡을 수 있다. 태그를 적절하게 붙여서 문서를 작성하면 나중에 CSS를 통해 전체적인 모양을 다듬을 수 있다. 컨텐츠의 위치를 주의해서 ebook을 작성하도록 한다.
'HTML CSS etc' 카테고리의 다른 글
| Google Code Prettify (0) | 2019.03.23 |
|---|---|
| 전자책 출판을 위한 HTML - 05 - 특수문자 입력법 (0) | 2018.10.19 |
| 전자책 출판을 위한 HTML - 04 - align, width (0) | 2018.10.17 |
| 전자책 출판을 위한 HTML - 03 - 주석(comment) (0) | 2018.10.15 |
| 전자책 출판을 위한 HTML - 01 - html, head, title, body, p (0) | 2018.08.20 |