여러분이 사용하고 계신 브라우저는 HTML5를 지원하지 않기 때문에 몇몇 요소가 제대로 보이도록 JScript를 사용하고 있습니다. 하지만 여러분의 브라우저 설정에서 스크립트 기능이 꺼져있으므로, 현재 페이지를 제대로 확인하시려면 스크립트 기능을 켜주셔야 합니다. w3.css - 반응형 그리드
w3.css – 반응형 그리드
2개월전 작성
3개월전 수정

w3.css

반응형 그리드

W3.CSS는 12열 반응형 그리드를 지원한다.

효과를 보려면 페이지 크기를 조정하자.

1
2
3
4
5
6
7
8
9
10
11
12

이 부분은 작은 화면에서는 12열, 중간 화면에서는 4열, 큰 화면에서는 3열을 차지합니다.

이 부분은 작은 화면에서는 12열, 중간 화면에서는 8열, 큰 화면에서는 9열을 차지합니다.

1
2
3
4
5
6
7
8
9
10
11
12
예제
<div class="w3-row">
  <div class="w3-col m4 l3">
    <p>12 columns on a small screen, 4 on a medium screen, and 3 on a large screen.</p>
  </div>
  <div class="w3-col m8 l9">
    <p>12 columns on a small screen, 8 on a medium screen, and 9 on a large screen.</p>
  </div>
</div>

반응형 행

W3.CSS의 그리드 시스템은 반응성이 뛰어나다.
화면 크기에 따라 열이 자동으로 다시 정렬된다.
큰 화면에서는 콘텐츠를 세 개의 열로 구성하면 더 보기 좋을 수 있지만, 작은 화면에서는 콘텐츠가 서로 겹쳐져 있으면 더 좋을 수 있다.

Class Description
w3-row 패딩이 없는 반응형 클래스용 컨테이너
w3-row-padding 8px 왼쪽 및 오른쪽 패딩이 있는 반응형 클래스용 컨테이너
w3-col 12열 반응형 그리드에서 하나의 열을 정의합니다.

w3-col에는 다음과 같은 하위 클래스가 있다.

작은 화면용 열(일반적인 스마트폰)
Class Description
s1 작은 화면에 대해 12개 열 중 1개(너비:08.33%)를 정의한다.
s2 작은 화면에 대해 12개의 열 중 2개(너비:16.66%)를 정의한다.
s3 작은 화면에 대해 12개의 열 중 3개(너비:25.00%)를 정의한다.
s4 작은 화면에 대해 12개의 열 중 4개(너비:33.33%)를 정의한다.
s5-s11  
s12 12개의 열 중 12개를 정의한다(너비:100%). 작은 화면의 기본값
중형 화면용 열(일반 태블릿)
Class Description
m1 중간 화면에 대해 12개 열 중 1개(너비:08.33%)를 정의한다.
m2 중간 화면에 대해 12개 열 중 2개(너비:16.66%)를 정의한다.
m3 중간 화면에 대해 12개의 열 중 3개(너비:25.00%)를 정의한다.
m4 중형 화면에 대해 12개의 열 중 4개(너비:33.33%)를 정의한다.
m5-m11   
m12 12개의 열 중 12개를 정의한다(너비:100%). 중간 화면의 기본값
대형 화면용 열(일반적인 노트북 및 데스크탑)
Class Description
l1 대형 화면에 대해 12개 열 중 1개(너비:08.33%)를 정의합니다.
l2 대형 화면에 대해 12개의 열 중 2개(너비:16.66%)를 정의합니다.
l3 대형 화면에 대해 12개의 열 중 3개(너비:25.00%)를 정의합니다.
l4 대형 화면에 대해 12개의 열 중 4개(너비:33.33%)를 정의합니다.
l5-l11  
l12 12개의 열 중 12개를 정의합니다(너비:100%). 대형 화면의 경우 기본값)

위의 클래스를 결합하여 보다 동적이고 유연한 레이아웃을 만들 수 있다.

각 클래스는 확장되므로 소형, 중형, 대형 화면에 동일한 너비를 설정하려면 소형 클래스만 지정하면 된다.
그리고 중대형 화면에서 동일한 너비를 원할 경우에는 중형 클래스만 지정하면 된다.

그러나 중간 또는 큰 클래스만 사용하는 경우 작은 화면에서는 너비가 항상 100%로 변환된다.

⭐ 열 수는 항상 각 행(6+6, 3+3+6, 9+3 등)에 대해 최대 12개까지 합산되어야 한다.

두 개의 동일한 열

모든 화면 크기에서 동일한 너비의 열 2개(50%/50%).

s6

s6

예제
<div class="w3-row">
  <div class="w3-col s6 w3-green w3-center"><p>s6</p></div>
  <div class="w3-col s6 w3-dark-grey w3-center"><p>s6</p></div>
</div>

두 개의 서로 다른 열

모든 화면 크기에서 너비가 다른 두 열(25%/75%).

s3

s9

예제
<div class="w3-row">
  <div class="w3-col s3 w3-green w3-center"><p>s3</p></div>
  <div class="w3-col s9 w3-dark-grey w3-center"><p>s9</p></div>
