모래알 반응형웹

웹페이지의 현 위치를 알리는 부분...., ...로 적용할 수도 있고 부트스트랩의 기본 column에 적용할 수 있다. Home Home Library Home Library Data Home Library Data Home Library Data 분리기호의 수정위의 예제대로 하면 Home / Library / Data 와 같이 표현된다. 각 페이지 항목의 분리기호가 기본적으로는 '/'로 설정되어 있다. 분리기호(separator)는 css를 수정하여 변경할 수 있다. 이미 설명한 바 있는 크롬의 개발자도구로 검사해보면 어떤 CSS가 여기에 관여하고 있는 지 알 수 있다.이러한 분리기호는 대개 CSS의 ::before로 설정된다.[참조] 크롬(Chrome) 개발자도구, 검사 http://passauer1..

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..

Alert(알람)은 방문자에게 보내는 경고메시지를 보여줄 때 사용하는 것이지만 텍스트박스와 같이 사용해도 괜찮다.Jquery를 이용하여 경고 메시지를 보여주고 경고메시지를 닫는 기능을 활용할 수 있다. Alert의 색상 Bootstrap4는 primary, secondary, success, danger, warning, info, light, dark의 8개 색상을 지원한다. 이 색상은 bootstrap.css에서 변경할 수 있으며 css를 통해 나만의 색상을 부여할 수도 있다. A simple primary alert with an example link. Give it a click if you like. A simple secondary alert with an example link. Give ..

부트스트랩의 격자형 레이아웃시스템(Grid Layout System)은 이전에 포스팅한 내용이 주로 사용된다.오늘 설명할 부분은 Bootstrap 4에서 추가된 기능들로 이런 것도 있다는 것을 알고 필요에 따라 사용하면 된다.그러므로 아래 링크의 격자형 레이아웃시스템 (1/2)를 먼저 충분히 이해하는 것이 중요하다. Bootstrap 4 (부트스트랩), 반응형 레이아웃, 격자형 레이아웃시스템 (1/2)http://passauer1083.tistory.com/18Variable width content컨텐츠의 내용에 따라 너비가 가변적으로 변한다. 1 of 3Variable width content3 of 31 of 3Variable width content3 of 3 1 of 3 Variable widt..

부트스트랩 (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..

크로스 브라우징(Cross Browsing)이란 웹페이지를 만들 때 W3C 의 web standard (웹규격: 흔히 웹표준이라고도 한다) 에 맞는 코딩을 함으로써 어느 브라우져에서나 기기에서 사이트가 제대로 보여지고 작동되도록 하는 것을 말한다. 인터넷 익스플로러가 크로스 브라우징에서 항상 문제를 일으키는 데 이유는 인터넷 익스플로러가 웹규격을 따르지 않기 때문이다. 실무에서 고객들은 그래도 "인터넷 익스플로러에서 홈페이지가 잘 돌아가야 하지 않느냐?"고 말한다. 인터넷 익스플로러의 점유율이 현저히 낮아지고 있고, 만3세 이상 인구의 88.5%가 모바일 인터넷이용자라는 사실을 명확하게 인식할 필요가 있다.인터넷 익스플로러를 고수할 것인지 모바일을 버릴 것인지? [참조]구글 크롬 점유율 60% 육박…IE..

부트스트랩의 기능을 웹페이지에 적용하려면 반드시 그 페이지에 포함되어야 하는 것이 3가지 있다. bootstrap.css : 부트스트랩의 스타일. 압축된 형태이인 bootstrap.min.css가 포함되어도 좋다.jquery : jquery library. jquery 없이 bootstrap은 돌아가지 않는다. https://jquery.com/popper.js : 이 또한 jquery와 같이 웹어플리케이션을 만들 때 사용되는 라이브러리이다. https://popper.js.org/ Bootstrao 3.0 시절만해도 popper.js가 굳이 필요없었지만 Bootstrap 4.0부터는 꼭 포함되어야 한다. 아래와 같이 폴더를 구성하고 "working folder"에서 연습을 해보자. working fol..

부트스트랩(Bootstrap)은 트위터의 UI 디자이너 Mark Otto(@mdo)와 개발자 Jacob Thornton(@fat)이 만든 오픈소스 프런트 엔드(front-end) 툴킷이다. '프런트 엔드'란 사용자와의 직접적인 인터페이스를 말하는 것으로 알기쉽게 말하면 홈페이지가 어떻게 보여질 것인가를 정하는 기능을 모은 것이다. 부트스트랩이 제공하는 Grid Layout System(격자형 레이아웃 시스템: 12열의 격자로 이루어져 있음)은 반응형 웹디자인을 가능하게 하는 기본적인 구성요소이다. 뿐만 아니라 웹페이지를 구성하는 메뉴, 타이포그래피, 표, 입력폼, 버튼 심지어 아이콘까지 이미지가 아닌 텍스트 형식으로 표현할 수 있도록 하는 요소들을 제공한다. 여기에 다양한 JQUERY 플러그인까지 활용하..