모래알 반응형웹

Bootstrap 4 (부트스트랩), 반응형 레이아웃, 격자형 레이아웃시스템 (2/2) 본문

부트스트랩

Bootstrap 4 (부트스트랩), 반응형 레이아웃, 격자형 레이아웃시스템 (2/2)

전상하 2018. 3. 30. 13:59

부트스트랩의 격자형 레이아웃시스템(Grid Layout System)은 이전에 포스팅한 내용이 주로 사용된다.

오늘 설명할 부분은 Bootstrap 4에서 추가된 기능들로 이런 것도 있다는 것을 알고 필요에 따라 사용하면 된다.

그러므로 아래 링크의 격자형 레이아웃시스템 (1/2)를 먼저 충분히 이해하는 것이 중요하다.


Bootstrap 4 (부트스트랩), 반응형 레이아웃, 격자형 레이아웃시스템 (1/2)

http://passauer1083.tistory.com/18

Variable width content

컨텐츠의 내용에 따라 너비가 가변적으로 변한다.


1 of 3
Variable width content
3 of 3
1 of 3
Variable width content
3 of 3


  <div class="row justify-content-md-center">
    <div class="col col-lg-2" style="border:1px solid #ccc;">
      1 of 3
    </div>
    <div class="col-md-auto" style="border:1px solid #ccc;">
      Variable width content
    </div>
    <div class="col col-lg-2" style="border:1px solid #ccc;">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col" style="border:1px solid #ccc;">
      1 of 3
    </div>
    <div class="col-md-auto" style="border:1px solid #ccc;">
      Variable width content
    </div>
    <div class="col col-lg-2" style="border:1px solid #ccc;">
      3 of 3
    </div>
  </div>
</div>
여기에서 <div class="col col-lg-2" style="border:1px solid #ccc;"> 은 영역에 테두리를 줘서 눈으로 확인하기 위한 것이므로 실제 코드를 적용할 때는 제거해야 한다.


Variable width content (1)의 경우:


<div class="col col-lg-2"> '1 of 3'과 '3 of 3'은 화면너비 576px 미만의 경우 100%로 보이고 화면너비 960px 이상에서는 2/12 너비로 보이게 된다.

<div class="col-md-auto"> 768px 이상에서 이 영역에 들어가는 내용에 따라 가변적으로 너비가 변하게 된다.

- 이론적으론 768px 미만에서는 화면너비 100% 영역을 사용하지만 실제론 781px 미만에서 이렇게 적용된다.

이 부분은 차차 스스로의 숙제로 남겨 알아보도록 하겠다.(*)


[숙제해결]

Browser Width와 같은 브라우저 너비를 체크하는 확장프로그램에서 적용되는 width는 스크롤바 등 크롬브라우저 현 상태의 너비이다.

크롬브라우저를 마우스로 서서히 줄여보면 화면 왼쪽 위에 나타나는 너비와 높이 수치(예: 768px x 707px)가 나타난다. 이 수치가 실제 브라우저의 너비이다.


가장 정확한 방법은 크롬의 개발자도구(F12)에서 브라우저 너비를 설정하는 것이다.

[참조] http://passauer1083.tistory.com/19


여기에는 Variable width content (2)와는 달리 <div class="row">에 'justify-content-md-center' class가 추가되어 있다. 960px 이상일 때  '1 of 3'과 '3 of 3'은 2/12 너비로 고정되고 중간 부분만 가변적이 된다.


Variable width content (2)의 경우:


<div class="col"> '1 of 3'은 화면너비 576px 미만에서는 100%로 보이고 그 외에는 
<div class="col-md-auto"> 영역에 따라 가변적이 된다.

<div class="col-md-auto"> 768px 이상에서 이 영역에 들어가는 내용에 따라 가변적으로 너비가 변하게 된다.

<div class="col col-lg-2"> '1 of 3'과 '3 of 3'은 화면너비 576px 미만의 경우 100%로 보이고 화면너비 960px 이상에서는 2/12 너비로 보이게 된다.

Multi-Row

부트스트랩에서 줄바꿈은 하나의 Container 안에 'row' class를 여러번 적용하면 된다.

