css 반응형

 

반응형

1. 미디어쿼리 (css)

@media 기기타입 and (min-width:#) and (max-width:#){}

 

2. 메타태그 (html)

<meta name="viewport" content="width=device-width">

 

 

반응형 디자인 패턴

유동형 (mostly fluid)

:googlesamples.github.io/web-fundamentals/fundamentals/design-and-ux/responsive/mostly-fluid.html

 

열 끌어놓기(column drop)

googlesamples.github.io/web-fundamentals/fundamentals/design-and-ux/responsive/column-drop.html

 

레이아웃 시프터(layout shifter)

googlesamples.github.io/web-fundamentals/fundamentals/design-and-ux/responsive/layout-shifter.html

 

미세조정(tiny tweaks) :레이아웃을 약간만 변경할 때

googlesamples.github.io/web-fundamentals/fundamentals/design-and-ux/responsive/tiny-tweaks.html

 

오프캔버스(off canvas)

googlesamples.github.io/web-fundamentals/fundamentals/design-and-ux/responsive/off-canvas.html

 

 

실습

미디어쿼리 중요점

1. 숨기기

2. 100% 만들기

3. 보이기

 

미디어쿼리작성 시 주의할 점

패드: 768px~1024px, 최근에는 1280px까지 올라감

상위 미디어쿼리에 해당되면 중복 작성하지 않아도 됨

선택자는 본문css와 똑같이 작성할 것

모바일 상 순서 바꿀 시 부모가 같을 것

 

작은 이미지는 다 마크업에,

버튼 안에 텍스트와 함께 들어가면 백그라운드에,

버튼 눌러서 바뀌어야하면 css에.