HTML문서 형식으로 전자책을 만들 때,
Epub 형태의 전자책을 만든다면 html문서를 엮어 책을 만들게되므로 결국 html이나 css로 글자를 다룰 수 있어야 한다. 이번 포스팅에서는 글자와 연관된 유용한 css속성들과 그 속성(attribute)들에게 부영할 수 있는 속성값(property)를 알아보자
글자와 관련된 속성들을 설정하는 방법
기본적으로 아래 두 가지 형식은 모두 css파일에 작성하여 html문서에 반영하게 된다.
1)의 형식처럼 각 속성에 대한 값을 한 번에 설정할 수도 있고, 2)처럼 각 속성을 하나씩 꺼내와 개별로 설정 할 수도 있다.
1) font : font-style font-weight font-variant font-size line-height font-family;
(예시-css파일 안에 작성 시,)
p1 {
font : italic bold nomal 1.5em noaml serif;
}
2) font-style : italic;
(예시-css파일 안에 작성 시,)
p2 {
font : italic
}
2)의 경우 많은 font 속성 중에서도 font-style이라는 속성을 가져와 그 속성에 italic이라는 속성값을 부여한 것이다.
각 속성에 부여할 수 있는 속성값들은?
각 속성들에 입력될 수 있는 값들은 아래와 같다.
font-style : nomal italic oblique initial inherit;
font-weight : nomal bold bolder lighter number initial inherit;
font-variant : nomal small-caps initial inherit;
font-size : (숫자)px (숫자)em (숫자)rem;
line-height : nomal (숫자) (숫자)px (숫자)em (숫자)% initial inherit;
letter-spacing : namal (숫자)px (숫자)em initial inherit;
각 브라우저마다 html문서를 실행할 때 font 속성들에 대한 기본값(defualt)들이 정해져있다. 속성값을 "initial"로 부여하면 브라우저들이 가지고 있는 기본겂을 그대로 적용하게 된다.
그리고 <div></div>영역 안에 <p></p>가 있다고 할 때 <div>영역에 대한 속성값을 부여한 후 <p>영역의 속성값을 "inherit"로 부여하면 <p>영역은 상위 영역인 <div>이 속성값을 그대로 가져와(=상속받아) 적용하게된다.
[css 파일 안]
div { font-style : italic; }
p1 {
font-style : inherit;
}
[html 파일 안]
<div>
<p1>
여기는 font-style이 italic으로 나옵니다. div영역의 font-style속성에 대한 속성값 상속!
</p1>
</div>
size단위인 em과 rem 역시 상속의 개념이 적용된 속성값들이다. 다만, em이 inherit처럼 '상위 영역'의 속성값을 "1"로 보고 지정된 비율만큼 size가 조정된다면 rem은 상속할 속성값을 'html 문서의 기본값'을 정해두고 있다는 점에서 차이가 있다. 이 차이는 이중 상속이 발생할 때 뚜렸하게 드러난다. 예를 들어보자.
<body></body>영역 안에 <div></div>영역이 있고, <div></div> 안에 <p></p>가 들어있는 html문서가 있다. 그리고 <body>의 font-size는 html 문서 전체의 기본값인 10px이다. 이때, <div>와 <p>영역의 font-size를 각각 2em으로 둔다면, <div>영역은 <body>영역의 10px을 1em으로 보고 실제 font-size를 20px로 표시할 것이다.
하지만 <p>영역은 자신의 상위 영역이 <div>이므로 20px을 1em으로 처리하여 font-size를 40px로 표현할 것이다.
이에 반해 rem의 경우, 상속받을 값이 html문서 전체의 기본값인 10px로 고정되어 있으므로 <div>와 <p>에서 font-size의 속성값을 2rem으로 둘 경우, <div>든 <p>든 모두 font-size를 20px로 표현하게 된다.
마지막으로, letter-spaing은 사실 font관련 속성은 아니다. 하지만 가독성이 좋은 책을 만들기 위해 행간/자간을 얼마로 설정하느냐가 중요한만큼 본 포스팅에 추가하였다.
#html #html css #css 글자 속성 속성값 #html css font # font attribute property #em rem #font-size
'HTML' 카테고리의 다른 글
| [HTML,CSS] 외부의 CSS문서를 HTML문서로 읽어들여보자 (0) | 2021.05.16 |
|---|---|
| [HTML,CSS] HTML 문서의 구역을 나눠서 CSS를 적용해보자(2) (0) | 2021.05.07 |
| [HTML,CSS] HTML 문서의 구역을 나눠서 CSS를 적용해보자(1) (0) | 2021.05.04 |
| [HTML,CSS] 웹문서에 style을 입히다, CSS (0) | 2021.04.29 |
| [HTML] 본격적인 문서 작업을 위한 HTML tag (0) | 2021.03.22 |
댓글