[ css ] 브라우져 창 너비 높이등에 변하는 가변 폰트( 반응형 글자, 자동 크기 변경 ) 스타일 적용 > html&css

본문 바로가기
사이트 내 전체검색

html&css

[ css ] 브라우져 창 너비 높이등에 변하는 가변 폰트( 반응형 글자, 자동 크기 변경 ) 스타일 적용

페이지 정보

작성자 웹지기 댓글 0건 조회 18,766회 작성일 18-10-23 10:26

본문

css_viewport.jpg

 

em과 rem을 사용하면 기준이 되는 폰트 크기를 바꾸었을 때,

다른 폰트의 크기들도 지정해둔 것에 따라 차등적으로 바뀌어 적용되기 때문에 편리하다.

하지만 em과 rem은 브라우저의 창의 크기와는 상관이 없는 단위이다.

이와 달리 vw, vh, vmin, vmax는 브라우저 창의 가로 또는 세로 크기에 따라 변하는 폰트 단위이다.

 

vw : viewport width

 


 

 

vw단위는 웹 브라우저의 가로폭 (너비)를 기준으로 결정되는 크기다.

만약 웹 브라우저의 너비가 1280이고, 폰트 크기를 10vw라고 한다면

이 때 10vw의 크기는 1280의 1%인 12.8px이 되는 것이다.


vw단위를 지정한 예제는 곳을 클릭하면 볼 수 있다.

브라우저 창의 가로 크기를 늘렸다 줄였다 하면서 보면 글자 크기가 달라지는 것을 확인할 수 있다.

   body{
    font-size: 2vw;
}
p{
    line-height: 4vw;
}
   

vh : viewport height



vh단위는 웹 브라우저의 세로폭 (높이)를 기준으로 결정되는 크기다.

만약 웹 브라우저의 높이가 600이고, 폰트 크기를 10vh라고 한다면

이 때 10vh의 크기는 600의 1%인 6px이 되는 것이다.


vh단위를 지정한 예제는 곳을 클릭하면 볼 수 있다.

브라우저 창의 세로 크기를 늘렸다 줄였다 하면서 보면 글자 크기가 달라지는 것을 확인할 수 있다.

위의 예제에서 적용한 CSS 코드는 아래와 같다.

   body{
    font-size: 2vh;
}
p{
    line-height: 4vh;
}
   

vmin : viewport minimum



vmin 단위는 웹브라우저의 가로폭(너비)과 세로폭(높이) 중에 더 작은 값을 기준으로 한다.

vmin단위를 지정한 예제는 곳을 클릭하면 볼 수 있다.

브라우저 창의 가로 / 세로 크기를 늘렸다 줄였다 하면서 보면

가로 / 세로의 크기 관계에 따라 글자 크기가 그대로이기도 하고 달라지기도 하는 것을 확인할 수 있다.

   body{
    font-size: 2vmin;
}
p{
    line-height: 4vmin;
}
   
vmax : viewport maximum


vmax 단위는 웹브라우저의 가로폭(너비)과 세로폭(높이) 중에 더 큰 값을 기준으로 한다.

보통 창의 크기에 관계 없이 글자가 화면의 가로로 꽉 차게 만들고 싶을 때 사용한다.


vmax 단위를 지정한 예제는 곳을 클릭하면 볼 수 있다.

브라우저 창의 가로 / 세로 크기를 늘렸다 줄였다 하면서 보면

가로 / 세로의 크기 관계에 따라 글자 크기가 그대로이기도 하고 달라지기도 하는 것을 확인할 수 있다.

   
body{ font-size: 2vmax; } p{ line-height: 4vmax; }

Can I use Viewport units ?

가변 폰트 단위의 브라우저 호환성



아래에서 볼 수 있듯, 인터넷 익스프로러 8 (IE 8) 이하나 오페라 미니 Opera Mini에서 사용이 지원이 안되는 기능이다.

IE8은 전세계에서 0.55%의 유저가 사용하고 있고, 오페라 미니는 4.88%의 유저가 사용하고 있다.


사용할 때 몇몇 주의점들이 있다.

IE9에서는 vmin 대신 vm이라고 명명하여 지원하고 있다.