</div>

세 개의 동일한 열

모든 화면 크기에서 3개의 동일한 너비 열(33.3%/33.3%/33.3%)

s4

s4

s4

예제
<div class="w3-row">
  <div class="w3-col s4 w3-green w3-center"><p>s4</p></div>
  <div class="w3-col s4 w3-dark-grey w3-center"><p>s4</p></div>
  <div class="w3-col s4 w3-red w3-center"><p>s4</p></div>
</div>

세 개의 서로 다른 열

태블릿, 노트북, 데스크탑에 다양한 너비의 열 3개(25%/50%/25%)가 있다.
휴대폰에서는 열이 자동으로 쌓인다(너비 100%).

m3

m6

m3

예제
<div class="w3-row">
  <div class="w3-col m3 w3-green w3-center"><p>m3</p></div>
  <div class="w3-col m6 w3-dark-grey w3-center"><p>m6</p></div>
  <div class="w3-col m3 w3-red w3-center"><p>m3</p></div>
</div>

6개의 기둥

태블릿, 노트북, 데스크탑에 동일한 너비의 열 6개(각각 16%)가 있다.
휴대폰에서는 열이 자동으로 쌓인다(너비 100%).

m2

m2

m2

m2

m2

m2

예제
<div class="w3-row">
  <div class="w3-col m2 w3-green w3-center"><p>m2</p></div>
  <div class="w3-col m2 w3-red w3-center"><p>m2</p></div>
  <div class="w3-col m2 w3-blue w3-center"><p>m2</p></div>
  <div class="w3-col m2 w3-dark-grey w3-center"><p>m2</p></div>
  <div class="w3-col m2 w3-black w3-center"><p>m2</p></div>
  <div class="w3-col m2 w3-purple w3-center"><p>m2</p></div>
</div>

혼합: 모바일 및 노트북

클래스를 결합하여 동적이고 유연한 레이아웃을 만들 수 있다.
이 예에서는 대형 화면에서 83.34%/16.66%(l10, l2) 분할, 소형 화면에서 50%/50%(s6, s6) 분할을 사용하는 2열 레이아웃을 생성한다.

l10 s6

l2 s6

예제
<div class="w3-row">
  <div class="w3-col l10 s6 w3-pink w3-center"><p>l10 s6</p></div>
  <div class="w3-col l2 s6 w3-dark-grey w3-center"><p>l2 s6</p></div>
</div>

혼합: 모바일, 태블릿, 노트북

이 예에서는 대형 화면에서 25%/58.34%/16.66%(l3, l7, l2) 분할, 중간 화면에서 50%/25%/25%(m6, m3, m3) 분할 및 작은 화면에서는 33.3%/33.3%/33.3%(s4, s4, s4) 분할.

l3 m6 s4

l7m3s4

l2 m3 s4

예제
<div class="w3-row">
  <div class="w3-col l3 m6 s4 w3-green w3-center"><p>l3 m6 s4</p></div>
  <div class="w3-col l7 m3 s4 w3-dark-grey w3-center"><p>l7 m3 s4</p></div>
  <div class="w3-col l2 m3 s4 w3-red w3-center"><p>l2 m3 s4</p></div>
</div>

w3-row와 w3-row-padding의 차이점

w3-row 클래스는 패딩이 없는 컨테이너를 정의하는 반면, w3-row-padding 클래스는 각 열에 8px 왼쪽 및 오른쪽 패딩을 추가한다.

w3-row
w3-row-padding
예제
<div class="w3-row">
  <div class="w3-col s4"><img src="img_lights.jpg"></div>
  <div class="w3-col s4"><img src="img_nature.jpg"></div>
  <div class="w3-col s4"><img src="img_snowtops.jpg"></div>
</div>

<div class="w3-row-padding">
  <div class="w3-col s4"><img src="img_lights.jpg"></div>
  <div class="w3-col s4"><img src="img_nature.jpg"></div>
  <div class="w3-col s4"><img src="img_snowtops.jpg"></div>
</div>

w3-rest 사용

w3-rest 클래스는 그리드 열의 남은 부분을 사용하는 강력하고 유연한 클래스다.

150px

나머지

75px

나머지

100px

100px

나머지

4분의 1

80px

나머지

4분의 1

4분의 1

4분의 1

35%

나머지

예제
<div class="w3-row">
  <div class="w3-col" style="width:150px"><p>150px</p></div>
  <div class="w3-rest"><p>rest</p></div>
</div>

 

⭐ class=”w3-rest”를 사용하는 요소는 항상 소스 코드의 마지막 요소여야 한다.

백분율 사용

CSS 너비 속성을 사용하여 열의 특정 너비를 결정한다.

20%

60%

20%

45%

55%

15%

35%

10%

30%

10%

예제
<div class="w3-row">
  <div class="w3-col w3-container w3-green" style="width:20%"><p>20%</p></div>
  <div class="w3-col w3-container w3-blue" style="width:60%"><p>60%</p></div>
  <div class="w3-col w3-container w3-red" style="width:20%"><p>20%</p></div>
</div>
참고
Mingg`s Diary
밍구
공부 목적 블로그