반응형 디자인의 3요소 : 그리드 레이아웃, 가변형 이미지, 미디어 쿼리

그냥 @media만 썼지 이런 3요소가 있는 줄 오늘 처음 알았...

 

 

1) 그리드 레이아웃 : 부모요소에 display:grid; 속성을 넣어준다.

 

GridLayout은 2차원 격자무늬 형태의 레이아웃으로 행과 열의 집합형태로 구성된 레이아웃이다. TableLayout의 단점을 보완한 레이아웃으로 LinearLayout 또는 FrameLayout과 같은 다른 레이아웃의 장점을 포함하는 레이아웃이다. GridLayout을 사용할 시 다른 레이아웃과 중첩으로 사용할 필요가 없어 메모리 사용량을 줄일 수 있다는 장점이 있다.

 

현재 CSS 그리드는 거의 모든 브라우저에서 지원하고 있으며, 프로덕트를 제작하는 작업에서 사용하면 된다. 플랙스박스 같은 다른 레이아웃 방식과 달리 그리드 레이아웃은 두 가지 정도의 자유를 제공한다.

 

CSS Grid(그리드)는 2차원(행과 열)의 레이아웃 시스템을 제공한다. Flexible Box도 훌륭하지만 비교적 단순한 1차원 레이아웃을 위하며, 좀 더 복잡한 레이아웃을 위해 우리는 CSS Grid를 사용할 수 있다. CSS Grid는 예전부터 핵(Hack)으로 불린 다양한 레이아웃 대체 방식들을 해결하기 위해 만들어진 특별한 CSS 모듈이다.

 

속성 - orientation, rowCount, columnCount, grid-template-columns, grid-template-rows

 

+브라우저의 구현 차이나 버그를 이용하여 CSS의 적용대상에서 일부 브라우저를 제외하거나, 특정 브라우저만을 대상으로 CSS를 적용하는 방법을 'CSS핵' 이라고 한다.
크로스브라우징을 위한 응급대처 같은 방법이라고 생각하시면 되고, 핵일부는 CSS의 문법상 올바르지 않은 것도 있을 수 있다

 

가장 상세한 설명 링크 - https://heropy.blog/2019/08/17/css-grid/

 

 

2) 가변형 이미지 : max width, width, min-width등을 이용해 화면 너비에 따라 높이와 너비가 바뀌는 이미지

 

이 때 모바일 기기 등 작은 화면에선 불필요하게 화질이 높은 이미지를 그대로 불러와야 한다거나, 가로형 이미지를 세로형 화면에서 볼 때 비율이 적합하지 않다거나 하는 문제를 해결하기 위해서 모바일용 이미지 내지 세로형 이미지를 따로 준비해준다.

 

img 태그의 srcset 속성을 이용해 '파일명, 너비w'의 형식으로 여러개 이미지를 첨부해준다.

 

 

3) 미디어 쿼리 

 

미디어 쿼리는 화면(screen), 티비(tv), 프린터(print)와 같은 미디어 타입(media type)과 적어도 하나 이상의 표현식(expression)으로 구성된다. 표현식은 width, height, color와 같은 미디어 특성(media feature)들을 이용하여 그 특성들의 상태에 따라 다른 스타일 시트를 적용할 수 있다. 미디어 쿼리는 CSS3에 포함되어 있으며, 컨텐츠의 변경없이 주로 화면의 크기에 따라 스타일 시트를 달리하여 적절한 모양을 보여줄 수 있다.

media type - all(기본값, 모든 미디어 장치), print(프리트에 사용), screen(컴퓨터 스크린, 태블릿, 스마트폰 등), speech(페이지를 읽어주는 화면낭독기)