CSS - media query

설현아·2023년 5월 15일
0

CSS

목록 보기
2/4
post-thumbnail

Media Query?

사용자의 장치(PC 테블릿 휴대폰 등)에 따라 CSS 스타일이 변경될 수 있도록 도와주는 모듈

각 장치의 너비

phone 세로 : 320
phone 가로 : 480
small tablet : 600
small tablet 가로 : 800
large tablet : 768
large tablet 가로 : 1024
desktop : 1280
wide screen desktop : 1440

break point

@media(min-width : 768px) and (max-width : 1024px) or () {
		display : ~~~
        ~~~~
	}
  • and : 양쪽 다 만족해야 동작
  • or : 하나만 만족하면 동작

말은 쉬운데 해보면 마음처럼 잘 안 된다..
container 의 width, height 값을 먼저 확인한 후에 뷰포트가 바뀌어도 사용자 입장에서 잘 보이게 만들어야겠다

profile
FE Engineer

0개의 댓글