CSS 개요.

bootstrap3 은 html5를 사용합니다. doctype 선언도 그래서 아주 간단합니다.

<!doctype html>
<html lang="en">
...
</html>


물론 사용하려면 좀더 보강해야하지만 이렇듯 간단하다는것을 말하네요.


bootstrap3 은 모바일 우선주의입니다. 즉 제일 우선시 하는것이 바로 모바일입니다.

적절한 렌더링을 위해서는 head 안에 뷰포트 메타태그를 넣어줘야 합니다.

<!doctype html>
<html lang="en">
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
...
</html>


물론 여기에서 좀더 깊게 들어가 확대하는 기능을 비활성화 시킬수도 있습니다.

네이버 같은 곳에 가면 두 손가락을 아무리 넓혀도 커지지 않는 화면이 있는데요. 그것은 inital-scale=1.0 으로 해놓았기 때문입니다.

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">


bootstrap3에서는 이미지를 반응형으로 사용할수 있도록 클래스를 제공하고 있습니다. 

<img src="..." class="img-responsive" alt="Responsive image">


간단이 img-responsive 만 클래스를 지정해주기만 하면 기본 스타일이 적용이 됩니다.





광역 CSS 설정.

부트스트랩 3 에서 기본적으로 광역으로 설정하는것은 body 에 margin:0 이나, background-color: white 라든가 기본적으로 설정하는것이 있고, 링크나 글꼴 등에도 기본적으로 설정하는것이 있습니다.

이런한 설정은 scaffolding.less 에 있습니다.


부트스트랩은 초기 CSS 설정을 Normalize 를 사용합니다.



그리드 시스템.


이전과 많이 바뀐부분이 이 그리드시스템입니다.

부트스트랩 2에서는 span1 부터 span12 까지가 그리드의 전부였다면 Bootstrap3 에서는 기기별로 각각 클래스를 나누어서 설정을 할 수 있습니다.


먼저 클래스의 옵션을 보세요.

클래스는 각 줄임말로 생성한것 같습니다. 즉, Extra small (폰사이즈) 는 xs 라는 클래스로, small 사이즈는 sm 클래스로, medium 사이즈는 md 클래스로, large 사이즈는 lg 클래스로 사용합니다.


아래 클래스부분을 보시면 col 이라는 접두사가 붙은다음 사이즈로 분리를 합니다.




또한 미디어쿼리를 사용하여 사이즈별로 대응을 할 수 있는데요.

아래 1번은 기본적으로 사용하는 방법을 알려준거고, 2번은 각 기기별로 최소폭과 최대폭을 지정해서 설정할 수 있다는것을 알려주는 겁니다.




대략 여기까지 설명이고 어떻게 사용하는지 한번 보겠습니다. 

제가 저 위에서 각 기기별로(또는 클래스별로) 각각 CSS 를 설정할 수 있다고 했습니다.


부트스트랩2에서는 .span6 .span6 하면 전체너비가 절반씩 나뉘어서 사용합니다.

또한 large 크기던 폰사이즈 크기던 모두 동일하게 적용되었습니다.



만약 span6 의 너비보다 작으면 통으로 span12의 너비를 차지합니다.


하지만 부트스트랩3에서는 이것을 폰과 테블릿, 데스크탑 등 각각 설정이 가능하다는 이야기 입니다.

아래 보시면 이전방식으로 너비를 지정한 예입니다.

두번째줄에 보시면 .col-md-8 과 .col-md-4 클래스가 보일겁니다.


이것은 큰화면과 medium 사이즈인 곳에서는 아래 이미지처럼 8의 영역과 4의 영역으로 나뉩니다.




하지만 크기가 줄어 폰사이즈가 되면 그것들은 무시되고, 각각 12영역만큼을 다 차지합니다.




하지만 모바일을 설정했다면 이야기는 다릅니다. 이것이 변경된 점인데요.

아래 이미지에서 첫번째를 보시면 .col-xs-12 를 지정했고, 우측에는 .col-xs-6 을 지정했습니다.

이것은 폰사이즈일때 12영역과 6의 영역을 차지하라는 이야기 입니다.


위에서도 말했듯 그리드시스템은 최대영역이 12 입니다. 

그러니까 12영역만큼 차지하고 6영역은 같은 영역이 아닌 다음(아래) 영역에 6만큼을 차지합니다.



아래 이미지를 보시면 이해가 갈 겁니다.

폰사이즈의 너비에서는 xs 로 지정한것처럼 12영역과 6의 영역으로 나뉩니다.



같이 설정한 클래스도 md 사이즈일때 8을 차지하고, 우측에는 4의 영역만큼 차지한다는 이야기 입니다.

이해가 가시나요???

복잡하죠....ㅎㅎㅎㅎㅎ


하나만 이해를 하면 다른것도 이해가 됩니다.

우선 다른것은 보지마시고, 폰사이즈인 xs 만 보고 이해를 하면 됩니다. 그럼 나머지도 자동으로 이해가 됩니다.


두번째 영영에 있는 .col-xs-4 클래스를 보시면 각각 3군데 똑같이 지정이 되어 있습니다.

이것은 폰사이즈의 너비일때 각각 4만큼의 영역을 차지해라라는 이야기 입니다.


