| sitelink1 | https://toofin.blog.me/221176192763 |
|---|---|
| sitelink2 | |
| sitelink3 | |
| sitelink4 | |
| extra_vars5 | |
| extra_vars6 |
보통의 웹은 텍스트와 이미지 그리고 동영상이 보여진다. 그중에서 가장 비중이 큰 부분이 텍스트(문자, 글)일 것이다.
오늘은 비중이 매우 큰 텍스트의 크기를 지정하는 방법에 대해 이야기 하고자 한다.
사실, font-size는 고민할 필요도 없었다. 옛날에는 그랬다.
나는 한국에서 살고 있으니까, 거의 익스플로러 브라우저 기준으로만 작업을 했었다.
그리고 반응형 웹사이트를 굳이 고려하지 않아도 되는 시절이었기에 폰트사이즈의 값을 정할 때 딱 한가지만 고려하면 됐다.
사용자(user)가 폰트 크기를 바꿀 수 있도록 할까? 아니면 무조건 내가 지정한 크기로 보이게 할까?
( 익스플로러 브라우저의 [ 메뉴 > 보기 > 텍스트 크기 ] 를 선택했을 때의 변화 여부이다. 확대 축소 기능과 다른 기능이다.
크롬 브라우저에서는 이 기능이 따로 없는 줄 알았는데, 있었다. 설정 메뉴의 모양 카테고리에 글꼴 크기를 조절할 수 있는 부분이 있다. )
당시의 나는 px(픽셀, 1인치의 1/96의 크기) 나 pt(포인트, 1인치의 1/72의 크기) 단위로 내가 지정한 크기 대로만 보이도록 작업을 했었다.
한국의 인터넷 환경은 변했다. 여전히 익스플로러의 인기는 높지만, 크롬의 점유율은 꾸준히 상승하고 있고,
어마무시한 크기를 자랑하는 모니터가 pc시장에서 인기를 끄는 반면, 손바닥만한 액정으로 하지 못할 것이 없는 세상이 되었다.
확연히 차이가 나는 다양한 기기에서 내가 만든 사이트가 보여질 것이 예상된다.
즉, 더이상 px나 pt만 고집할 수 없는 환경이 됐다.
※ w3가 권장하는 길이 표현 단위가 있습니다.
screen(화면)은 em, px, % 이며, print(인쇄)는 em, cm, mm, in, pt, pc, % 입니다.
font-size
Default value : medium( = 16px = 1em = the default text size in browsers ) / Inherited : Yes / Animatable : Yes /
Version : css1 / javaScript syntax : object.style.fontSize = "14px"
값 value : 브라우저마다 계산되어 고정이 되어 있는 값, 부모 태그의 영향을 받는 값, initial, inherit
참고 사이트 : https://www.w3schools.com/cssref/pr_font_font-size.asp
참고 사이트 : https://www.w3.org/wiki/CSS/Properties/font-size#CSS_Reference
브라우저마다 계산되어 고정이 되어 있는 값 : 절대 크기 키워드, 절대 단위
절대 크기 키워드 : [ xx-small | x-small | small | medium | large | x-large | xx-large ]
( 절대 크기 키워드는 Html font 태그의 속성(attribute) size의 값(value)과 Html heading 태그들과 매치된다. xx-small은 1 그리고 <h6>, small은 2 그리고 <h5>, medium은 3 그리고 <h4>, large는 4 그리고 <h3>, x-large는 5 그리고 <h2>, xx-large는 6 그리고 <h1>. )
절대 크기 키워드는 가독성을 위해서 9px보다 작게는 표현되지 않는다.
같은 브라우저 내에서도 절대 크기 키워드는 글꼴(서체, font-family)마다 그 크기가 달라진다. 또한 브라우저별로 보여지는 크기도 차이가 있다.
절대 단위 : px, pt, cm, in, mm, pc
픽셀을 사용하는 경우에도 확대/축소 도구를 사용하여 전체 페이지 크기를 조정할 수 있는 환경에서 절대 단위의 효용은 이제, 인쇄 용도로 사용할 때이다.
1in = 2.54cm = 25.4mm = 72pt = 6pc
참고 사이트 : https://drafts.csswg.org/css-values-4/#absolute-lengths
부모 태그의 영향을 받는 값 : 상대 크기 키워드, 상대 단위
상대 크기 키워드 : [ smaller | larger ]
상대 크기 키워드가 적용된 태그의 폰트 크기는 그 태그를 둘러싸고 있는 부모 태그 보다 커지거나 작아지거나 한다.
상대 단위 : 퍼센트(%), em, rem
부모 앨리먼트(태그)의 영향을 받는다.
참고 사이트 : https://www.w3.org/Style/Examples/007/units.en.html
참고사이트 : https://drafts.csswg.org/css-values-4/#relative-lengths
em, rem
부모 태그의 폰트 사이즈가 16px 일때 자식 폰트 사이즈를 1em으로 설정한다면 자식 폰트의 절대 단위 크기는 16px이다.
부모 태그의 폰트 사이즈가 18px 일때 자식 폰트 사이즈를 1em으로 설정한다면 자식 폰트의 절대 단위 크기는 18px이다.
부모 태그 폰트 사이즈가 40px 일때, 자식 폰트 사이즈를 0.5em으로 설정했다면, 이는 부모 크기에서 50% 작은 크기가 자식 폰트의 크기가 되는 것이다. 즉, 20px가 되겠네요.
이게 뭔 소리인가?, 할 지도 모르겠습니다.
em은 기준값의 비례 크기입니다.
그러니 기준값이 꼭 있어야 할 테고, 그 기준값을 가지고 있는 것이 바로 부모 태그라는 말입니다.
이러한 상황이니 기준값이 바뀌면 기준값의 비례 크기가 변하는 것이 당연하겠죠?
왜 em 단위를 쓸까요?
제 공부가 아직 완전하지 않은 관계로 딱 이렇다 라고 대답할 수 없지만, 대충 짐작은 됩니다.
이미지를 공부하면서 (https://toofin.blog.me/221169584790) 비슷한 내용을 언급한 적이 있습니다.
7. 큰 스크린, 작은 스크린, 큰 해상도, 작은 해상도 등으로 구별되는 각각의 디바이스에
각각의(다른) 이미지를 보여주어야 할 때가 있습니다.
이 때는 <img> 태그, <img> 태그의 srcset 속성과 size 속성을 활용하거나,
<picture> 태그로 목적하는 바를 이룰 수 있습니다.
다양한 디바이스 기종에서 큰 틀어짐 없이 보여지고 싶으면서, 큰 수고는 쏟아붇고 싶지 않을 때, 반응형으로 레이아웃을 디자인합니다.
그 때, 뷰포트(viewport) 값이 달라질 때마다 폰트 크기에 변화를 주고 싶다면,
하나하나 값을 변경하는 것보다는
기준이 되는 텍스트 크기만 변경해주면 나머지는 척척 바뀌는 시스템이 효율적이겠지요.
( 뷰포트(viewport) : 브라우저에 보이는 영역을 기술적으로 ‘뷰포트’라고 한다. 뷰포트가 디바이스의 스크린 사이즈와 항상 일치하지는 않는다.
특히 사용자가 브라우저 창을 리사이즈할 수 있는 경우에는 브라우저에서 보이는 영역이 스크린 사이즈와 동일하지 않다. )
em을 px로, px를 em으로 바꾸기.
저의 경우입니다만, 전체적인 디자인의 80%는 포토샵으로 합니다.
그러다 보니 디자인 폰트 크기 단위는 px입니다. 그리고 이 디자인을 가지고 퍼블리싱을 합니다.
폰트 크기를 설계를 em 단위로 하고 싶다면, px를 em으로 바꾸는 과정이 필요하겠지요.
대단히 간단합니다.
곱해주면 됩니다. 또는 나눠주면 됩니다.
브라우저의 폰트 디폴트값(초기 설정값)은 medium인데, 16px입니다.
<body>
<h1> </h1>
<h2> </h2>
<p> <span> </spa> </p>
</body>
<body> 태그를 16px, <h1>를 24px , <h2>를 20px, <p>를 15px, <span>은 12px으로 하고 싶다면....
<body style="font-size:16px"> <-- <body> 태그는 <h1>, <h2>, <p>를 감싸고 있는 부모 태그입니다.
<h1 style="font-size:1.5em"> </h1>
<h2> </h2>
<p style="font-size=0.938em"> <span> </span> </p>
</body>
기준값을 알고, em으로 바꾸고자하는 px값을 알고 있을 때, 그 px의 em값을 구하려면 나누기를 하십시오.
바꾸고자하는 px값 ÷ 기준값 px = ?em
<h1>은 24px <h1>의 부모 <body> 태그의 폰트 크기는 16px 이라면 24 ÷ 16 = 1.5 ,
이런 계산식을 거쳐 <h1 style="font-size:1.5em"> 문장이 됐습니다.
그럼 <span> 폰트 크기도 em 단위로 바꿔 볼께요.
<span>의 부모 태그는 <p> 태그입니다. <p>의 폰트 값이 기준값입니다. 12 ÷ 15 = 0.8
em값을 px값으로 바꿔야 할 때도 있겠지요. 이 때는 곱하기를 하십시오.
바꾸고자하는 em값 × 기준값 px = ?px
<h1> 1.5em, 그의 기준값(부모 태그 폰트 크기)이 16px이라면, h1의 px값은 1.5 × 16 = 24
<span> 0.8em , 그의 기준값이 15px라면, <span>의 px값은 0.8 × 15 = 12
이렇게 계산하면 됩니다.
그런데 굳이 px으로 다시 바꾸는 걸까요?
음..... 잘 모르겠습니다. 아마도 px 단위로 바꾸면 대충 크기를 예상할 수 있기 때문일까요?????
<body style="font-size:16px">
<h1 style="font-size:1.5em"> </h1>
<h2 style="font-size:0.125em"> </h2>
<p style="font-size=0.938em"> <span style="font-size:0.8em"> </span> </p>
</body>
rem은 em 단위처럼 기준값에 의해 비례 크기가 정해지는 것은 똑같습니다.
다만, 그 기준값이 무조건 root(<html>)라는 점이 다릅니다.
위의 예시의 span 태그의 폰트 크기를 짐작하려면 p 태그의 기준값과 span 태그의 기준값을 모두 알아야 합니다.
이렇게 부모의 기준값이 다 다르기 때문에 그 값을 예측하기가 어렵고 번거롭기 때문에,
em단위의 단점을 보충하고자 해서 나온 단위가 rem입니다.
rem은 무조건 기준값이 root 이기 때문에 계산하기가 매우 수월해졌습니다.
html { font-size : 16px; }
요렇게 적어 놓으면 rem 단위를 쓸 때의 기준값은 모두 16px가 되는 겁니다. ^______^
