190416_TIL(반응형 이미지, 그리드 레이아웃)

4월 16일(화)

반응형 배경이미지

• 전체 페이지를 배경이미지로 덮는 웹 페이지 또는 마크업에 들어가지 않아도 될 이미지 요소를 반응형으로 만들고 싶을 때 사용하는 방법.
• padding trick을 사용한다.
• iframe 태그를 반응형으로 만드는 원리와 유사하다.

반응형 배경이미지 예제

• 우측 상단 Edit in JSFiddle 링크를 클릭하여 뷰포트 넓이를 조절하면 된다.

• 핵심은 padding trick이다. padding-top 값을 사실상 height값으로 사용할 수 있도록 calc() 를 이용하여 이미지의 height / width * 100% 즉, 백분율값을 주어서 원본 이미지의 비율을 유지할 수 있게하였다.

그리드 레이아웃

• column(행) 과 row(열)을 이용하여 구역을 나누고 요소들을 배치하는 레이아웃 속성
• 비교적 쉽고 간편하게 전체적인 레이아웃을 만들 수 있으나 IE 호환 이슈가 있기 때문에 현업에서는 많이 사용하지 않는다. caniuse

• grid 는 현재 파이어폭스 개발자 모드가 크롬 개발자보다 더 잘 지원해준다.

• 간단한 게임을 통해 grid를 이해하는데 도움을 주는 사이트 grid-garden

• grid column 계산에 도움을 주는 사이트 grid-calculator