즉 12의 영역이 최고너비이니 4,4,4,만큼 한줄에 각각 4의 영역만큼을 차지하니 한줄이 다 찬것을 볼 수 있습니다.


이런식으로 모바일, 테블릿, 데스크탑을 각각의 환경에 맞쳐서 제작이 가능하다는 이야기 입니다.

모바일만 설정할 수 있고, 3가지의 경우, 4가지의 경우 모두 설정을 각각 할 수 있다는 이야기 입니다.


다음은 offset 을 이용하여 왼쪽이나 오른쪽에 배치하는 방법입니다.

기본적으로 .col-md-4 하면 4의 영역만큼을 왼쪽으로 잡습니다. float: left 가 붙습니다. 즉 왼쪽 정렬이라는 이야기죠.

그 다음 .col-md-4 하면 두번째 영역이 4의 영역을 뺀 5부터 4의 너비만큼 영역을 잡겠지요.

여기서는 5부터 시작하지 말고 우측에 정렬을 시키는 방법을 알려드리고 있습니다.




즉 .col-md-offset-4 라는것은 이렇게 풀이할 수 있습니다.

col-md 는 midume 사이즈를 말하는겁니다.그때 4의 영역만큼을 차지하는에 왼쪽으로 띄워라.

즉 offset 의 클래스가 들어가면 margin-left 가 들어갑니다. 

그래서 왼쪽에서 지정한만큼 떨어져서 영역을 잡습니다.


여기서는 예제를 md 로 했기때문에 md 의 너비까지만 왼쪽에서 떨어진 곳에 그 영역을 잡습니다. 

폰사이즈의 너비가 되면 폰사이즈에서의 offset을 지정하지 않았기 때문에 왼쪽으로 붙고, 영역을 전부차지하게 됩니다.





다른것들도 마찬가지 입니다. 설명을 md 로 해서 그렇지 하나만 이해를 하면 나머지는 자동입니다.


Nesting columns 중첩.


아래 이미지를 보시면 col-md-9 안에 col-md-6 이 두개가 있습니다.

어떻게 9 안에 6이 두개가 들어갈 수 있느냐???라고 의문이 들수도 있습니다.

그래서 중첩을 알아야 하지요.




즉 부트스트랩에서의 중첩은 이렇습니다.

여기서 9영역은 자식들한테는 모든 영역을 차지하게 됩니다.


즉 부모가 9가 되던 8이 되던 뭐가되든간에 자식의 입장에서 봤을때는 12로 계산을 해야 한다는 말입니다.

예를들어 여기서 부모가 9의 영역을 잡습니다. 그럼 형제가 3이 있겠죠. 이건 신경쓰지마시고 일단 9만 생각하세요.


9의 영역안에서 자식들은 각각 6의 영역을 잡습니다. 여기서 9는 12입니다.

만약 부모의 영역이 9라고 해서 6하고 3을 잡으면 아마도 3의 영역만큼 빈 공간이 생길겁니다.


중요한점은 자식으로 중첩이 됐을경우 부모는 모두 12의 영역을 갖는다는것을 기억하시기 바랍니다.



Column ordering.

여기서 두개의 클래스가 나오는데요. 바로 pull 과 push 입니다.

나머지 붙은것들은 이전에 설명을 했으니 아실겁니다 위의 두단의 차이점만 알면 됩니다.


아래 이미지에서 클래스를 보시면 md 가 보일겁니다. 이것은 midume 사이즈에서 해당이 된다는 점을 알아두시고, 중요한것은 pull 과 push 입니다




push 는 왼쪽으로부터 떨어지는 지점을 말합니다.

즉 push-3 하면 왼쪽으로부터 3영역만큼 떨어진곳에 위치한다고 생각하면 됩니다. 그러니 왼쪽에서 떨어져서 우측으로 이동된곳에 위치를하게되니 float: right 와도 비슷한 성격을 뜁니다. 예로들자면.....


반대로 pull 은 오른쪽에서 떨어진 지점을 말합니다.

만약 pull-9 하면 오른쪽에서 9영역만큼 떨어진 왼쪽에 영역을 잡습니다. 이것도 말하자면 float: left 와 비슷한 성격입니다.  왼쪽으로 가니까요....


위의 이미지 아래쪽에 보시면 col-md-push-3 이 먼저 나옵니다. 하지만 우측으로 붙은 형상으로 보입니다.

두번째로 col-md-pull-9 는 왼쪽으로 붙은 형상입니다.

순서로는 두번째에 나왔지만 오른쪽에서 왼쪽으로 9만큼 떨어진곳에 위치하다보니 꼭 먼저 지정한것처럼 왼쪽에 보여집니다.


이것이 바로 pull 과 push 입니다.



LESS mixins and variables.

less 사용에 대한 글입니다.

부트스트랩에서 기본적으로 만들어놓은 그리드 클래스를 사용합니다.

부트스트랩에서 사용하는 mixins 는 홈페이지에서 참고하시기 바랍니다.


참고적으로 less 를 이용하여 수정해서 사용할 수도 있습니다.

사용자정의 값으로 변수를 수정하거나 믹스인을 사용할 수 있습니다.

아래는 두개의 열을 가진 레이아웃을 설정하는 예입니다.






다음은 Typography 부터 알아보겠습니다.