Grid9 [bootstrap] 부트스트랩 사이드바 픽셀(px)로 고정된 반응형 레이아웃 그리드 보통 부트스트랩 반응형 그리드는 브라우저 창 너비가 줄어들면 사이드바도 같이 줄어드는데 사이드바는 줄어들지 않고 정해진 px로 고정돼 있으면서 내용 부분만 줄어드는 반응형 그리드 예제입니다. 참고로, 부트스트랩 3.0 이상에서만 동작한다고 합니다. 2018. 5. 26. [bootstrap] 부트스트랩 그리드 – 전체폭 레이아웃 부트스트랩 그리드에서는 .container 선택자를 사용하는데요. .container 선택자에 -fluid만 추가하면 전체폭 레이아웃으로 변경됩니다. … 부트스트랩 2.0 버전에서는 .row 선택자도 .row-fluid로 같이 변경해야 했지만 3.0에서는 .container-fluid만 변경하면 됩니다. .container-fluid는 너비가 정해지지 않아서 부모 요소의 너비에 따라 좌우되며 주로 전체폭 레이아웃을 만들 때 사용합니다. 2016. 1. 15. [bootstrap] 부트스트랩 그리드 – 컬럼 오프셋(Column Offset) 화면너비 768px 미만 768px 이상 992px 이상 1200px 이상 그리드 배열항상 가로배열가로 배열에서 위 수치에 이르면 세로 배열로 전환 .container 너비 없음 (항상 화면 전체너비) 750px970px1170px 클래스 선택자 접두어 .col-xs- (xs: extra small) .col-sm- (sm: small) .col-md- (md: medium) .col-lg- (lg: large) 거터(그리드 사이 여백) 크기 30px, 그리드 좌우측 15px 패딩 컬럼 오프셋이란 그리드를 일정 크기만큼 간격을 둘 수 있는 기능입니다. … 하나의 .row에 하나의 그리드만 있습니다. 해당 그리드의 크기만큼 오프셋 선택자를 추가하면 왼쪽으로부터 떨어져서 배치됩니다. 어떤 요소를 중앙 정렬하.. 2016. 1. 15. [bootstrap] 부트스트랩 그리드 – 스마트폰에 적합한 그리드 선택자 배치 화면너비 768px 미만 768px 이상 992px 이상 1200px 이상 그리드 배열항상 가로배열가로 배열에서 위 수치에 이르면 세로 배열로 전환 .container 너비 없음 (항상 화면 전체너비) 750px970px1170px 클래스 선택자 접두어 .col-xs- (xs: extra small) .col-sm- (sm: small) .col-md- (md: medium) .col-lg- (lg: large) 거터(그리드 사이 여백) 크기 30px, 그리드 좌우측 15px 패딩 스마트폰처럼 좁은 화면에서는 모든 그리드가 좌우로 배열되면 폭이 너무 좁습니다. 그래서 마지막 .col-xs-6 의 총 합이 12가 넘게해서 마지막 그리드는 아래로 내려오게해서 폭을 넓게 사용할 수 있습니다. 다른 크기의 너비.. 2016. 1. 15. [bootstrap] 부트스트랩 그리드 부트스트랩은 12열의 그리드 시스템을 사용합니다. 그리드의 사이즈는 입력한 클래스의 선택자에 따라 달라집니다. 화면너비 768px 미만 768px 이상 992px 이상 1200px 이상 그리드 배열항상 가로배열가로 배열에서 위 수치에 이르면 세로 배열로 전환 .container 너비 없음 (항상 화면 전체너비) 750px970px1170px 클래스 선택자 접두어 .col-xs- (xs: extra small) .col-sm- (sm: small) .col-md- (md: medium) .col-lg- (lg: large) 거터(그리드 사이 여백) 크기 30px, 그리드 좌우측 15px 패딩 가장 상위에 .container 선택자가, 그 바로 하위에 .row 선택자가, 그 다음 하위에 그리드를 만들기 위한.. 2016. 1. 15. [bootstrap] 부트스트랩 그리드 – 컬럼 네스팅(Column Nesting) 화면너비 768px 미만 768px 이상 992px 이상 1200px 이상 그리드 배열항상 가로배열가로 배열에서 위 수치에 이르면 세로 배열로 전환 .container 너비 없음 (항상 화면 전체너비) 750px970px1170px 클래스 선택자 접두어 .col-xs- (xs: extra small) .col-sm- (sm: small) .col-md- (md: medium) .col-lg- (lg: large) 거터(그리드 사이 여백) 크기 30px, 그리드 좌우측 15px 패딩 이번에는 .row 부분을 복사해서 첫 번째 그리드의 콘텐츠를 지우고 붙여넣었습니다. 이렇게 내부에 레이아웃을 추가로 만들려면 .row가 있는 태그도 추가해야 합니다. 부모 그리드의 숫자가 8인데, 작식 그리드의 숫자의 합이 1.. 2016. 1. 15. [bootstrap] 부트스트랩 그리드 – 그리드를 밀고 당기는 선택자 사용하기 화면너비 768px 미만 768px 이상 992px 이상 1200px 이상 그리드 배열항상 가로배열가로 배열에서 위 수치에 이르면 세로 배열로 전환 .container 너비 없음 (항상 화면 전체너비) 750px970px1170px 클래스 선택자 접두어 .col-xs- (xs: extra small) .col-sm- (sm: small) .col-md- (md: medium) .col-lg- (lg: large) 거터(그리드 사이 여백) 크기 30px, 그리드 좌우측 15px 패딩 좌측이 내용이고, 우측이 사이드바인 그리드입니다. 각 요소 맨 끝에 .col-md-push-4와 .col-md-pull-8 선택자를 추가했습니다. push와 pull은 왼쪽을 기준으로 하므로 push는 왼쪽에서 오른쪽으로 미는.. 2016. 1. 15. [bootstrap] 부트스트랩 그리드 – 전통적인 페이지 레이아웃 화면너비 768px 미만 768px 이상 992px 이상 1200px 이상 그리드 배열항상 가로배열가로 배열에서 위 수치에 이르면 세로 배열로 전환 .container 너비 없음 (항상 화면 전체너비) 750px970px1170px 클래스 선택자 접두어 .col-xs- (xs: extra small) .col-sm- (sm: small) .col-md- (md: medium) .col-lg- (lg: large) 거터(그리드 사이 여백) 크기 30px, 그리드 좌우측 15px 패딩 좌측 내용과 우측에 사이드바가 있는 전통적인 그리드인데요. 좌측 그리드는 8을 우측 그리드는 4로 2:1 비율로 만들었습니다.… … 2016. 1. 15. [bootstrap] 부트스트랩 그리드 – 동시에 여러개의 그리드 선택자 사용 화면너비 768px 미만 768px 이상 992px 이상 1200px 이상 그리드 배열항상 가로배열가로 배열에서 위 수치에 이르면 세로 배열로 전환 .container 너비 없음 (항상 화면 전체너비) 750px970px1170px 클래스 선택자 접두어 .col-xs- (xs: extra small) .col-sm- (sm: small) .col-md- (md: medium) .col-lg- (lg: large) 거터(그리드 사이 여백) 크기 30px, 그리드 좌우측 15px 패딩 하나의 그리드 선택자만 사용한 레이아웃과 여러 개의 그리드 선택자를 사용한 레이아웃을 비교하기 위해서 .row 부분을 복사해 바로 아래에 붙여 넣고 col-md-4 선택자에 col-lg-4 col-sm-4 선택자를 추가해 보았.. 2016. 1. 15. 이전 1 다음