css 폰트 단위

웹사이트 제작을 위해서 필히 사용되는 것은 

무엇보다 크기를 결정 짓는  "단위" 이다.

css에서는 여러가지 단위를 제공한다.

그 중에서 가장 많이 사용되는 단위로는 'px, rem, em,%, vh,vw' 그리고 가끔 'vmin, vmax' 일 것 같다.

웹을 만드는 사람이 아니더라도 알고 있을 법한 'px'는 정적인 단위로 '1cm'와 같은 고정 값을 지칭하는 것과 같다.

1920 × 1080 해상도라면 가로 1920개의 점과 세로 1080개의 점으로 이루어진 화면이라는 의미이다. 

그 점과 점을 이어 화면을 구성하는 이미지가 표현 되는 것이다. 

점과 점을 이어 주는 것이기 때문에 위에 맞는 해상도로 제작된 사이트를 2560 × 1440 해상도에서 본다면

콘텐츠 영역이 가로로 커질 수 있는 최대 사이즈를 1920까지 제한해 두어서 양쪽에 여백이 많이 생기거나

반응형 단위를 써서 1920 사이즈일 때와 같은 화면을 보여 주거나 하도록 제작하는 쪽에서 선택을 해야한다.

대부분 세로로 내용이 많기 때문에 가로를 기준으로 판단한다.

언급한 것 처럼 점과 점을 이어서 화면을 구현하기 때문에 같은 크기의 모니터라면 

1920 × 1080 에 표현된 이미지보다 2560 × 1440 에 표현된 이미지가 작게 보인다. 

점의 밀집도를 생각해보면 이해가 빠를 것이다. 

같은 6 × 6 사이즈의 박스 크기일때 대략 이렇게 보이는 것과 같다. 

TV를 볼때 해상도가 높다고 작게 보이지 

 

해상도가 높으면 더 크게 보여 준다라고 하는 사람이 있는데 화면 크기과 해상도를 혼동하는 것이다. 

크게 보여준다가 아닌 많은 내용을 보여 줄수 있다가 적합할 것 같다. 

가로 해상도만 아니라 세로 해상도도 같이 높아 지는 경우가 대부분이니 

1920 × 1080 보다 2560 × 1440 가 세로 해상도가 높아서 가로를 1920보다 커지지 않게 해둔 상태라면

1440 - 1080 한 사이즈 만큼 더 보일 수 있다.

1920 × 1080 에 꼭맞게 제작된 이미지를  2560 × 1440 에서 꽉차게 본다면 

1번 점에서 2번 점으로 이어지는 것이 아니라 2560 ÷ 1920 = 1.3333... 의 배율이 되기 때문에 흐릿하게 보이게 된다.

반대로 점과 점의 밀집도가 높으면 선명하게 보여진다.

웹디자인을 하는 사람이라면 이런 배율/비율에 대해 필히 숙지하고 있는 편이 좋을 것 같다고 생각한다.

해상도에 대한 이야기가 길었지만. 

본론으로 들어가 css의 단위를 다시 보자면,

1. "px"' 는 절대(고정) 단위

-'폰트 사이즈가 16px 라면 2560해상도 모니터에서 봐도 모바일에서 봐도 16px의 크기로 보인다는 의미'이다.

 

2 . "rem,em,%, vw,vh, vmin,vmax" 은 상대(반응) 단위 이다.

 2-1:  'rem' 은 'root' 요소의 글꼴 크기를 따라 반응하는 상대적 사이즈이다.

 여기에서 'root' 요소의 글꼴 크기는 html의 기본 글꼴 크기라고 이해하면 되겠다.
 html의 기본 글꼴 크기는 16px이다.

• rem은 root의 크기를 상속하여 font-size:1rem 적용시 1rem = 16px 이다.

1번
html{
	font-size:16px;
    }
    
2번
html{
	font-size:1rem; //16px 그대로 단위만 rem으로 사용
    }

3번
html 에 지정하지 않음

