반응형

반응형 크로스브라우징	px 크롬,엣지,모바일크롬,모바일사파리
	IE11 지원종료(2022.06) 후 크로스브라우징 안하는추세
	(반응형 화면테스트시 창을 줄일때 가로스크롤이 나오면 안됨)
데탑 미디어쿼리 분기점 설정	- 이론적으로는 min-width를 사용하여 모바일부터 pc로 코딩하는것이 좋으나   데탑디자인이 먼저 나오는경우가 많으므로 max-width   사용하여 큰화면에서 모바일로 내려가며 코딩 - 큰화면부터 시작할경우 모바일장치에서 위에서 아래로 모두 읽음
	모바일로 접속을 했을때 min-width 를 주면 타블렛이나 pc 보다 좀더 빠름
분기점 설정	- 타블렛분기점은 1024, 1200이 주로 사용   컨텐츠 내용이 많은경우(헤더) 요소별 분기점 1280 따로사용 - 디자인 그리드가 1600, 1400처럼 커지는 추세이므로 타블렛분기점은 1200이 좋음
기본분기점으로  대응할 수 없는 경우	타블렛 1200이하 @media (max-width:1200px) {}
	- 모바일 767이하 @media (max-width:767px) {}
	- 기본분기점으로 대응할 수 없는 경우 요소별로 분기점을 추가해야함 - 분기점은 최소한으로 하는것이 좋음
모바일	- 모바일부터 시작할경우 모바일장치에서 모바일 css만 읽기때문에 매우조금 빠름
	- 타블렛 768이상 @media (min-width:768px) {}
	- 데스크탑 1200이상 @media (min-width:1200px) {}
반응형 주의	- 반응형작업시 모든섹션에 타블렛 좌우여백을 미리걸어서 창조절시 붙지않게함 - 컨텐츠레이아웃이 1200일경우 max-width:1200 + 타블렛좌우여백(20 + 20) = 1240 - 반응형 컬럼 레이아웃의 가로는 %가 기본 - 컬럼사이의 간격은 px이 기본이나 많이 넓은경우는 %로 처리 - 동일부모안에서 모바일요소가 따로 있을경우 .m_gnb, .m_util 등으로 다르게 네이밍