웹
타이포
•em 폰트의 전체 높이를 의미합니다.
•ex ( = x-height ) 해당 폰트의 영문 소문자 x의 높이를 의미합니다.
•Baseline 소문자 x를 기준으로 하단의 라인을 의미합니다.
•Descender 소문자에서 baseline 아래로 쳐지는 영역을 의미합니다. 서체에 따라 descender의 길이가 다릅니다. ( g, j, p, q, y )
•Ascender 소문자 x의 상단 라인 위로 넘어가는 영역을 의미합니다. ( b, d, h, l )
타이포 속성 -font-family
font-family: family-name | generic-family ( | initial | inherit );family-name: 사용할 폰트의 이름을 나타내며 ' , ' 로 구분하여 여러 개 선언 할 수 있습니다. 먼저 선언된 순서대로 우선순위가 결정됩니다. 이름 중간에 공백이 있거나, 한글일 경우 홑따옴표로 묶어서 선언합니다.
generic-family: family-name으로 지정된 글꼴을 사용할 수 없을 경우를 대비해, 브라우저가 대체할 수 있는 폰트가 필요한 경우 선택할 수 있게 해줍니다. font-family 속성의 맨 마지막에 선언해야 하며, 키워드이기 때문에 따옴표 등의 인용부호로 묶지 않는 것이 원칙입니다. 예를 들면 아래와 같이 선언하여 사용할 수 있습니다.
한글을 지원하지 않는 디바이스일 경우 해당 한글 폰트를 불러올 수 없으므로 영문명으로도 선언해 주어야합니다. 마지막에는 반드시 generic-family를 선언 해주어야 합니다. 그 이유는 선언된 모든 서체를 사용할 수 있다는 보장이 없기 때문입니다. 이때 generic-family를 선언해주면, 시스템 폰트 내에서 사용자가 의도한 스타일과 유사한 서체로 적용되기 때문입니다. 또한, 자식 요소에서 font-family를 재선언하면 부모에 generic-family가 선언되어있어도 다시 선언해주어야 합니다.
Generic-Family에는 대표적인 서체로 serif, sans-serif가 있습니다. serif는 삐침이라는 뜻이고, sans는 프랑스어로 '~이 없이'라는 의미가 있습니다. serif는 글자 획에 삐침이 있는 폰트로 대표적으로 명조체가 있으며, sans-serif는 획에 삐침이 없는 폰트로 대표적으로 돋움체가 있습니다.
타이포 속성 -line-height
line-height: normal | number | length | initial | inherit ;line-height 속성을 이용해 이 행간을 조정할 수 있습니다.
그러나 정확하게 line-height는 줄의 높이를 의미하는 것이고, 이를 이용해서 행간을 조정할 수 있는 것입니다.
line-height로 제어되는 부분을 line-box라고도 하며 이는 타이포그래피 구조에서 배웠던 [em 박스] + [상하단의 여백]까지를 의미합니다.
font-size 를 10px, line-height 를 30px로 잡는다면 위아래 여백이 각각 10px씩 적용된다는 말.
number로 값을 지정하면: 부모 요소의 숫자 값이 그대로 상속됩니다. 즉, 자식 요소에서도 또 한 번 자식 요소의 font-size를 기준으로 계산된 값을 가집니다.
%로 값을 지정하면: 부모 요소에서 %값이 그대로 상속되는 것이 아니고, %에 의해 이미 계산된 px값이 상속됩니다.
body { font-size: 20px; line-height: 2; } /* line-height = 40px; */
p { font-size: 10px; } /* line-height = 20px; */
/*font-size가 10px이고 line-hegiht가 2배로 지정됨에 따라 20px로 잡힘.*/
body { font-size: 20px; line-height: 200%; } /* line-height = 40px; */
p { font-size: 10px; } /* line-height = 40px; */
/*font-size가 10px이고 line-height가 부모쪽에서 200%로 상속받았음으로 부모의 font-size인 20px의 200%인 40px로 상속받아 위아래 여백이 각각 15px 도합 30px로 잡힌다.*/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; }
.parent { font-size: 1.5em; line-height: 200%; }
.child { font-size: 15px; }문제풀이:
em에 대해 개념을 제대로 몰랐어서, 검색했다.
https://medium.com/watcha/watcha-%EA%B0%9C%EB%B0%9C-%EC%A7%80%EC%8B%9D-px-em-rem-f569c6e76e66
위 링크에서 까먹을 때마다 복습하자.
(링크내용중 일부) em은 상대적 비율이란 것을 잊지말자. em 은 적용되어 있지만 글자 크기가 적용되어 있지 않아서 부모의 값을 받아오는 경우엔(font-size 는 상속형 속성이다) 부모의 글자 크기를 물려받아 자식(div) 의 글자 크기가 “먼저” 적용되고, 그 후에 em 에 의해 너비가 계산된다.
child를 구하기 위해 parent값을 보면 1.5em이라 되어있다. 하지만 절대적 크기가 정해져있지 않음으로 부모값인 wrap을 상속한다. 20 * 1.5임으로 30px이고 이후에 line-height를 계산하면 60px이다. %를 사용했기 때문에, child에도 그대로 line-height가 상속되어 60px이 유지됨으로 답도 60px이다.
위 링크를 읽다가 배운 내용중, rem을 주로 많이 사용한다더라. rem은 맨위 root(html)값의 절대적 폰트크기를 가져오기때문에 절대적 크기하나만 정해놓고 rem으로 나머지 글자 크기들을 비율에 맞춰 조정하기때문.
타이포 속성-font-size
font-size는 기본적으로 medium으로 설정되어있지만 이런 절대적인 값을 제공하는 keyword는 브라우저별로 출력이 조금씩 다르기때문에 실무에서는 잘 사용하지 않는다고 한다.
relative size (keyword) 부모 요소의 font-size 크기에 대해 상대적입니다. smaller는 0.8배, larger는 1.2배입니다.
length px, em, rem 등의 단위를 이용하여 고정된 크기를 지정할 수 있습니다. - em : 부모 요소의 font-size에 em 값을 곱한 크기 - rem : 루트의 font-size에 rem 값을 곱한 크기
percent (%) 부모 요소의 font-size를 기준으로 백분율 계산된 값을 지정할 수 있습니다.
viewport units vw, vh 단위로 뷰포트를 기준으로 하여, 유동적인 font-size를 지정할 수 있습니다. vw는 뷰포트 width의 1%, vh는 뷰포트 height의 1% 값을 가집니다.
Q. .section 요소의 font-size로 알맞은 것을 고르시오.
<html>
... 중략 ...
<div class="wrap">
<div class="content">
<div class="section"></div>
<div class="article"></div>
<div class="footer"></div>
</div>
</div>
... 중략 ...
</html>
html { font-size: 16px; }
.wrap { font-size: 1.5rem; }
.section { font-size: 1.5em; }내친김에 이 질문도 가져왔다. section 요소는 em임으로 부모값을 상속받는다. wrap은 rem임으로 root값, 즉 html 값을 상속받는다.
16*1.5=24px, 24px * 1.5 = 36px이다.
타이포 속성-font-weight
font-weight: normal | bold | bolder | lighter | number | initial | inherit ;normal: 기본 값 (400)
bold: 굵게 표현(700)
bolder: 부모 요소 보다 두껍게 표현
lighter: 부모 요소 보다 얇게 표현
number: 100, 200, 300, 400, 500, 600, 700, 800, 900 (클수록 더 두껍게 표현)
실무에서는 normal과 bold를 많이 사용하고, 부모 요소에 영향이 있는 bolder와 lighter는 사용을 될 수 있으면 지양하는 편입니다.
기본적으로 400은 normal과 같고, 700은 bold와 같습니다
그러나 수치를 이용한 font-weight는 폰트 자체에서 지원을 해야 표현할 수 있습니다.
normal과 bold만 지원하는 폰트일 경우에는 100~500까지는 normal로, 600~900까지는 bold로 표현됩니다.
타이포 속성 -font-style / 속성 -font-variant
font-style: normal | italic | oblique | initial | inherit;글꼴 스타일을 변경해줌.
font-variant: normal | small-caps | initial | inherit ;소문자를 작은 대문자로 바꿔주는 역할.
내 의지문제지만, 알고리즘이나 도커 공부에 비해 웹ui공부는 너무 따분하다는 생각이 들어서, 원래는 이 강좌를 끝나고 들어야하는 웹 프로그래밍 강좌를 한번 도전해보려 한다.
