[CSS] 반응형 메모

출처: https://nykim.work/84

뷰포트

---

사용자가 보는 영역
기기에 따라 다르게 보여지게 설정 가능

미디어쿼리

---

	@media (max-width:600px) {
    	font-size: 10px
    }

화면 크기에 따라 css 다르게 적용 가능
@media로 css 별로 구분하여 작성하는것을 추천

연산자

---

	@media (max-width: 500px) and (max-width: 550px)
    @media (max-width: 300px), (max-width: 350px)

and : 둘다 만족
, : or 하나만 만족

중첩

---

	.title {
    	font-size: 12px;
        @media (max-width: 600px) {
        	font-size: 10px;
        }
    }

반응형 css를 한눈에 파악할수있어 유지보수가 편함

작성방식

---

모바일: min
데스크탑: max

모바일 방식은 작은 width 부터 점차 커지는 방식으로 작성

.title {
	width: 10px;
    @media (max-width: 10px) {
    	width: 20px;
    }
    
    @media (max-width: 30px) {
    	width: 30px;
    }
}

데스크탑 방식은 큰 width 부터 점차 작아지는 방식으로 작성

.title {
	width: 10px;
    @media (max-width: 100px) {
    	width: 20px;
    }
    
    @media (max-width: 80px) {
    	width: 30px;
    }
}

무엇으로 작성하든 상관없음

mixin

---

$desktop: 1024px;

@mixin desktop{
	@media (max-width: #{$desktop}) {
    	@content;
    }
}

@include desktop {
	width: 40px;
}

매번 데스크탑 등 환경에 따라 분기 처리할 필요없이
mixin을 이용하여 include에 적용할 css값 입력하여 적용 가능