w3.css

레이아웃

W3.CSS 레이아웃 클래스

Class	Description
w3-cell-row	셀(열)의 컨테이너.
w3-cell	레이아웃 셀(열).
w3-cell-top	셀(열) 위쪽에 내용을 맞춘다.
w3-cell-middle	셀(열)의 세로 중앙에 내용을 맞춘다.
w3-cell-bottom	셀(열) 아래쪽에 내용을 맞춘다.
w3-mobile	셀(열)에 모바일 우선 반응형을 추가한다. 모바일 장치에서 요소를 블록 요소로 표시한다.

HTML 블록 요소

원래 HTML 블록 요소(예: <div> 요소)는 수직 블록으로 표시된다.

예제

<div class="w3-container w3-red">
  <p>Hello W3.CSS Layout.</p>
</div>

<div class="w3-container w3-green">
  <p>Hello W3.CSS Layout.</p>
</div>

레이아웃 셀

w3-cell 클래스는 가로로 표시되도록 블록 요소를 재정의한다(예: 테이블 셀).

예제

<div class="w3-container w3-red w3-cell">
  <p>Hello W3.CSS Layout.</p>
</div>

<div class="w3-container w3-green w3-cell">
  <p>Hello W3.CSS Layout.</p>
</div>

레이아웃 컨테이너

w3-cell-row는 셀(열)을 위한 컨테이너다.

w3-cell-row 컨테이너의 너비는 포함된 모든 셀의 전체 너비를 정의한다.

기본 너비는 100%다.

예제

<div class="w3-cell-row">

  <div class="w3-container w3-red w3-cell">
    <p>Hello W3.CSS Layout.</p>
  </div>

  <div class="w3-container w3-green w3-cell">
    <p>Hello W3.CSS Layout.</p>
  </div>

</div>

 

셀 컨테이너의 너비를 변경하면 포함된 셀의 전체 너비가 줄어든다.

예제

<div class="w3-cell-row" style="width:75%">

  <div class="w3-container w3-red w3-cell">
    <p>Hello W3.CSS Layout.</p>
  </div>

  <div class="w3-container w3-green w3-cell">
    <p>Hello W3.CSS Layout.</p>
  </div>

</div>

자체 조정되는 레이아웃 셀

w3-cell 클래스에는 자체 조정 표준이 내장되어 있다.
나란히 있는 요소는 필요한 너비에 맞게 자동으로 조정된다.

예제

<div class="w3-container w3-red w3-cell">
  <p>Hello W3.CSS Layout.</p>
</div>

<div class="w3-container w3-green w3-cell">
  <p>Hello W3.CSS Layout. Hello W3.CSS Layout.</p>
</div>

동일한 높이로 조정되는 레이아웃 셀

나란히 있는 w3-cell 요소도 자동으로 동일한 높이로 자체 조정된다.

예제

<div class="w3-container w3-red w3-cell">
  <p>Hello W3.CSS Layout.</p>
</div>

<div class="w3-container w3-green w3-cell">
  <p>Hello W3.CSS Layout.</p>
  <p>Hello W3.CSS Layout.</p>
  <p>Hello W3.CSS Layout.</p>
  <p>Hello W3.CSS Layout.</p>
</div>

반응형 레이아웃

w3-mobile 클래스는 모든 HTML 요소에 모바일 우선 응답성을 추가한다.

w3-cell과 함께 사용하면 작은 화면/휴대폰에서는 레이아웃 열을 세로로 표시하고 중/대형 화면에서는 가로로 표시한다.

예제

<div class="w3-container w3-red w3-cell w3-mobile">
  <p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-cell w3-mobile">
  <p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-blue w3-cell w3-mobile">
  <p>Hello W3.CSS Layout.</p>
</div>

쉬운 정렬

w3-cell 클래스를 사용하면 텍스트 정렬이 매우 쉽다.

3가지 정렬 클래스가 있다.

• w3-cell-top (기본값)
• w3-셀-중간
• w3 셀 바닥

예제

<div class="w3-container w3-red w3-cell">
  <p>Hello W3.CSS Layout.</p>
  <p>Hello W3.CSS Layout.</p>
  <p>Hello W3.CSS Layout.</p>
  <p>Hello W3.CSS Layout.</p>
</div>

<div class="w3-container w3-green w3-cell w3-cell-middle">
  <p>Hello W3.CSS Layout.</p>
</div>

<div class="w3-container w3-blue w3-cell w3-cell-bottom">
  <p>Hello W3.CSS Layout.</p>
</div>

w3-cell-row 클래스는 페이지 너비에 맞게 요소를 늘린다.

예제

<div class="w3-cell-row">

<div class="w3-container w3-red w3-cell">
  <p>Hello W3.CSS Layout.</p>
  <p>Hello W3.CSS Layout.</p>
  <p>Hello W3.CSS Layout.</p>
  <p>Hello W3.CSS Layout.</p>
</div>

<div class="w3-container w3-green w3-cell w3-cell-middle">
  <p>Hello W3.CSS Layout.</p>
</div>

<div class="w3-container w3-blue w3-cell w3-cell-bottom">
  <p>Hello W3.CSS Layout.</p>
</div>

</div>