6.폰트, 텍스트
1) 속성-typography
•em : 폰트의 전체 높이
•ex ( = x-height ) : 해당 폰트의 영문 소문자 x의 높이
•Baseline : 소문자 x를 기준으로 하단의 라인을 의미
•Descender : 소문자에서 baseline 아래로 쳐지는 영역을 의미. 서체에 따라 descender의 길이가 다르다. ( g, j, p, q, y )
•Ascender : 소문자 x의 상단 라인 위로 넘어가는 영역을 의미. ( b, d, h, l )
3) 속성-line-height
- line-height : 텍스트 라인의 높이
line-height로 제어되는 부분을 line-box라고도 하며 이는 타이포그래피 구조에서 배웠던 [em 박스] + [상하단의 여백]까지를 의미한다.이를 이용해서 행간을 조정할 수 있다.
- 속성 -
- normal : 기본값으로 브라우저의 기본 속성을 따른다.폰트에 따라 브라우저에 따라 다르지만 보통 1.2 정도로 할당되어 있다.
- number : font-size를 기준으로 설정한 숫자만큼 배율로 적용한다.
- length : px, em 등 고정 수치로 할당할 수 있다.
- % : font-size를 기준으로 설정한 퍼센트만큼 배율로 적용한다.
※ number로 선언할 때와 %로 선언할 때. 두 값 모두 font-size를 기준으로 동작하지만, line-height의 값이 자식 요소로 상속되었을 때의 계산 방식이 다르다.
- number : 부모 요소의 숫자 값이 그대로 상속된다. 즉, 자식 요소에서도 또 한 번 자식 요소의 font-size를 기준으로 계산된 값을 가진다.
- % : 부모 요소에서 %값이 그대로 상속되는 것이 아니고, %에 의해 이미 계산된 px값이 상속된다.
body { font-size: 20px; line-height: 2; } /* line-height = 40px; */
p { font-size: 10px; } /* line-height = 20px; */
body { font-size: 20px; line-height: 200%; } /* line-height = 40px; */
p { font-size: 10px; } /* line-height = 40px; */이처럼 계산된 값이 아닌 숫자 값을 상속한다는 사실 때문에, 숫자 값을 사용하면 부모 엘리먼트에서 계산된 값 대신 비율을 그대로 상속받을 수 있으므로, 가능하면 단위가 없는 값을 사용하는 것이 좋다.
Q. 아래 코드에서 .child의 line-height 값을 구하면?
<div class="wrap">
<div class="parent">
<div class="child">line-height 값 계산</div>
</div>
</div>
.wrap { font-size: 20px; line-height: 2; } /*line-height : 40px */
.parent { font-size: 1.5em; line-height: 200%; } /*line-height : 3em */
.child { font-size: 15px; } /*line-height : 60px */
뭐지,,,풀었는데 왜 60px인지 기억이 안나네,,,다시 안풀린다,,,,,,,,,,,,,,(수정 예정)
'WEB > CSS' 카테고리의 다른 글
| [edwith] transform 속성 활용 (0) | 2020.04.22 |
|---|---|
| [edwith] Float기반 Layout (0) | 2020.04.22 |
| [edwith] Position 속성을 이용한 Layout (0) | 2020.04.22 |
| [edwith] CSS에서의 상속 개념 (0) | 2020.04.21 |
| [edwith] CSS를 HTML에서 사용하는 방법 (0) | 2020.04.21 |
