c부트스트랩이란 반응형 웹1을 좀더 쉽게 개발할수 있도록 도와주는 프론트엔드 프레임워크의 한 종류이다.
왜 부트스트랩을 써야하는가?
부트스트랩의 이점은 아래와 같은데 개인적으로 4번의 이유가 매우 중요해보인다.
- 사용하기 쉽다
- 반응형이다
- 모바일 우선 방식이다 ( 모바일을 지원한다는 의미인듯..)
- 브라우저가 호환된다
Container
사이트의 요소를 감싸기위해 포함 요소가 필요한데 부트스트랩은 2개의 클래스를 지원한다. 예시 이미지로 보면 둘의 차이점이 이해가 될 것이다.
- .container: 고정폭을 반응형으로 제공
- .container-fluid: 뷰포트에 따른 전체 너비 제공 ( 모바일이든 웹이든 전체 너비를 제공한다는 듯..)
Grid
부트스트랩은 페이지 전체를 12개의 컬럼으로 구성할 수 있다. 아래의 예시를 보면 12개의 컬럼을 각자 개별적으로 사용할수도, 또는 몇개의 그룹으로 묶어서 사용할 수 있는 것을 확인할 수 있다.
span1 |
span1 |
span1 |
span1 |
span1 |
span1 |
span1 | span1 |
span1 |
span1 |
span1 | span1 |
span1 |
span1 |
span1 |
|||||||||
span1 |
span1 |
||||||||||
span1 |
|||||||||||
그리드 클래스는 col-**-** 형태이며 처음 ** 에는 아래의 디바이스 크기에 맞는 적설한 값을 마지막 **에는 12개의 컬럼중 몇개로 구성할지를 작성하면 된다. 이러한 그리드 클래스는 행을 구분하는 row 클래스 내에서 사용하면 된다.
xs(for phones - screens less than 768px wide)sm(for tablets - screens equal to or greater than 768px wide)md(for small laptops - screens equal to or greater than 992px wide)lg(for laptops and desktops - screens equal to or greater than 1200px wide)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <body> <div class="container-fluid"> <div class="row"> <div class="col-lg-12" style="background-color:gray;"><tiles:insertAttribute name="header" /></div> </div> <div class="row"> <div class="col-lg-3" style="background-color:green;"><tiles:insertAttribute name="menu" /></div> <div class="col-lg-9" style="background-color:blue;"><tiles:insertAttribute name="body"/></div> </div> <div class="row"> <div class="col-lg-12" style="background-color:red;"><tiles:insertAttribute name="bottom" /></div> </div> </div> </body> | cs |
- 디바이스(크기)에 따라 자동적으로 모습이 바뀌는 웹페이지 [본문으로]
'웹 개발' 카테고리의 다른 글
| JSTL (작성중) (0) | 2018.05.04 |
|---|---|
| jsonp (0) | 2017.02.09 |
| OAuth 2.0 ( RFC 6749) (0) | 2017.01.19 |
| JSP 와 Servlet의 한글처리. (0) | 2016.10.06 |
| Apache 와 Tomcat (0) | 2016.07.26 |