⁂ Bootstrap

[Bootstrap] #3 그리드 시스템(Bootstrap Grid System)

1. 그리드 시스템 부트 스트랩이 지원하는 한 페이지의 화면을 12개의 칼럼으로 나누어주는 시스템이다. 참조 : https://www.w3schools.com/bootstrap/bootstrap_grid_basic.asp Bootstrap Grid Basic W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more. www.w3schools.com 1) 해상도에 따른 배치 부트스트랩은 가로의 해상도에 따라 출력되어..

[Bootstrap] #2 버튼 만들기

1. 부트스트랩으로 버튼 만들기 부트 스트랩은 CSS파일과 JS파일을 묶어둔 프레임워크 형태이다. 그래서 저장된 스타일을 갖고 있는 CSS의 클래스를 호출하면 그에 맞는 형태의 여러 디자인을 생성해낼 수 있다. 가장 먼저 버튼을 만들어보자!! 1) 여러 스타일의 버튼들 부트스트랩에선 아래와 같은 형태의 버튼들을 간단하게 만들 수 있다. HTML 삽입 미리보기할 수 없는 소스 코드는 아래에서 살펴보자. Button Styles Basic Default Primary Success Info Warning Danger Link 2) 태그를 갖고 있는 버튼들 태그를 갖고 있는 버튼들도 생성을 할 수 있다. HTML 삽입 미리보기할 수 없는 소스 위의 버튼을 누르는 것으로 일정 기능을 수행하게 하는 것이다. Bu..

[Bootstrap] #1 부트스트랩이란?

1. 부트스트랩(Bootstrap)의 TMI 과거에 스마트폰이 생겨나고 그에 필요한 화면이 필요했을 때, 많은 사이트들은 데스크탑용, 그리고 모바일용의 사이트를 따로 제작을 했었다. 그러다가 모바일로 사이트에 접속하는 비율이 압도적으로 늘어나면서 사이트의 방향에 따라 사람들은 데스크탑용 사이트를 포기하는 시점까지 이르렀다. 포맷에 따라 구현해야하는 환경이 너무나 다른 이 웹 디자인의 한계를 해결하기 위해 등장한 것이 바로 부트스트랩이다. 부트스트랩은 트위터의 개발자와 UI 디자니어가 개발한 프레임워크이다. 트위터에서 사용하는 각종 레이아웃, 버튼, 입력창 등의 디자인을 CSS와 Javascript로 만들어 놓은 것이다. 웹 디자인너나 개발자 사이에서는 웹 디자인의 혁명이라고 불릴 정도로 폭발적인 반응을 ..