donaricano-btn

오프 캔버스 패턴(off Canvas)


1. 정의

- 창의 크기가 작아져서 더 이상 창 안에서 콘텐츠를 표현 할 수 없을 때 창의 바깥쪽으로 내용을 숨기는 기법

- 숨겨진 버튼이나 텍스트를 만들어 호출 시, 창 안쪽으로 불러온다

- 다른 패턴에 비해 구현이 복잡하다


2. 구현


1) 1000px 이상

2) 600~1000px

- 클릭시 주황 부분이 나옴

3) 600px    



블로그 이미지

리딩리드

,
donaricano-btn

작은 변화 패턴(Tiny Tweaks) 

- 글꼴 크기나 이미지 크기등 매우 사소한 것을 조정하여 해상도에 따라 변화를 줌

- 내용이 적거나 복잡하지 않을 때 사용


1. 구현


- 크기에 따라 font와 padding 변경

1)1000px 이상

2) 600~1000px

3) 600px


블로그 이미지

리딩리드

,
donaricano-btn

레이아웃 시프트 패턴(Layout shifter)

- 화면의 폭이 좁아져 더이상 표현이 힘들 때 단순히 단을 내리는 것이 아닌 레이아웃 자체에 변화를 주어 새로운 형태로 만듬


1. 구현


- order를 이용하여 크기에 따라 요소의 width를 변경하여 재배치

1) 1000px 이상

2) 600~1000px

3) 600px 이하


블로그 이미지

리딩리드

,
donaricano-btn

단 드롭 패턴 (Column Drop)


1. 정의

- 화면이 좁아져 더이상 콘텐츠를 표현하기 힘들 때, 내용을 묶어주는 단(column)을 아래로 내려서 콘텐츠 영역 확보


2. 구현


- order 속성을 이용하여 단을 변화 시킬 순서 지정

1) 1000px 이상일 때

2) 600~1000px 사이일 때

3) 600px 이하 


블로그 이미지

리딩리드

,