css 단위 / media query / 반응형 웹

 

반응형 웹을 만드려면 먼저 설정을 해주어야 합니다.

meta 태그를 추가해야 합니다.

 

<meta name="viewport" content="width=device-width, initial-scale=1.0">

 

 

 

1. rem 이라는 단위를 사용할 수 있습니다.

기본 폰트 사이즈가 있다면 = a 

1.5rem 을 사용하면 >> a x 1.5 가 됩니다.

기본 폰트를 적용하지 않으면 16px이 적용되어 사용됩니다.

 

2. vh 를 사용하면 빈 화면에서 스크롤이 가능하게 됩니다.

vw 는 그 반대의 개념입니다. 폭 개념

  

.class {   width : 16px; /* 기본 px 단위 */   width : 1.5rem; /* html태그 혹은 기본 폰트사이즈의 1.5배 */   width : 2em; /* 내 폰트사이즈 혹은 상위요소 폰트사이즈의 2배 */   width : 50vw; /* 브라우저(viewport) 화면 폭의 50% */   width : 50vh; /* 브라우저(viewport) 화면 높이의 50% */ }

 

 

스크린의 폭에 따라서 스타일을 다르게 줄 수 있습니다.

미디어 쿼리를 이용하면 됩니다.

 

@media screen and (max-width : 1200px) {   .class {     font-size : 50px;   } } @media screen and (max-width : 768px) {   .class {     font-size : 35px;   } }