Bootstrap
이력서를 넣으려고보니 각 웹 에이전시마다 우대조건이 다른걸 느꼈다.
그중에 Bootstrap 을 우대해주는 곳도 있어서 공부해보기로 했다.
youtube에 아주 친절하게 설명해주는 곳이 있기에
그 강의를 보면서 W3schoolsdp 예제를 따라해보고 연습한 내용을 기록할 것이다.
부트스트랩을 왜 이용하는지 부터 알아보자.
가장 큰 이유는 UI최적화로 인해서 디자인 적인 측면에서 편하고
반응형으로써 디바이스 환경에 최적화 되어있다.
요즘은 모바일기기가 넘치는 시대이기 때문에 디바이스 환경 최적화는 큰 장점이다.
그럼 예제가 있는 W3schools를 가보도록 하자.
홈페이지를 방문하면 여러가지 웹에 관련된 HTML, CSS, PHP, jQuery 등... 배울 수 있게끔 컨텐츠를 제공한다.
아주 좋은 사이트이다... 단점은 영어로 되어있어서 영어에 약하면 공부하는데 매우 힘들다...ㅋㅋ
가장 처음 나와있는것인데 이건 부트스트랩이 어떤것인지 보여주는 예제이다.
눌러보면 새창이 뜨면서 결과물을 보여주는데 부트스트랩을 사용하면 이렇게 표현할 수 있다정도로 볼 수 있다.
창 사이즈를 조절해보면 반응형인걸 알 수 있다.
BS HOME 에는 부트스트랩의 기능과 예제가 주로 나와있다
각각 기능에 설명이 자세히 나와있고 알아보기 쉽게 정리되어있다.
보고 넘어가면 정말 유용한 것들이다.
다음 Get started로 넘어가보자.
넘어가보면 부트스트랩의 역사,사용이유 등 소개되어있고
사용 방법에 대해서 여러 방법을 제시한다.
1.다운로드(출처:http://getbootstrap.com/)
2.CDN(출처:http://getbootstrap.com/)
친절하게 copy버튼까지 되어있다.
responsive효과를 보려면 <div class="container, container-fluid"></div>로 감싸줘야 된다.
둘의 차이점은 고정된 width를 사용하냐 full로 사용하냐 차이로 보인다.
밑에 예제가 나와있는데 예제로 그 차이를 알아볼 수 있다.
1.container
2.container-fluid
예제를 확인해본 결과 창을 늘렸을때 두가지를 비교해 봤다.
두가지 방법을 상황에 맞춰서 잘 사용하면 유용할꺼 같다.
다음은 BS Grid Bassic 부터 시작하겠습니다~
사진출처:(W3school,Bootstrap3 홈페이지)