<div class="container">
    <div class="row">
        <div class="col">1 of first row</div>
        <div class="col">2 of first row</div>
    </div> 
     <div class="row">
        <div class="col">1 of second row</div>
        <div class="col">2 of second row</div>
    </div>
</div> 

Bootstrap 4에서는 새로운 class "w-100"을 제공하여 줄바꿈을 할 수 있게 했다. 
개인적으로는 
Container 안에 'row' class를 여러번 적용하는 것이 더 나아보인다. 굳이 이 기능이 필요할까 싶다.

 <div class="container">
    <div class="row">
        <div class="col">1 of first row</div>
        <div class="col">2 of first row</div>
        <div class="w-100"></div>
        <div class="col">1 of second row</div>
        <div class="col">2 of second row</div>
    </div>
</div>

Vertical alignment

Row의 높이를 기준으로 세로정렬. Bootstrap 4에 새로 선보이는 기능이다. 하나의 Row내에서 이미지 또는 표와 혼용으로 사용될 때 괜찮은 기능으로 보인다.


One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
<div class="container">
  <div class="row align-items-start" style="min-height:150px;border: 1px solid #999;">
    <div class="col" style="border: 1px solid #333;">
      One of three columns
    </div>
    <div class="col" style="border: 1px solid #333;">
      One of three columns
    </div>
    <div class="col" style="border: 1px solid #333;">
      One of three columns
    </div>
  </div>
  <div class="row align-items-center" style="min-height:150px;border: 1px solid #999;">
    <div class="col" style="border: 1px solid #333;">
      One of three columns
    </div>
    <div class="col" style="border: 1px solid #333;">
      One of three columns
    </div>
    <div class="col" style="border: 1px solid #333;">
      One of three columns
    </div>
  </div>
  <div class="row align-items-end" style="min-height:150px;border: 1px solid #999;">
    <div class="col" style="border: 1px solid #333;">
      One of three columns
    </div>
    <div class="col" style="border: 1px solid #333;">
      One of three columns
    </div>
    <div class="col" style="border: 1px solid #333;">
      One of three columns
    </div>
  </div>
</div>

여기에서 <div class="row">에 style="min-height:150px;border: 1px solid #999;"를 지정했다.

원래 row의 높이는 그 안에 포함되는 컨텐츠의 높이에 따라 유동적으로 변하지만 150px의 높이와 #999999의 테두리 색상을 주어 눈으로 기능을 확인할 수 있게 했다.

마찬가지로 <div class="col">에도 테두리값을 주었다. 실무에 적용할 때는 제거하기 바란다.

(이 포스팅에 나오는 소스코드에는 모두 동일한 방식으로 적용하였습니다.)


<div class="row align-items-start">: row에 포함되는 컨텐츠가 '위로 정렬'

<div class="row align-items-center">: row에 포함되는 컨텐츠가 '가운데 정렬'

<div class="row align-items-end">: row에 포함되는 컨텐츠가 '아래 정렬'


Row 뿐만 아니라 그에 포함되는 Column에도 개별적으로 세로정렬을 지정할 수 있다.

<div class="container">
  <div class="row" style="min-height:300px;border: 1px solid #999;">
    <div class="col align-self-start" style="border: 1px solid #333;">
      One of three columns
    </div>
    <div class="col align-self-center" style="border: 1px solid #333;">
      One of three columns
    </div>
    <div class="col align-self-end" style="border: 1px solid #333;">
      One of three columns
    </div>
  </div>
</div>

<div class="col align-self-start">: row에서 이 column만 '위로 정렬'

<div class="col align-self-center">: row에서 이 column만 '가운데 정렬'

<div class="col align-self-end">: row에서 이 column만 '아래 정렬'

Horizontal alignment : Column의 수평정렬

