모래알 반응형웹

Badge는 게시판이나 쇼핑몰 상품목록에서 'new', 'hot'등의 표식을 달아주거나, 장바구니에 담긴 상품의 숫자 등을 표시하는 데 주로 사용된다. Badge의 크기는 적용되는 부모 요소(parent element)의 크기를 그대로 따른다. Example heading New Example heading New Example heading New Example heading New Example heading New Example heading New Notifications 4 Basge의 색상Alert와 마찬가지로 Badge에도 부트스트랩에서 제공하는 8가지 색상을 부여할 수 있다. Primary Secondary Success Danger Warning Info Light Dark Pill ba..

반응형 홈페이지를 만들 때 각각의 화면 너비에 맞게 반응형이 잘 되고 있는 지 확인할 필요가 있다.수많은 모바일 기기들을 모두 준비해서 하나하나 확인하는 것이 최상이겠지만 (실제로 이렇게 하는 사람들을 본 적이 있다.) 크롬 브라우저에서 간단하게 확인할 수 있다. 아래에 2개의 크롬 확장프로그램과 다음에서 제공하는 사이트를 소개한다. 하지만 가장 정확한 브라우저 사이즈 조절은 크롬의 개발자도구(F12) 에서 반응형을 체크하는 것이다.먼저 크롬 개발자 도구에 있는 내용을 살펴보자. 현재 화면에서 F12눌러서 개발자 도구를 띄우고 왼쪽 위의 아이콘을 클릭. 아래 화면에서 빨갛게 표시된 부분에 화면의 크기를 입력하면 가장 정확한 브라우저 사이즈로 현재의 웹페이지를 체크할 수 있다. Responsive Web ..

부트스트랩 (Bootstrap)은 화면의 너비를 12 분할(12 격자, Grid)하여 웹페이지를 만든다. Bootstrap 3의 격자형 레이아웃 시스템(Grid Layout System)은 4 가지 화면 너비를 기준으로 반응하도록 정의되어 있었다. 768px 미만(스마트폰), 768px 이상(태블릿), 992px 이상(작은 화면의 데스크탑), 1200px이상(큰 화면의 데스크탑)에 따라 신축성있게 화면이 바뀌어 반응형이 가능하도록 했다. Bootstrap 4부터는 이 격자형 레이아웃시스템이 더 정교하고 세밀하게 발전했다.화면의 너비를 12 분할하는 것은 동일하지만 반응하는 화면의 기준너비는 4가지 에서 5가지로 세분화되었다. Extra small col-md-4 col-md-4 col-md-4 col-m..