가변 크기(Adaptive) , 고정 크기 (Fixed)

 

 

 

---

 

- 가변 크기(Adaptive) - 

 

1. 자동으로 가변대응 됨 (리스트 개수가 적을때는 알맞게 보이다가 개수가 많아지면 자동으로 패닝이나 스크롤됨)

 

2. 리스트 또는 그리도에서 적용됨

 

 

- 가변 레이아웃 만들기 -

 

1. CSS Grid : Grid는 공간을 열과 행으로 나눔 / fr(frractional) 단위를 사용 / media query를 적용하지 않고 독립적으로 사용함

 

 

---

 

* 그리드를 만들고 컨텐츠를 그리드 안에 배치하세요.

 

.appGrid

{

display: grid;

grid-columns: 120px 1fr;

grid-rows: 120px 1fr;

}

.adaptiveCell

{

grid-column: 2;

grid-row: 2;

}

 

 

---

 

 

2. CSS FlexBox : 요소들이 공간에 적절히 맞춰지도록 배치 / media query를 적용하지 않고 독립적으로 사용

 

 

---

 

 

 

---

 

- 고정 크기 (Fixed) -

 

1. Viewbox는 화면 영역에 맞출 수 있음 ( Width, height 값을 설정 / 자식요소들은 모두 영역크기에 맞춰지도록 설정 / 각 영역 중앙에 배치 )

 

2. 가장자리가 잘려도 보기에 이상하지 않은 앱 배경 이미지 사용

 

3. 벡터이미지나 2배 크기의 이미지 사용

 

 

---

 

* 예시

 

<div data-win-control="Win.UI.Controls.Viewbox"

data-win-options = "{width: 1024, height: 768}">

/* Fixed content area goes inside here,

scaling will maintain aspect ratio */

</div>

 

---

 

---

* 4가지 View state

 

1. Full screen

2. Portrait

3. Fill

4. Snap