[web] BS - Material Design 반응형 그리드 레이아웃 분기점 (Breakpoint)

4,077

https://material.io/design/layout/responsive-layout-grid.html#breakpoi… (3265)

Material Design 반응형 그리드 레이아웃

Breakpoint Range (dp)	Portrait	Landscape	Window	Columns	Margins / Gutters*
0 – 359	small handset		xsmall	4	16
360 – 399	medium handset		xsmall	4	16
400 – 479	large handset		xsmall	4	16
480 – 599	large handset	small handset	xsmall	4	16
600 – 719	small tablet	medium handset	small	8	16
720 – 839	large tablet	large handset	small	8	24
840 – 959	large tablet	large handset	small	12	24
960 – 1023		small tablet	small	12	24
1024 – 1279		large tablet	medium	12	24
1280 – 1439		large tablet	medium	12	24
1440 – 1599			large	12	24
1600 – 1919			large	12	24
1920 +			xlarge	12	24

★ Margins (바깥여백) and gutters (열 간격)은 유동적이라 같은 사이즈일 필요 없음.
★ IOS 기기는 약간 다르니, 위 링크 가셔서 확인.

코멘트입력

검색목록 목록 글쓰기


분류	제목



web	브라우저별 HTML5 태그 지원 확인하는 법

web	드래그 앤 드랍 (=드래그 앤 드롭 Drag and Drop) 정의

web	MariaDB 글자 깨짐 오류 에러 해결

web	태그에 자주 사용되는 용어 정의 : 요소(=태그), 속성, 속성값

web	letsencrypt 보안인증서 갱신 오류 해결 - too many certificates (5) alrea…

web	(구글・네이버) 검색 포털에 사이트 서브링크 노출 원리

web	무료 캡쳐 유틸 소개 및 이용 후기 - (오썸 스크린샷 / 픽픽 / 젯그린샷 / 오픈캡쳐 / 알캡쳐 / 갈무…

web	파일질라 특정확장자파일만 다운로드 (= 문서파일만 다운 = 용량 큰 첨부파일 제외 다운로드 = 특정파일 필터…

web	github 사용법 (=빌더 업데이트 때 파일 삭제 변경 추가 내역 확인법)

web	특수문자입력법 (자음 > 한자키 > Tab키)

web	PHP - binary-safe 함수 (= 이진안전함수 = 바이너리세이프함수) 의미

web	ChatGPT 「Network Error (네트워크 에러)」 해결방법 ※ 챗지피티 오류 해결

web	저작권 보호 영문 표기

web	DNS 무료 사이트 모음 (DNS Free Site Collection)

web	(URI / URL) 개념 차이/비교

web	Tab(탭) vs Whitespace(공백) 차이점(장단점)

web	도메인포워딩 개념 및 종류 (고정포워딩, 유동포워딩)

web	코딩/프로그래밍 배우려는 (사람 유형별 / 공부 목적별) 공부 시작 언어 추천

web	알아두면 유용한 글작성 단축키 모음

web	HTML (Hypertext Markup Language, 하이퍼텍스트 기술용 언어)

13/19

[web] BS - Material Design 반응형 그리드 레이아웃 분기점 (Breakpoint)

공지사항

최신글

최신댓글

운영비 후원해주신 분 리스트