=================================
=================================
=================================
출처: http://kukie.net/resources/design/font_size.html
글꼴의 단위에 따른 크기 비교표
by kukie
브라우저의 기본 글꼴크기(1em/100%)를 기준으로한 글꼴 비교표.
pt/px에 익숙한 제작자/사용자는 CSS 초보가 당황할 만한 것 #2를 참고하시기 바랍니다.
| points | pixels | ems | percent |
|---|---|---|---|
| 글꼴 6pt | 글꼴 8px | 글꼴 0.5em | 글꼴 50% |
| 글꼴 7pt | 글꼴 9.5px | 글꼴 0.55em | 글꼴 55% |
| 글꼴 7.5pt | 글꼴 10px | 글꼴 0.6em | 글꼴 60% |
| 글꼴 8pt | 글꼴 11px | 글꼴 0.7em | 글꼴 70% |
| 글꼴 비교하기 9pt | 글꼴 비교하기 12px | 글꼴 비교하기 0.75em | 글꼴 비교하기 75% |
| 글꼴 10pt | 글꼴 13px | 글꼴 0.8em | 글꼴 80% |
| 글꼴 10.5pt | 글꼴 14px | 글꼴 0.85em | 글꼴 85% |
| 글꼴 11pt | 글꼴 15px |
글꼴 0.95em | 글꼴 95% |
| 글꼴 12pt | 글꼴 16px | 글꼴 1em | 글꼴 100% |
| 글꼴 13pt | 글꼴 16.5px | 글꼴 1.05em | 글꼴 105% |
| 글꼴 14pt | 글꼴 19px | 글꼴 1.1em | 글꼴 110% |
| 글꼴 15pt | 글꼴 20px | 글꼴 1.25em | 글꼴 125% |
| 글꼴 16pt | 글꼴 21px | 글꼴 1.3em | 글꼴 130% |
| 글꼴 17pt | 글꼴 23px | 글꼴 1.45em | 글꼴 145% |
| 글꼴 18pt | 글꼴 24px | 글꼴 1.5em | 글꼴 150% |
| 글꼴 19pt | 글꼴 25px | 글꼴 1.55em | 글꼴 155% |
| 글꼴 20pt | 글꼴 27px | 글꼴 1.7em | 글꼴 170% |
| 글꼴 21pt | 글꼴 28px | 글꼴 1.75em | 글꼴 175% |
| 글꼴 22pt | 글꼴 29px | 글꼴 1.8em | 글꼴 180% |
| 글꼴 23pt | 글꼴 31px | 글꼴 1.95em | 글꼴 195% |
| 글꼴 24pt | 글꼴 32px | 글꼴 2em | 글꼴 200% |
관련 URL
=================================
=================================
=================================
출처: http://stackoverflow.com/questions/11012724/change-font-size-depending-on-resolution
|
9
11
|
I'm developing a Web page that uses different sizes for its different paragraphs, h... and so on. I'm using em sizes: font-size: 2em;, as an example. But when I change my screen resolution to a lower one, I want that size to a smaller one.
For that purpose, I tried this code: <script></script> First: it doesn't work... Second: I think there should be cleaner way to do so... So, the question is: how to use different sizes to my fonts or how to make them adjust for different resolutions? Can anyone help please? Thanks!
|
||||||||||||||||
|
|
28
|
Try to use this concept proof CSS:html { font-size: 62.5%; } body { font-size: 1em;} @media (max-width: 300px) { html { font-size: 70%; } } @media (min-width: 500px) { html { font-size: 80%; } } @media (min-width: 700px) { html { font-size: 120%; } } @media (min-width: 1200px) { html { font-size: 200%; } }Working demo on jsFiddle |
=================================
=================================
=================================
출처: http://kese111.blogspot.kr/2013/01/webview-viewport.html
webview - viewport 사용하여 다해상도에서 동일한 웹페이지 보여주기
안드로이드 기기들의 해상도 파편화는 웹뷰를 사용할 때도 똑같이 문제가 됩니다. 만약 고정된 사이즈를 갖는 콘텐츠를 웹페이지 형태로 보여주고자 하면, 해당 문제로 골치를 꽤나 썩게 됩니다.
이런 문제를 해결하기 위해서는 webkit 엔진에서 사용하는 viewport meta-tag를 사용해야 합니다. 같은 webkit 이므로 ios에서도 동일하게 적용됩니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
webview.getSettings().setUseWideViewPort(true);Display display = getWindowManager().getDefaultDisplay();DisplayMetrics metrics = new DisplayMetrics();display.getMetrics(metrics);Format df = new DecimalFormat("##.##");int contentWidth = 720; //content web page widthint deviceWidth = metrics.widthPixels;String viewport = null;if ( contentWidth > deviceWidth ){ String scale = "1.0"; scale = df.format( (float)deviceWidth / (float)contentWidth ); contentWidth = deviceWidth; viewport = "";} else { viewport = "";}Log.i("TEST", viewport);data += viewport; |
자세한 사항은 여기 참고하시고 -
Targeting Screens from Web Apps
왜 이런 일이 발생하는지를 간단히 요약해드리겠습니다.
안드로이드에서 default dpi 값은 160 입니다. medium-dpi 라고 말하는 이 값의 뜻은
dpi :dots per inch 약자 입니다.
인치당 얼마의 dots 가 존재하느냐? 이런 의미지요.
안드로이드의 해상도는 이 dpi 값이 160일 때를 기본형, 즉 1로 처리합니다.
그러므로 만약 해상도가 480 x 800 인 기기가 있다고 했을때, 이는 실제로 화면 픽셀이 480x800인 것이 아니고, 기기 해상상도에 dpi 값이 곱해진 값입니다.
즉, 기기의 dpi 가 240 이라고 한다면. 이는 240/160 = 1.5 가 곱해진 해상도입니다.
이에 따른 실제 기기의 해상도는 320x533 인 것 입니다.
이런 상황에서 480px 800px 의 웹페이지를 그냥 로드하려고 하면 당연히 화면이 넘쳐나게 됩니다. 때문에 viewport를 통해 실제 웹페이지를 그려놓을 곳의 size를 정해주는 것입니다.
=================================
=================================
=================================
출처: http://stackoverflow.com/questions/21694306/how-to-set-text-size-in-webview-in-android
For setting text size from layout-
final WebSettings webSettings = web.getSettings(); Resources res = getResources(); fontSize = res.getDimension(R.dimen.txtSize); webSettings.setDefaultFontSize((int)fontSize);For Immediate text display-
webSettings.setRenderPriority(RenderPriority.HIGH); webSettings.setCacheMode(WebSettings.LOAD_NO_CACHE); webSettings.setAppCacheEnabled(false); webSettings.setBlockNetworkImage(true); webSettings.setLoadsImagesAutomatically(true); webSettings.setGeolocationEnabled(false); webSettings.setNeedInitialFocus(false); webSettings.setSaveFormData(false);In values folder-
<resources> <dimen name="txtSize">26sp</dimen> </resources>Hope it works.
=================================
=================================
=================================
출처: http://aboooks.tistory.com/142
CSS3: {font-size:*rem} new relative value.
CSS3 font-size 속성 값으로 새로운 상대적 단위 ‘rem’을 사용할 수 있게 됐습니다.
- 용법 – http://snook.ca/archives/html_and_css/font-size-with-rem
- 명세 – http://www.w3.org/TR/css3-values/#font-relative-lengths
- 브라우저 지원 현황 – http://caniuse.com/#search=rem (IE9 브라우저와 최신 브라우저에서 모두 지원합니다. 하지만 IE9 미만을 지원하는 폴백이 있습니다. 용법 참조.)
rem 값의 의미
본래 em이라는 단위는 글꼴 세트의 알파벳 대문자 ‘M’의 너비를 의미한다고 합니다. 어원 자체는 그렇고 통상 웹 브라우에서는 1em = 16px 으로 환산이 되고요. 1em은 웹 브라우저에서 글꼴 사이즈를 지정하지 않았을 때 표시되는 글꼴 크기의 기본값입니다. CSS3의 글꼴 크기 값으로 새로 등장한 ‘rem’ 단위는 root em 이라는 의미입니다. HTML 문서에서 root 요소는 <html> 요소를 의미하고 html 요소에 지정된 글꼴 크기로부터 선택된 요소의 글꼴 크기를 상대적으로 결정하는 것이 바로 rem 단위의 핵심입니다.
’em’ vs ‘rem’
em 단위는 부모로부터 글꼴 크기를 물려받지만, rem 단위는 부모가 아닌 시조(root = html)로부터 글꼴 크기를 물려받는다는 점이 다릅니다. 예를 들어.. em 단위는 부모로부터 글꼴 크기를 물려받기 때문에 같은 값을 지니더라도 노드가 깊어질수록 글꼴 크기가 기하 급수적으로 크거나 작아집니다. 이런 방식의 문제는 부모 또는 조상 노드 가운데 어떤 요소의 글꼴 사이즈 값을 변경할 때 모든 자식과 자손 요소도 그 영향을 받는다는 점입니다. 예측하기 어렵고 계산하기 복잡하다는 것이 치명적인 문제입니다. 글꼴의 확대 축소를 유연하게 만들기 위한 목적으로 존재하지만 복잡하기 때문에 개발자들은 이 방법을 기피해왔습니다.
- html = 100% = 16px
- body = 0.5em = 8px
- div = 0.5em = 4px
- p = 0.5em = 2px
- div = 0.5em = 4px
- body = 0.5em = 8px
rem 단위는 부모 아닌 시조로부터 글꼴 크기를 물려받기 때문에 html 요소에 기본 글꼴 크기를 지정해 두면 항상 html 요소로부터 글꼴 크기를 상속 받습니다. html 요소의 글꼴 크기를 변경하는것 만으로 페이지의 모든 글꼴 크기를 변경할 수 있다는 점 자체는 em 요소와 다를바 없지만 rem 요소는 부모 요소로부터 상속을 받지 않기 때문에 페이지 모든 글꼴의 크기 변화를 예측할 수 있고 계산하기도 쉽습니다. em 단위를 사용했을 때 p 요소가 2px 크기로 현실성 없게 작아진 것에 비하면 rem 단위를 사용했을 때에는 그렇지 않게 됩니다.
- html = 100% = 16px
- body = 0.5rem = 8px
- div = 0.5rem = 8px
- p = 0.5rem = 8px
- div = 0.5rem = 8px
- body = 0.5rem = 8px
유용한 상황
단말기의 해상도에 따라 기본 글꼴 크기를 전체적으로 다르게 제어할 필요가 있을 때 미디어쿼리와 함께 rem 단위를 사용하면 효과적입니다. 예를 들어 데스크톱 글꼴이 10px ~ 20px 범위인데 모바일 단말에서 전체적으로 20px ~ 40px 범위로 키우고 싶다면 CSS 만으로 아주 간단하게 처리할 수 있습니다.
4개의 댓글이 있습니다.
=================================
=================================
=================================
[html/css]글꼴 크기를 지정하는 font-size 속성(px, pt, %, em 차이)
css에서는 글꼴 크기를 지정할 때 font-size 속성을 사용합니다.
사용 예
p
{font-size: 1em;
}
[html/css] 글꼴을 지정하는 font 속성 배우기
속성값은 다음과 같습니다.
절대값 : 고정된 크기. 장치에 따라 크기를 조절할 수 없음.
px, pt, cm 등의 단위로 지정하거나
xx-small, x-small, small, medium, large, x-large, xx-large 중에서 선택
medium은 기본값으로 12pt=19px=13m=100%
*구 IE 버전의 경우, small이 기본값이라 doctype을 선언해주어야 medium이 기본값으로 나옵니다
DOCTYPE 선언하는 이유와 버전별 선언 정리 (HTML5, HTML 4, XHTML)
상대값 : 상대적인 크기. 장치에 따라 크기 조절이 가능함.
em, %, smaller, larger
* 웹 문서의 경우 기본 글꼴은 %(예: body 의 글꼴), 그 외 css 작성은 em으로 사용할 것을 권장합니다.
상속 여부 : YES
설명▶
pixel (px) : 고정된 크기 단위. (주로 컴퓨터 화면에서 사용됨)
1px은 컴퓨터 화면에서 점 1개와 같음.
크기가 조정이 안 된다는 단점이 있음.
point(pt) : 고정된 크기 단위. (주로 인쇄 매체에서 사용됨)
크기 조정이 안 됨
em: 웹 문서에서 사용되는 단위로, 컴퓨터 외 모바일 등 다른 장치에서도
크기 조정이 가능함. 1em은 12pt, 16px 100%와 같음.
(em은 대문자 M의 크기를 뜻한다고 함)
percent(%) : em과 비슷하게 다른 장치에 상대적으로 크기 조절이 가능함
xx-small = 9px = 0.5625em
x-small = 10px = 0.625em
small = 13px = 0.812em
medium = 16px =12pt = 1em
large = 18px = 1.125em
x-large =24px = 1.5em
xx-large = 32px = 2em
smaller : 상위 요소에 비해 상대적으로 더 작은 크기
larger : 상위 요소에 비해 상대적으로 더 큰 크기.
실제 사용 예를 보겠습니다~
html/css 작성▶
fontsize.htm
더보기
실행화면입니다▶
왼쪽이 body{ font-size: 100%} 화면이고, 오른쪽이 body{ font-size: 120%} 화면입니다
px, pt, xx-small의 경우 글자 크기가 그대로인데 em과 %로 글꼴을 설정한 텍스트는 글자가 더 커지네요.
▶ em 과 %
둘 다 상대적인 값에, 장치에 따라 크기 조절이 가능한데요
일부 브라우저에서 사용자가 텍스트 크기 설정을 바꿀 경우 크기 차이가 생깁니다.
IE 상단에서 보기>텍스트 크기>에서
보다 크게를 설정하면 em은 원래의 크기보다 너무 크게 표시되고
보다 작게를 설정하면 em은 원래의 크기보다 너무 작게 표시됩니다.
그래서 css를 작성할 대 기본 글꼴은 %로 설정하고(예 : body{ font-size: 100%})
그 외 css는 em으로 작성하는 것이 좋다고 하네요.
▶ 아래 표는 글꼴 크기를 px, pt, em, % 별로 정리해 본 것입니다.
h1, h2, h3, h4, h5, h6, xx-small, x-small, small, medium, large, x-large, xx-large의
px 크기나 em 크기를 같이 비교해서 보세요.
(브라우저마다 약간씩 차이가 있으므로, 다른 브라우저가 궁금하신 부분은 아래 링크 참조해 주세요)
http://css-class.com/test/css/defaults/UA-style-sheet-defaults.htm
▶ px 픽셀을 em 으로 환산하는 방법 : 1/16 x 픽셀값
예)
16px = 16/1 x 16 = 1em
15px = 16/1 x 15 = 0.9375 em
=================================
=================================
=================================
출처: http://tohyeon.catb.kr/Th_Study/10remark/02size.html
(1) 크기 표시 방법에 대하여
- HTML, 스타일시트, 자바스크립트 등에서 크기를 지정하는 방법에 차이가 있다.
- 특히 스타일시트에는 다양한 지정방법이 있으므로 융통성이 매우 높으며,
- 스타일시트 이외에는 픽셀(px)과 과 백분율(%)만 사용할 수 있다.
(2) 상대적인 크기 표시방법 : ()는 CSS에서만 사용
| px | ㅇ 1픽셀을 1로하는 단위로서 컴퓨터 모니터를 기준으로 하기 때문에 컴퓨터의 해상도에 따른 상대적 크기로서 표시 됨으로 유의해야 함. |
| % | ㅇ 백분비율로서 크기를 나타낸다. ㅇ 기준으로 하는 대상은 같은 요소안의 다른 속성값, 또는 부모요소의 속성값, 자신을 포함하는 블록의 너비가 된다. |
| (em) | ㅇ 해당 영역안에서 유효폰트의 높이를 1로 하는 단위가 된다. ㅇ 폰트크기에 지정하는 경우는 부모요소의 유효한 폰트높이를 기준한다. |
| (ex) | ㅇ 해당 영역안에서 유효한폰트의 소문자 "x"의 높이를 1로하는 단위가 된다. ㅇ"x"를 포함하지 않는 폰트에도 적용할 수 있다. |
(3) 절대적인 크기 표시방법 :()는 CSS에서만 사용
| (in) | ㅇ 인치 단위이며 약 2.54cm를 1로하는 단위이다. |
| (cm) | ㅇ 센티미터 단위이며 10mm를 1로하는 단위이다. |
| (mm) | ㅇ 밀리미터 단위이며 1/10cm을 1로하는 단위가 된다. |
| (pt) | ㅇ 포인터 단위이며 1/72인치를 1로하는 단위가 된다. |
| (pc) | ㅇ 파이커 단위이며 12포인터를 1로하는 단위가 된다. |
(4) 글씨에 크기를 적용한 예(1) : <FONT Size= "x" > 표현할 글자 </FONT>
Font Size를 1 로 지정하였습니다 Font Size를 2 로 지정하였습니다 Font Size를 3 로 지정하였습니다 Font Size를 4 로 지정하였습니다 Font Size를 5 로 지정하였습니다 Font Size를 6 으로 지정. Font Size 7. 최대.
(5) 글씨에 크기를 적용한 예(2) : <Span Style=" font-size : xxxpt ; "> 표현할 글자 </Span>
Font-Size를 6pt로 지정하였습니다 Font-Size를 7pt로 지정하였습니다 Font-Size를 8pt로 지정하였습니다 Font-Size를 9pt로 지정하였습니다 Font-Size를 10pt로 지정하였습니다 Font-Size를 11pt로 지정하였습니다 Font-Size를 12pt로 지정하였습니다 Font-Size를 13pt로 지정하였습니다 Font-Size를 14pt로 지정하였습니다 Font-Size를 15pt로 지정하였습니다
=================================
=================================
=================================
기타 참고 사이트
- http://jsfiddle.net/ra2h9/3/
=================================
=================================
=================================
그렇군요. 우리나라도 html5와 css3를 맘껏 쓸수있는 인터넷 환경이 빨리 왔음 좋겠네요. rem 함 적용해봐야겠어요.
좋군요 :) -_-b
아.. em 쓸때마다 ㅋㅋ.. 내가 계산안되는 무식인가? 하고 멘붕엄청왔었는데 ㅋㅋ
와.. 이걸로 한번 해봐야겠네요!! ㅎㅎ
감사합니다!
CSS3로 업댓되면서 정말 별의별게 다 나오는군요…
참 신기하면서도 배울 게 하나하나 늘어간다는 머리아픔이… ^^
여기는 생각날 때마다 한번씩 들르게 될 거 같네요~*