그리고 IE11, Edge13, Edge14에서는 vmax 단위를 지원하지 않는다.


추천0 비추천0

댓글목록

등록된 댓글이 없습니다.

Total 42건 1 페이지
  • 42 [ css ] css를 이용하여 글자 강조 깜빡거리게 하기
  • css를 이용하여 글자 강조 깜빡거리게 하기 keyframes 를 이용하여 활용이 가능하다. 아래의 코드를 css에 적용시켜 주면 된다. @keyframes blink-effect { 50%{ opacity:0; } } .blink { animation: blink-effect 1s step-end infinite; /* 다른 기능을 원한 다면 이부분의 주석을 해제. animation-name: blink-effect; animation-durat...
  • 웹지기 11-17 2951 0 0 댓글 0
  • 35 [ css ] border style 종류
  • border style 종류 - solid, dotted, dashed, double, groove, ridge, inset, outset
  • 웹지기 01-12 2809 0 0 댓글 0
  • 34 [ css ] box-sizing - 요소의 크기를 화면에 표시하는 방식
  • 박스사이징(box-sizing) - 요소의 크기를 화면에 표시하는 방식 - 컨텐츠 기준으로 바뀜 div{ margin:10px;width:150px;} #small{border:10px solid #000;} #large{border:30px solid #000;} <div id="small">small</div> <div id="large">large&lt...
  • 웹지기 01-11 3097 0 0 댓글 0
  • 33 [ css ] 마진 상쇄 현상
  • 마진 상쇄 현상 마진과 마진이 만났을 때 큰 마진이 작은 마진을 먹어버리는 현상 .a{margin:100px;} .b{margin:50px;} 일때 .b 클래스의 margin-top:50px은 .a의 margin-bottom:100px에 의해 상쇄된다.
  • 웹지기 01-11 2955 0 0 댓글 0
  • 32 [ css ] 공간분할 태그
  • 공간분할 태그 - 경계를 분할하거나 영역을 나눌 때 사용하는 태그 블록형식 태그 인라인형식 태그 태그종류 div, h1~h6, p, ul, ol, li, tr, th, td span, a, input, b, i, small, sub, sup, ins, del ...
  • 웹지기 01-11 2970 0 0 댓글 0
  • 31 [ css ] css 명시도 계산법
  • CSS는 명시도 계산법에 따라 점수를 계산해서 마지막에 실행 !import 인라인 방식 내부 외부 임포트 최우선 1000 ...
  • 웹지기 01-11 3046 0 0 댓글 0
  • 30 [ css ] 반응 선택자
  • 반응 선택자 - 사용자의 반응으로 생성되는 특정한 상태를 선택 선택자형태 설 명 :active 마우스로 클릭할 때 선택 :hover 마우스를 올린 태그를 선택
  • 웹지기 01-11 2392 0 0 댓글 0
  • 29 [ css ] css 의 크기 단위
  • 크기단위 - 요소 또는 텍스트의 크기를 지정하는 단위 px - 화소 하나의 크기에 대응되는 단위(고정값) em - 부모요소 크기에 따른 배수단위 rem - html 태그의 요소 크기의 몇배인지 지정하는 단위
  • 웹지기 01-11 2470 0 0 댓글 0
  • 28 [ css ] CSS : Cascading Style Sheets
  • Cascading Style Sheets(CSS)는 HTML이나 XML(SVG, XHTML 같은 XML 방언(dialect) 포함)로 작성된 문서의 표현을 기술하기 위해 쓰이는 스타일시트 언어입니다. CSS는 요소가 화면, 종이, 음성이나 다른 매체 상에 어떻게 렌더링되어야 하는지 기술합니다. CSS는 오픈 웹의 핵심 언어 중 하나이며 W3C 명세에 따라 브라우저끼리 표준을 맞춥니다. 레벨 단위로 개발한 CSS1은 더 이상 사용하지 않고, 다음 레벨인 CSS2.1은 권고안이며, 레벨보...
  • 웹지기 01-11 2410 0 0 댓글 0
게시물 검색

회원로그인

접속자집계

오늘
1,709
어제
6,915
최대
33,828
전체
8,106,403

그누보드5
Copyright © funyphp.com. All rights reserved.