그리드10 [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] 부트스트랩 그리드 – 컬럼 리셋 Head Body Heading Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. View details » Heading Donec id elit non mi porta gravida at eget metus. View details » Heading Donec sed odio dui. Cras justo odio, dapibus ac faci.. 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 다음