w3.css

반응형 그리드

W3.CSS는 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%).

예제

<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%).

예제

<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%)

예제

<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%).

예제

<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%).

예제

<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열 레이아웃을 생성한다.

예제

<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) 분할.

예제

<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 클래스는 그리드 열의 남은 부분을 사용하는 강력하고 유연한 클래스다.

예제

<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 너비 속성을 사용하여 열의 특정 너비를 결정한다.

예제

<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>