반응형 레이아웃

[반응형 레이아웃 만들기]

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

• 시작하기 전 이거 꼭 기입
  
  

[글자, 너비]

.test {
    width: 50vw; <-- viewpoint의 50% 차지
    width: 10rem; <-- 기본 폰트 사이즈에(16px) 비례:16의 10배=160px
    font-size: 15px
    width: 20em <-- 내 폰트사이즈의 X배
  }

• font size rem 으로 하면 좋은 점: 모든 곳을 rem으로 크기지정하면 기본 폰트사이즈 커져도 모든게 같이 커짐(수시로 조정 필요한 곳은 rem 쓰면 편리)

 

[media query 문법 -반드시 CSS 맨 하단 기입, Class 및 문법 복수로 사용가능]

@media screen and (max-width: 1200px){
    .main-title {
        font-size: 30px;
    }
    .nav-item {
        font-size: 16px; 
    }
}--> 현재 브라우저 폭이 1200px 이하일 경우 폰트사이즈 30px 적용

1200px -- 태블릿
992px
768px
576px 단위들 많이 사용함