<div class="container">
  <div class="row justify-content-start">
    <div class="col-4" style="border: 1px solid #333;">
      One of two columns
    </div>
    <div class="col-4" style="border: 1px solid #333;">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-center">
    <div class="col-4" style="border: 1px solid #333;">
      One of two columns
    </div>
    <div class="col-4" style="border: 1px solid #333;">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-end">
    <div class="col-4" style="border: 1px solid #333;">
      One of two columns
    </div>
    <div class="col-4" style="border: 1px solid #333;">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-around">
    <div class="col-4" style="border: 1px solid #333;">
      One of two columns
    </div>
    <div class="col-4" style="border: 1px solid #333;">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-between">
    <div class="col-4" style="border: 1px solid #333;">
      One of two columns
    </div>
    <div class="col-4" style="border: 1px solid #333;">
      One of two columns
    </div>
  </div>
</div>

<div class="row justify-content-start">: row에 포함된 column이 왼쪽정렬(기본)

<div class="row justify-content-center">: row에 포함된 column이 중앙정렬

<div class="row justify-content-end">: row에 포함된 column이 오른쪽 정렬

<div class="row justify-content-around">: row를 column의 수만큼 나눈 다음에 그 영역에 포함된 column을 중앙정렬

<div class="row justify-content-between">: row를 column의 수만큼 나눈 다음에 그 영역에 포함된 column을 왼쪽끝에 있는 column은 왼쪽정렬, 오른쪽끝에 있는 column은 오른쪽정렬, 중앙에 위치한 column은 모두 중앙정렬

No gutters

여백없음. 부트스트랩의 column은 기본적으로 양쪽에 15px씩 여백(Padding)이 잡혀있다.

padding-right:15px; padding-left:15px;


<div class="row no-gutters">: row에 포함되는 모든 column의 여백을 없앤다.

<div class="container">
	<div class="row">
	  <div class="col-12 col-sm-6 col-md-8" style="border:1px solid #333;">.col-12 .col-sm-6 .col-md-8</div>
	  <div class="col-6 col-md-4" style="border:1px solid #333;">.col-6 .col-md-4</div>
	</div>
	<div class="row no-gutters">
	  <div class="col-12 col-sm-6 col-md-8" style="border:1px solid #333;">.col-12 .col-sm-6 .col-md-8</div>
	  <div class="col-6 col-md-4" style="border:1px solid #333;">.col-6 .col-md-4</div>
	</div>
</div>

Reordering

row내의 column이 화면에 나타나는 순서를 지정하는 것이다.

order class는 order-1 ~ order-12까지 모두 활용할 수 있으며 order-firstorder-last도 있다.

column으로 order class를 사용한 것과 사용하지 않은 것이 혼합되어있다면 order class를 사용하지 않은 column은 자기 순서를 그대로 가지게 된다.


<div class="col-sm-4 order-1">: order class를 사용한 column 중 첫번째에 배치

<div class="col-sm-4 order-2">: order class를 사용한 column 중 두번째에 배치

<div class="col-sm-4 order-12">: order class를 사용한 column 중 열두번째(마지막)에 배치


<div class="col-sm-4 order-first">: order class를 사용한 column 중 첫번째에 배치

<div class="col-sm-4 order-last">: order class를 사용한 column 중 마지막에 배치


아래의 소스를 테스트해보면 간단하게 이해할 수 있다.

<div class="container">
	<div class="row">
	  <div class="col-sm-4" style="border:1px solid #333;">unordered</div>
	  <div class="col-sm-8 order-1" style="border:1px solid #333;">order 1</div>
	</div>
	<div class="row">
	  <div class="col-sm-4 order-12" style="border:1px solid #333;">unordered</div>
	  <div class="col-sm-8 order-1" style="border:1px solid #333;">order 1</div>
	</div>
	<div class="row">
	  <div class="col-sm-4 order-last" style="border:1px solid #333;">order-last</div>
	  <div class="col-sm-4" style="border:1px solid #333;">unordered</div>
	  <div class="col-sm-4 order-first" style="border:1px solid #333;">order-first</div>
	</div>
</div>

Offset classes

offset-*, offset-sm-*, offset-md-*, offset-lg-*, offset-xl-*

column의 왼쪽에 지정한 (*/12)만큼 여백을 둔다.


<div class="col-md-6 offset-md-4">:  

768px 이상에서 4/12만큼 왼쪽에 여백을 두고 6/12영역의 column을 둔다. 

768px 미만에서는 여백이 생기지 않는다.


