오프 캔버스 패턴(off Canvas)
1. 정의
- 창의 크기가 작아져서 더 이상 창 안에서 콘텐츠를 표현 할 수 없을 때 창의 바깥쪽으로 내용을 숨기는 기법
- 숨겨진 버튼이나 텍스트를 만들어 호출 시, 창 안쪽으로 불러온다
- 다른 패턴에 비해 구현이 복잡하다
2. 구현
1) 1000px 이상
2) 600~1000px
- 클릭시 주황 부분이 나옴
3) 600px
| [CSS] 작은 변화 패턴(Tiny Tweaks) (0) | 2016.12.18 |
|---|---|
| [CSS] 레이아웃 시프트 패턴(Layout shifter) (0) | 2016.12.18 |
| [CSS] 단 드롭 패턴 (Column Drop) (0) | 2016.12.18 |
| [CSS] 가변 그리드 패턴(Fluid Grids) (0) | 2016.12.18 |
리딩리드
작은 변화 패턴(Tiny Tweaks)
- 글꼴 크기나 이미지 크기등 매우 사소한 것을 조정하여 해상도에 따라 변화를 줌
- 내용이 적거나 복잡하지 않을 때 사용
1. 구현
- 크기에 따라 font와 padding 변경
1)1000px 이상
2) 600~1000px
3) 600px
| [CSS] 오프 캔버스 패턴(off Canvas) (0) | 2016.12.19 |
|---|---|
| [CSS] 레이아웃 시프트 패턴(Layout shifter) (0) | 2016.12.18 |
| [CSS] 단 드롭 패턴 (Column Drop) (0) | 2016.12.18 |
| [CSS] 가변 그리드 패턴(Fluid Grids) (0) | 2016.12.18 |
리딩리드
레이아웃 시프트 패턴(Layout shifter)
- 화면의 폭이 좁아져 더이상 표현이 힘들 때 단순히 단을 내리는 것이 아닌 레이아웃 자체에 변화를 주어 새로운 형태로 만듬
1. 구현
- order를 이용하여 크기에 따라 요소의 width를 변경하여 재배치
1) 1000px 이상
2) 600~1000px
3) 600px 이하
| [CSS] 오프 캔버스 패턴(off Canvas) (0) | 2016.12.19 |
|---|---|
| [CSS] 작은 변화 패턴(Tiny Tweaks) (0) | 2016.12.18 |
| [CSS] 단 드롭 패턴 (Column Drop) (0) | 2016.12.18 |
| [CSS] 가변 그리드 패턴(Fluid Grids) (0) | 2016.12.18 |
리딩리드
단 드롭 패턴 (Column Drop)
1. 정의
- 화면이 좁아져 더이상 콘텐츠를 표현하기 힘들 때, 내용을 묶어주는 단(column)을 아래로 내려서 콘텐츠 영역 확보
2. 구현
- order 속성을 이용하여 단을 변화 시킬 순서 지정
1) 1000px 이상일 때
2) 600~1000px 사이일 때
3) 600px 이하
| [CSS] 오프 캔버스 패턴(off Canvas) (0) | 2016.12.19 |
|---|---|
| [CSS] 작은 변화 패턴(Tiny Tweaks) (0) | 2016.12.18 |
| [CSS] 레이아웃 시프트 패턴(Layout shifter) (0) | 2016.12.18 |
| [CSS] 가변 그리드 패턴(Fluid Grids) (0) | 2016.12.18 |
리딩리드
