반응형 정리

반응형 소스 전에는 모든 게 완성이 되어 있는 상태에서 작업할 것

1. 모든 CSS 파일에 들어가 하단 부분에 미디어쿼리 작업해 놓을 것
2. responce.css 파일을 만들어 몽땅 넣기 (단점: 유지 보수가 빡셀 거라 예상)
3. PC, Tablet, Mobile 분기점별로 CSS 파일 만들어 놓기

분기점은 어떻게 나눌까

사이트마다 다르기 때문에 최소치 1024까지 잡을 것.

• 구현 불가능 시점, 공존이 안 되는 시점, 시안으로 제공이 안 될 확률이 99.9%?

태블릿 max: 1023px ~ min 768px

모바일 max: 767px ~ min 320px

@media screen and (max-width: 1200px) {
    /* *1024을 기준으로 화면을 보고 잡아야함 */
}

@media screen and (max-width: 1023px) {
    /* *768을보고 잡아야함 */
}

@media screen and (max-width: 767px) {
    /* *320을 보고 잡아야함 */
}

참고 사이트
https://enchanted-war-920.notion.site/gsap-10db1f1be2fc4ae195763175fcc119c3