[HTML CSS JS] 반응형 코드 적용

지금까지 작성한 코드는 가로 너비가 1140px 보다 크면 스크롤 없이 정상적으로 보임
-> 웹 브라우저의 가로 너비가 1140px보다 작아지면 짤림

미디어 쿼리는 1140px 기준으로 작성하지만, 이는 스크롤바의 너비(크롬:18px)를 포함하지 않음
-> 크롬 브라우저에 스크롤 바가 생긴 상태라면 1158px까지 넓혀야 정상적으로 보임

기준점 설정하기

CSS에서 반응형 코드를 적용하려면 미디어 쿼리를 적용해야 함
-> 해상도를 기준으로 서로 다른 CSS를 적용
-> 기준이 되는 해상도를 먼저 정해야 함

ex)

/* 화면 너비가 1140px 이하일떄 */
@media screen and (max-width:1140px){}

/* 화면 너비가 992px 이하일떄 */
@media screen and (max-width:992px){}

/* 화면 너비가 768px 이하일떄 */
@media screen and (max-width:768px){}
...

반응형 코드 작성하기

프로젝트에서 font-size 속성이나 margin,padding 속성은 전부 rem단위를 사용
-> rem 단위는 html 태그의 font-size 속성값에 영향을 받는 단위

ex) html 태그의 기본 font-size 속성값이 16px이므로 1rem이면 16(px) * 1(rem) = 16px

반응형이 적용되는 뷰포트마다 기준이 되는 html 태그의 font-size 속성값을 작게 하면 화면 너비가 줄어들수록 전체 텍스트 크기와 내외부 여백이 일정 비율로 줄어듬

해상도가 992px보다 작아지면 font-size 속성을 줄임
-> rem 값이 조정됨, media 쿼리 css 코드 맨 마지막에 작성!

@media screen and (max-width:992px){
    html{
        font-size:14px;
    }
}

@media screen and (max-width:768px){
    html{
        font-size:13px;
    }
}

@media screen and (max-width:576px){
    html{
        font-size:12px;
    }
}

@media screen and (max-width:400px){
    html{
        font-size:11px;
    }
}

@media screen and (max-width:1140px){
    /* 메인 영역 container 기준 너비 변경 */
    main .container{
        width:992px; /* 1140px -> 992px */
    }

    /* 섹션 영역 container 기준 너비 변경 */
    section .container{
        width:600px; /* 1140px -> 600px */
    }

    /* about me 영역 왼쪽 너비 50% -> 100% 변경 */
    section .about-self .left{
        width:100%;
        margin-bottom: 1.5rem;
    }

    /* about me 영역 오른쪽 너비 50% -> 100% 변경 */
    section .about-self .right{
        width:100%;
        padding:0;
    }
}

/* What I Do 영역의 콘텐츠 박스의 너비를 30% -> 48% 변경 */
  section .do-me .do-inner{
    width:48%;
    margin-bottom: 1.5rem;
    margin-right: 0;
  }

  section .do-me .do-inner:nth-child(2n+1){
    margin-right:4%; /* 1, 3, 5...번째 본문 사각형에 margin-right 4% 적용 */
  }

/* PortFolio 영역의 콘텐츠 박스 너비를 30% ->  48% 변경 */
  section .portfolio-me .portfolio-inner{
    width:48%;
    margin-right: 0;
  }

  section .portfolio-me .portfolio-inner:nth-child(2n+1){
    margin-right:4%;
  }

/* Contact With Me 영역 */
  section.contact .contact-me .left{
    width:100%; /* 너비 변경 30% -> 100% */
  }
  
  section.contact .contact-me .right{
    width:100%;/* 너비 변경 65% -> 100% */
    margin-left: 0; /* margin 초기화 */
    
  }

1140px 이하일 때의 반응형 처리 끝냄
-> 다른 해상도에 따른 CSS 코드 작성시에는 비율만 유지해 주면됨

ex) 992px에서는 메인 영역의 container 클래스 너비와 portfolio 영역의 본문 너비를 바꾸는 것 말고 따로 처리할 것이 없음
-> 다른 영역은 해상도가 992px 보다 작아져도 디자인적으로 레이아웃이 달라지지 않음

@media (max-width: 992px){
    html{
      font-size: 14px;
    }
  
    /* 메인 영역 container 기준 너비 변경 */
    main .container{
      width: 768px; /* 992px -> 768px */
    }
  
    /* PortFolio 영역 */
    section .portfolio-me .portfolio-inner{
      width:100%; /* 48% -> 100% 변경 */
    } 
  }

@media (max-width: 768px){
    html{
      font-size: 13px;
    }
    
    /* 메인 영역 container 기준 너비 변경 */
    main .container{
      width: 576px; /* 768px -> 576px */
    }
  
    section .container{
      width:400px; /* 600px -> 400px */
    }
  
    section .do-me .do-inner{
      width:100%; /* 48% -> 100% */
      margin-right: 0; /* margin 초기화 */
    }
  }

@media (max-width: 576px){
    
    html{
      font-size: 12px;
    }
  
    main .container{
      width: 400px; /* 576px -> 400px */
    }
  
    section .container{
      width:360px; /* 400px -> 360px */
    }
  }

@media (max-width: 400px){
    
    html{
      font-size: 11px;
    }
    main .container{
      width: 320px;/* 400px -> 320px */
    }
  
    main h4{
      font-size: 1.5rem;
    }
    section .container{
      width: 320px;/* 360px -> 320px */
    }
    section .title h2{
      font-size: 3rem; /* 3.5rem -> 3rem */
    }

400px 일 때는 container 클래스의 기준 너비만 바꾸면 메인 영역의 글자 비율이 줄어들어도, 400 에서는 큰편이라 font-size를 조금 작게 설정하였음