HTML／CSS (2) 썸네일형 리스트형 HTML / CSS 반응형 웹과 미디어 쿼리(그리드 레이아웃, 플렉스 박스 레이아웃, CSS 그리드 레이아웃) 그리드 레이아웃이란? • 반응형 웹 디자인에서 웹 문서 요소를 배치하는 기준 • 웹 사이트 화면을 여러 개의 칼럼(column)으로 나눈 후 웹 요소를 배치 • 화면을 규칙적으로 배열하므로 레이아웃을 일관성 있게 유지할 수 있음 그리드 레이아웃의 특징 • 시각적으로 안정된 디자인 • 업데이트가 편한 웹 디자인 구성 • 요소를 자유롭게 배치 그리드 레이아웃을 만드는 방법 1) 플렉스 박스 레이아웃(플렉서블 박스 레이아웃) • 수평 방향이나 수직 방향 중 하나를 주축으로 정하고 박스를 배치 • 여유 공간이 생길 경우 너비나 높이를 적절하게 늘리거나 줄일 수 있음 2) CSS 그리드 레이아웃 • 최근에 등장한 CSS 표준 • 수평 방향이나 수직 방향 어디로든 배치 가능 • 마치 레고 블록을 끼워 맞추듯 요소를.. HTML / CSS 반응형 웹과 미디어 쿼리 반응형 웹 디자인 • 웹 사이트의 내용을 그대로 유지하면서 다양한 화면 크기에 맞게 웹 사이트를 표시하는 방법 • 다양한 화면 크기의 모바일 기기들이 계속 쏟아져 나오는데 그 때마다 그 크기에 맞춘 사이트를 별도로 제작하는 것은 비효율적 -> 화면 크기에 ‘반응’해 화면 요소들을 자동으로 바꾸어 사이트를 구현하는 것이 바로 반응형 웹 디자인 모바일 기기를 위한 뷰포트(viewport) • 뷰포트 : 실제 내용이 표시되는 영역 • PC 화면과 모바일 화면의 픽셀 표시 방법이 다르기 때문에 모바일 화면에서 의도한대로 표시되지 않음 -> 뷰포트를 지정하면 기기 화면에 맞춰 확대/축소해서 내용 표시 뷰포트 지정하기 일반적인 사용법 : 뷰포트의 너비를 스마트폰 화면 너비에 맞추고 초기 화면 배율을 1로 지정 뷰포.. 이전 1 다음
