css 반응형 em,rem,vw,vh,calc로 코드 작성하는 법

기본적으로 아무것도 세팅하지 않았을 때 브라우저는 100%비율 기준 font-size를 16px으로 보여주게 되는데,  이를 반응형이면서 정수로 떨어지기 위해 편한 계산방법으로 설정하기 위해 세팅하는 방법이다. 폰트로만 사용하는게 아니라 마진,패딩 다 사용가능하다.

 

1. html font 사이즈는 기본으로 16px 이다.

대부분 폰트사이즈는 아무것도 설정하지 않았을 시에 html에 100%로 맞추어져 있다. 

이렇게 그냥 기본사이즈에 코드를 만들어나가면 화면에 16px로 나온다. 이는 곧 1em이라고 정의할 수 있다. (px은 해상도 설정을 위해 수치상으로 기록하는 것 뿐 명확한 명칭은 em이 맞다)

기본으로 설정된 값 font-size:100%; = 1em; = 16px; 똑같은 말이다. p도 16px로 출력된다.

 

 

 

2. rem = (root+em) , root는 html이나 body를 부르는 통칭이다.

부모요소의 영향을 받는 em단위와는 다르게 전체 페이지를 제어하는 rem방식을 사용한다.

html {font-size: 62.5%;}

이를 100%; ▶ 62.5%; 로 변경해 준다. 그럼 기본 수치가 10px으로 세팅된다.

em은 html 상위요소로 값을 설정해도 부모 요소의 사이즈를 따르기 때문에 각각 관리가 필요하다.

em은 부모요소를 따르고, rem은 부모 요소를 따르지 않는다. html 기준 요소만 따른다.

 

반응형

 

html { font-size: 62.5%; }
.image { width: 75rem; } //750px
.h1 { font-size: 3rem; } //30px
.h2 { font-size: 2.5rem; } //25px
@media all and (max-width: 720px;) {
html { font-size: 50%; } // 문서가 모두 rem 영향을 받습니다.
}

1200을 세팅하고 싶다면 120rem을, 30을 세팅하고 싶다면 3rem으로, 이렇게 세팅하면 반응형이면서 계산도 쉽게 작업이 가능하다.

 

 

 

3. vw,vh는 화면 영역을 뜻한다.

현재 화면에 노출되고 있는 스크린의 크기에 맞춰서 상대크기를 변경해서 표현해 준다.

100vw와 100vh가 전체화면 기준이며, 모바일 스크린의 크기가 520x780이라 가정하면  

1vw = 5.2px / 1vh = 7.8px이 된다. 100vw는 520, 100vh는 780인 셈

즉 1vw는 width의 1%, 1vh는 height의 1%이다.

 

 

 

4. 사칙연산을 이용해 복합적인 계산도 가능하다

css에서는 사칙연산은 calc를 사용하고 계산도 복합적으로 가능하며, 코드도 복합사용이 가능하다.

사용하는 연산은 덧셈, 뺄셈, 곱셈, 나누기 4개(+, -, *, /) 를 사용가능하며, 앞뒤로 띄어쓰기는 필수다.

.test{ 
	width: 100%;
	height: calc(100vh - 3.4rem); 
    }

포스팅 세팅 기준으로 가로는 100% 다 채우고, 세로는 780높이에 340을 뺀 값을 만든다는 말