웹마스터 팁
부트스트랩 기초 지식 강의
2014.01.24 08:20
안녕하세요 요즘 대세를 이끌고 ? 있는 부트스트랩에 대해서 설명드리고자 합니다
우선 프로그래머에게 있어서 디자인은 신과 같은 존재?? 퍼블리셔는 관계무...
여튼. http://getbootstrap.com/ 사이트에서 부트스트랩을 제공하는데
제일 기본적인것은 다운받고 바로 적용하고 하는것이 아니라
모든 글들을 2~3번씩 읽어보고 활용해보셔야합니다.
행여나 부트스트랩으로 가능한 코드를 다른 css 코드를 입히거나 하면
추후에 LESS 버전을 입힐때 제대로 반응하지 않을수 있다는 점입니다.
다 읽어보시고 이해가 됬다면
기본적인 팁을 적어드릴게요
<div class="pull-left"> 혹은 right
div로 감싼 영역은 화면에 무조건 왼쪽 또는 오른쪽으로 기웁니다.
float:left 가 적용되어져 있는 css 코드입니다.
가운데 정렬은 못하냐?? 이것또한 align=text-center 로 해결하시는데
부트에 있습니다.
<div class="text-center"> 혹은 left right 를 사용하셔도 됩니다.
그리고 반응형으로 하시면서
PC화면에서와 모바일화면에서가 중요한데
hidden-xs 라는 클래스는 PC화면에서만 보여지도록 해주므로
코딩을 2번 하셔도 되고. 모바일화면에선 제외해도 되는 추천,비추천등등을 클래스로 지정하면
모바일에선 사라지므로 깨지거나 할 염려가 크게는 없습니다.
visible-xs 이 클래스는 모바일에서만 보여지는 클래스입니다.
잘활용한다면 멋진 부트스트랩 반응형웹을 만들수 있습니다.
참고하시고 도움이 됬으면합니다 ^&^