1번, 3번 같은 경우 16px의 기본 글꼴을 그대로 사용하는 것이다.

2번의 16px 사이즈를 단위만 변경한 것으로 16*1과 같다.
        즉 1rem = 16px 라는 것으로,
       폰트 사이즈가 24px인 요소가 있다면 24÷16=1.5이므로 해당요소의 font-size:1.5rem 으로 작성해 주어야 한다.
       16*1.5=24 이기 때문이다. 

• css로 루트에 적용된 기본 글꼴 사이즈를 변경할 수 있다.

html{
	font-size:62.5%;
    }
    
body{
	font-size:1.6rem;
    }

위와 같이 작성하면 루트 글꼴 사이즈인 16px 의 62.5% 인 10px 로 재조정 된다.

이렇게 되면 16*62.5%=10이 되므로, 1rem = 10px가 된다.
작업시 10px는 1rem , 9px는 .9rem, 15px는 1.5rem 식으로 사용하면 된다.

그리고 body에서 font-size:1.6rem 으로 재정의 해줬기 때문에 문서의 기본 폰트 사이즈는 16px가 된다.

여기에서 봐야할 것은 root의 font-size를 %로 줬다는 것이다. 

전제적으로 확대나 축소할때 저 %가 변동값을 맞춰 줄것이다. 

 

2-2. 'rem' 단위를 왜 사용해야 하는 가

1. 웹접근성의 필요 

어르신들이나 저시력자들의 브라우저에서 글자 크기를 확대해서 보는 경우가 있는데 이럴 경우 px 보다 rem을 사용하는 것이 좋다.

2. 작업의 용이성

 그런 경우가 많지는 않지만, 사이트이 전체적인 크기를 줄여달라거나, 키워달라는 요청이 있을때가 있다. 
만약 px를 사용했다면 모두 찾아서 사이즈를 변경해야 겠지만, 위와 같이 사용했다면, 
키우거나 줄여달라는 % 만큼 html { font-size:%}을 조정해 주면 된다.

**주의

'rem'과 'px'를 혼용하여 사용할 경우 확대 축소될대 'px'는 고정값이기에 반응하지 않는다. 
만약 테이블에 폰트는 rem , 칸의 높이는 px를 사용한다면 커진 폰트가 칸의 높이를 넘어가는 경우가 생기게 된다.
그래서 단위는 한가지만 사용하도록 한다. 다만, 1px 라인 같은 경우는 예외로 해도 상관은 없다.

4. 'em' 부모 요소를 상속

em은 부모 요소의 값을 상속 받는다. 

p{
	font-size: 1.5rem;
    }
p .span1{
	font-size:1em; //1.5rem
    }
  
p .span2{
	font-size:1.5em; // 15px*1.5 = 22.5px
    }
    
p .span2 b{
	font-size:1.5em; // 15px*1.5 = 33.75px
    }
    
    
p .span3{
	font-size:.5em; // 15px*0.5 = 7.5px
    }

p .span2 b 경우와 같이 부모요소의 값을 상속 받기 때문에 하위로 내려갈 수록 계산이 복잡해진다.
그래서 부모요소에 직접 영향을 받아야 하는 경우가 아니라면 가급적 사용하지 않는 것이 정신건강에 좋을 것 같다. 
ex) 문서내 특정영역에서의 작게 보기나 크게 보기 같은 이벤트가 들어가는 경우

5. '%, vw,vh, vmin,vmax' 의 사용

vw, vh, vmin, vmax 는 뷰포트에 대해 반응한다.

• vw =>  뷰포트의 너비(width) 에 대한 %로 이해하면 된다.  1vw는 1%이다. 
• vh =>  뷰포트의 높이(height) 에 대한 %로 이해하면 된다.  1vh는 1%이다.
• vmin => 뷰포트의 너비와 높이 중 작은 것을 대상으로 한다. 작은 것의 %
• vmax => 뷰포트의 너비와 높이 중 큰 것을 대상으로 한다. 큰 것의 %
• % => 상위 요소에 대해 반응