<div class="col-md-6 offset-sm-6">: 

540px이상에서 6/12만큼 왼쪽에 여백을 두고 6/12영역의 column을 둔다.

576px 미만에서는 여백이 생기지 않는다.

<div class="container">
	<div class="row">
	  <div class="col-md-4" style="border:1px solid #333;">.col-md-4</div>
	  <div class="col-md-4 offset-sm-4" style="border:1px solid #333;">.col-md-4 .offset-md-4</div>
	</div>
	<div class="row">
	  <div class="col-md-3 offset-md-3" style="border:1px solid #333;">.col-md-3 .offset-md-3</div>
	  <div class="col-md-3 offset-md-3" style="border:1px solid #333;">.col-md-3 .offset-md-3</div>
	</div>
	<div class="row">
	  <div class="col-md-6 offset-md-3" style="border:1px solid #333;">.col-md-6 .offset-md-3</div>
	</div>
</div>

<div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">: 

576px이상에서 2/12만큼 여백을 두지만 768px이상에서는 여백을 초기화한다(여백을 없앤다).


<div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">:

768px이상에서 2/12만큼 여백을 두지만 960px이상에서는 여백을 초기화한다(여백을 없앤다).

Margin

css의 margin-left:auto; margin-right:auto;가 column에 적용된다. (.ml-auto, .mr-auto )


<div class="col-md-4"></div> <div class="col-md-4 ml-auto"></div>: 

왼쪽여백을 브라우저가 자동계산하여 적용. (margin-left:auto;)

==> [참조] https://www.w3schools.com/cssref/pr_margin-left.asp 


<div class="col-md-3 ml-md-auto"></div> <div class="col-md-3 ml-md-auto"></div>: 

768px 이상에서 왼쪽여백을 브라우저가 자동계산하여 적용.


<div class="col-auto mr-auto"></div><div class="col-auto">:

'col-auto' (width:auto; )는 브라우저가 너비를 자동으로 계산하여 1/12의 너비가 column에 적용

==> [참조] https://www.w3schools.com/cssref/pr_dim_width.asp 


'mr-auto' (margin-right:auto;) 오른쪽 여백을 브라우저가 자동계산하여 적용

==> [참조] https://www.w3schools.com/cssref/pr_margin-right.asp

<div class="container">
    <div class="row">
      <div class="col-md-4" style="border:1px solid #333;">.col-md-4</div>
      <div class="col-md-4 ml-auto" style="border:1px solid #333;">.col-md-4 .ml-auto</div>
    </div>
    <div class="row">
      <div class="col-md-3 ml-md-auto" style="border:1px solid #333;">.col-md-3 .ml-md-auto</div>
      <div class="col-md-3 ml-md-auto" style="border:1px solid #333;">.col-md-3 .ml-md-auto</div>
    </div>
    <div class="row">
      <div class="col-auto mr-auto" style="border:1px solid #333;">.col-auto .mr-auto</div>
      <div class="col-auto" style="border:1px solid #333;">.col-auto</div>
    </div>
    <div class="row">
      <div class="col-auto mr-auto" style="border:1px solid #333;">.col-auto .mr-auto</div>
      <div class="col-1" style="border:1px solid #333;">.col-1</div>
    </div>
</div>

Nesting (중첩)

Column 영역을 또 다시 분할할 수 있다. 이를테면 Column 영역이 그 내부에 Row를 포함할 수 있다.

특정 Column에 포함되는 Row도 마찬가지로 12분할된다.

  <div class="container">
    <div class="row">
      <div class="col-sm-8" style="border:1px solid #333;">
        Level 1: col-sm-8
        <div class="row">
          <div class="col-8 col-sm-6" style="border:1px solid #666;">
            Level 2: col-8 col-sm-6
          </div>
          <div class="col-4 col-sm-6" style="border:1px solid #666;">
            Level 2:col-4 col-sm-6
          </div>
        </div> <!-- row -->
      </div> <!-- col-sm-8 -->
      <div class="col-sm-4"  style="border:1px solid #333;">
        Level 1: col-sm-4
      </div> <!-- col-sm-4 -->
    </div> <!-- row -->
  </div><!-- container -->


Comments