현재까지 몇 가지 태그를 알아봤는데, 지금까지 배운 태그로만 해도 문자로만 이루어진 ebook을 제작할 수 있다. 하지만 너무 밋밋해질 수가 있어서 기본적인 속성을 좀 바꿔서 미약하게나마 글자들을 정돈해 보기로 하겠다. CSS를 배우면 좀 더 효율적으로 할 수 있으나, HTML에서 알아야 할 것이 좀 남아있으므로 HTML에 대한 내용이 끝날 때까지는 여기서의 방법을 최대한 이용해서 글을 써보기로 하자.
정렬(align)
문단은 항상 왼쪽 줄을 따라서 움직이지는 않는다. 일기 같은 경우에는 오른쪽에 있었으면 할 수도 있고, 가운데 정렬을 통해 시를 표현할 수도 있을 것이다.
이와 같이 태그로 둘러싸인 부분을 정렬하기 위해서는 아래 예제와 같이 태그 옆에align이라는 속성을 추가한다.
<html>
<head>
<title>HTML Attributes</title>
</head>
<body>
<p align="justify">
현재까지 몇 가지 태그를 알아봤는데, 지금까지 배운 태그로만 해도 문자로만 이루어진 ebook을 제작할 수 있다. 하지만 너무 밋밋해질 수가 있어서 기본적인 속성을 좀 바꿔서 미약하게나마 글자들을 정돈해 보기로 하겠다. CSS를 배우면 좀 더 효율적으로 할 수 있으나, HTML에서 알아야 할 것이 좀 남아있으므로 HTML에 대한 내용이 끝날 때까지는 여기서의 방법을 최대한 이용해서 글을 써보기로 하자.
</p>
<h2 align="right">문단정렬</h2>
<p align="center">
문단은 항상 왼쪽 줄을 따라서 움직이지는 않는다. 일기 같은 경우에는 오른쪽에 있었으면 할 수도 있고, 가운데 정렬을 통해 시를 표현할 수도 있을 것이다.
</p>
</body>
</html>
justify는 양쪽 정렬, right는 오른쪽 정렬, center는 가운데 정렬을 의미한다. 위 html파일을 브라우저에서 열면 다음과 같은 결과가 나온다.
가로폭 설정(width)
width 속성을 지정하면 가로선의 폭을 설정할 수 있다. 여기에 align을 추가하면 가로선의 배치도 설정가능하다. align이 주어지지 않으면 기본적으로 가운데 정렬이 이루어진다. 폭의 길이 단위는 px, %가 대표적으로 사용된다. 다음은 예제 html 파일이다.
<html>
<head>
<title>속성연습</title>
</head>
<body>
<hr align="left" width=160px />
<h1>width 활용</h1>
<hr align="left" width=160px />
<p width=60%>
width 속성을 지정하면 가로선의 폭을 설정할 수 있다. 여기에 align을 추가하면 가로선의 배치도 설정가능하다. align이 주어지지 않으면 기본적으로 가운데 정렬이 이루어진다. 폭의 길이 단위는 위에서처럼 px를 써도 되고 아래처럼 %를 사용해도 된다.
</p>
<p align="right">2018-10-17</p>
<hr align="right" width="15%" />
</body>
</html>
위 파일을 브라우저에서 보면 다음과 같이 나온다.
'HTML CSS etc' 카테고리의 다른 글
| Google Code Prettify (0) | 2019.03.23 |
|---|---|
| 전자책 출판을 위한 HTML - 05 - 특수문자 입력법 (0) | 2018.10.19 |
| 전자책 출판을 위한 HTML - 03 - 주석(comment) (0) | 2018.10.15 |
| 전자책 출판을 위한 HTML - 02 - br, h1, h2, h3, ..., h6, hr (0) | 2018.10.14 |
| 전자책 출판을 위한 HTML - 01 - html, head, title, body, p (0) | 2018.08.20 |