W3.CSS 레이아웃
안녕하세요 W3.CSS 레이아웃입니다.
안녕하세요 W3.CSS 레이아웃입니다.
안녕하세요 W3.CSS 레이아웃입니다.
안녕하세요 W3.CSS 레이아웃입니다.
안녕하세요 W3.CSS 레이아웃입니다.
안녕하세요 W3.CSS 레이아웃입니다.
W3.CSS 레이아웃 클래스
W3.CSS 버전 2.90 / 2.91은 "열과 같은" 레이아웃에 대해 다음 클래스를 도입했습니다.
| 등급 | 설명 |
|---|---|
| w3 셀 행 | 셀(열)용 컨테이너입니다. |
| w3 세포 | 레이아웃 셀(열). |
| w3-cell-top | 셀(열)의 상단에 내용을 맞춥니다. |
| w3-cell-중간 | 셀(열)의 세로 중간에 내용을 맞춥니다. |
| w3-cell-바닥 | 셀(열)의 맨 아래에 내용을 맞춥니다. |
| w3-모바일 | 셀(열)에 모바일 우선 응답성을 추가합니다. 모바일 장치에서 요소를 블록 요소로 표시합니다. |
레이아웃 클래스는 더 이상 사용되지 않는 레이아웃 클래스를 대체합니다.
새로운 레이아웃 분류기는 더 다양하고 사용하기 쉽습니다.
더 이상 사용되지 않는 레이아웃 클래스는 이 페이지 하단에 나열되어 있습니다.
HTML 블록 요소
원래 HTML 블록 요소(예: <div> 요소)는 수직 블록으로 표시됩니다.
안녕하세요 W3.CSS 레이아웃입니다.
안녕하세요 W3.CSS 레이아웃입니다.
예시
<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 클래스 는 블록 요소를 재정의하여 (테이블 셀과 같이) 수평으로 표시할 수 있습니다.
안녕하세요 W3.CSS 레이아웃입니다.
안녕하세요 W3.CSS 레이아웃입니다.
예시
<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%입니다.
안녕하세요 W3.CSS 레이아웃입니다.
안녕하세요 W3.CSS 레이아웃입니다.
예시
<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>
셀 컨테이너의 너비를 변경하면 포함된 셀의 전체 너비가 줄어듭니다.
안녕하세요 W3.CSS 레이아웃입니다.
안녕하세요 W3.CSS 레이아웃입니다.
예시
<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 클래스에는 자체 조정 표준이 내장되어 있습니다 . 나란히 있는 요소는 필요한 너비로 자동 조정됩니다.
안녕하세요 W3.CSS 레이아웃입니다.
안녕하세요 W3.CSS 레이아웃입니다. 안녕하세요 W3.CSS 레이아웃입니다.
예시
<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 셀 요소도 자동으로 동일한 높이로 자동 조정됩니다.
안녕하세요 W3.CSS 레이아웃입니다.
안녕하세요 W3.CSS 레이아웃입니다.
안녕하세요 W3.CSS 레이아웃입니다.
안녕하세요 W3.CSS 레이아웃입니다.
안녕하세요 W3.CSS 레이아웃입니다.
예시
<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과 함께 사용하면 작은 화면/휴대폰에서는 세로로 레이아웃 열을 표시하고 중간/대형 화면에서는 가로로 레이아웃 열을 표시합니다.
중형 및 대형 화면:
안녕하세요 W3.CSS 레이아웃입니다.
안녕하세요 W3.CSS 레이아웃입니다.
안녕하세요 W3.CSS 레이아웃입니다.
작은 화면에서:
안녕하세요 W3.CSS 레이아웃입니다.
안녕하세요 W3.CSS 레이아웃입니다.
안녕하세요 W3.CSS 레이아웃입니다.
예시
<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-cell-중간
- w3-cell-바닥
안녕하세요 W3.CSS 레이아웃입니다.
안녕하세요 W3.CSS 레이아웃입니다.
안녕하세요 W3.CSS 레이아웃입니다.
안녕하세요 W3.CSS 레이아웃입니다.
안녕하세요 W3.CSS 레이아웃입니다.
안녕하세요 W3.CSS 레이아웃입니다.
예시
<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 클래스 는 페이지 너비에 맞게 요소를 늘립니다.
안녕하세요 W3.CSS 레이아웃입니다.
안녕하세요 W3.CSS 레이아웃입니다.
안녕하세요 W3.CSS 레이아웃입니다.
안녕하세요 W3.CSS 레이아웃입니다.
안녕하세요 W3.CSS 레이아웃입니다.
안녕하세요 W3.CSS 레이아웃입니다.
예시
<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>
더 이상 사용되지 않는 W3.CSS 테이블 레이아웃 클래스
| w3 레이아웃 컨테이너 | 대신 w3-cell-row를 사용하십시오. |
| w3 레이아웃 행 | |
| w3 레이아웃 셀 | 대신 w3-cell을 사용하십시오. |
| w3 레이아웃 상단 | 대신 w3-cell-top을 사용하십시오. |
| w3 레이아웃 중간 | 대신 w3-cell-middle을 사용하십시오. |
| w3-레이아웃-하단 | 대신 w3-cell-bottom을 사용하십시오. |
| w3 레이아웃 열 | 대신 w3-mobile을 사용하십시오. |
사용되지 않는 클래스는 버전 4.0의 W3.CSS에서 제거됩니다.