w3.css
반응형
W3.CSS에는 레이아웃을 처리하기 위한 반응형 모바일 우선 그리드 시스템이 포함되어 있다.
1/2
1/2
1/3
1/3
1/3
1/3
2/3
1/4
1/4
1/4
1/4
1/2
1/4
1/4
2/3
1/3
3/4
1/4
1/4
1/4
1/2
1/4
1/2
1/4
50px
나머지
1/4
나머지
100px
45px
나머지
W3.CSS 반응형 클래스
W3.CSS의 그리드 시스템은 반응성이 뛰어나며 화면 크기에 따라 열이 자동으로 다시 정렬된다.
| Class | Description |
|---|---|
| w3-half | 창의 1/2 점유(중형 및 대형 화면) |
| w3-third | 창의 1/3 점유(중대형 화면) |
| w3-twothird | 창의 2/3 점유(중형 및 대형 화면) |
| w3-quarter | 창의 1/4 점유(중형 및 대형 화면) |
| w3-threequarter | 창의 3/4 점유(중형 및 대형 화면) |
| w3-rest | 열 너비의 나머지 부분을 차지합니다. |
| w3-col | 12열 반응형 그리드에서 하나의 열을 정의합니다. |
| w3-mobile | 셀(열)에 모바일 우선 응답성을 추가합니다. 모바일 장치에서 요소를 블록 요소로 표시합니다. |
위의 반응형 클래스는 완전히 반응하려면 w3-row 클래스(또는 w3-row-padding 클래스) 내에 배치되어야 한다.
| Class | Description |
|---|---|
| w3-row | 패딩이 없는 반응형 클래스용 컨테이너 |
| w3-row-padding | 8px 왼쪽 및 오른쪽 패딩이 있는 반응형 클래스용 컨테이너 |
| w3-content | 고정 크기 중심 콘텐츠용 컨테이너 |
| w3-hide-small | 작은 화면(601px 미만)에서 콘텐츠를 숨깁니다. |
| w3-hide-medium | 중간 화면에서 콘텐츠를 숨깁니다. |
| w3-hide-large | 대형 화면(992px 이상)에서 콘텐츠를 숨깁니다. |
| l1 – l12 | 대형 화면에 반응하는 크기 |
| m1 – m12 | 중간 화면에 대한 반응형 크기 |
| s1 – s12 | 작은 화면에 반응하는 크기 |
w3-half 클래스
w3-half 클래스 의 너비는 상위 요소(style=”width:50%”)의 1/2이다.
601픽셀보다 작은 화면에서는 크기가 100%로 조정된다.
예제
<div class="w3-row">
<div class="w3-half w3-container w3-green">
<h2>w3-half</h2>
</div>
<div class="w3-half w3-container">
<h2>w3-half</h2>
</div>
</div>
w3-third 클래스
w3-third 클래스 의 너비는 상위 요소(style=”width:33.33%”)의 1/3이다.
601픽셀보다 작은 화면에서는 크기가 100%로 조정된다.
예제
<div class="w3-row">
<div class="w3-third w3-container w3-green">
<h2>w3-third</h2>
</div>
<div class="w3-third w3-container">
<h2>w3-third</h2>
</div>
<div class="w3-third w3-container">
<h2>w3-third</h2>
</div>
</div>
w3-twothird 클래스
w3-twothird 클래스 의 너비는 상위 요소(style=”width:66.66%”)의 2/3이다.
601픽셀보다 작은 화면에서는 크기가 100%로 조정된다.
예제
<div class="w3-row">
<div class="w3-green w3-container w3-twothird">
<h2>w3-twothird</h2>
</div>
<div class="w3-container w3-third">
<h2>w3-third</h2>
</div>
</div>
w3-quarter 클래스
w3-quarter 클래스 의 너비는 상위 요소(style=”width:25%”)의 1/4이다.
601픽셀보다 작은 화면에서는 크기가 100%로 조정된다.
예제
<div class="w3-row">
<div class="w3-green w3-container w3-quarter">
<h2>w3-quarter</h2>
</div>
<div class="w3-container w3-quarter">
<h2>w3-quarter</h2>
</div>
<div class="w3-container w3-quarter">
<h2>w3-quarter</h2>
</div>
<div class="w3-container w3-quarter">
<h2>w3-quarter</h2>
</div>
</div>
w3-3quarter 클래스
w3-3quarter 클래스 의 너비는 상위 요소(style=”width:75%”)의 3/4이다.
601픽셀보다 작은 화면에서는 크기가 100%로 조정된다.
예제
<div class="w3-row">
<div class="w3-green w3-container w3-threequarter">
<h2>w3-threequarter</h2>
</div>
<div class="w3-container w3-quarter">
<h2>w3-quarter</h2>
</div>
</div>
조합
예제
<div class="w3-row">
<div class="w3-half w3-container">
<h2>w3-half</h2>
<div class="w3-row">
<div class="w3-half w3-container w3-red">
<h2>w3-half</h2>
<p>This is a paragraph.</p>
</div>
<div class="w3-half w3-container">
<h2>w3-half</h2>
<p>This is a paragraph.</p>
</div>
</div>
</div>
<div class="w3-half w3-container">
<h2>w3-half</h2>
<div class="w3-row">
<div class="w3-half w3-container w3-red">
<h2>w3-half</h2>
<p>This is a paragraph.</p>
</div>
<div class="w3-half w3-container">
<h2>w3-half</h2>
<p>This is a paragraph.</p>
</div>
</div>
</div>
</div>
나머지를 사용하는 열
w3-col 클래스는 12열 반응형 그리드에서 하나의 열을 정의한다.
w3-rest 클래스는 너비의 나머지 부분을 차지한다.
150px
나머지
예제
<div class="w3-row"> <div class="w3-col" style="width:150px"><p>I am 150px</p></div> <div class="w3-rest w3-green"><p>I am the rest</p></div> </div>
백분율을 사용하는 열
CSS 너비 속성을 사용하여 너비를 백분율로 설정할 수도 있다.
20%
60%
20%
예제
<div class="w3-row"> <div class="w3-col" style="width:20%"><p>20%</p></div> <div class="w3-col" style="width:60%"><p>60%</p></div> <div class="w3-col" style="width:20%"><p>20%</p></div> </div>
w3-content 클래스
w3-content 클래스는 고정 크기 중심 콘텐츠에 대한 컨테이너를 정의한다.
기본 너비(980px)를 재정의하려면 CSS max-width 속성을 사용하자.
예제
<body class="w3-content" style="max-width:500px"> page content... </body>
w3-row vs w3-row-padding
w3-row 클래스는 패딩이 없는 컨테이너를 정의하는 반면, w3-row-padding 클래스는 각 열에 8px 왼쪽 및 오른쪽 패딩을 추가한다.
w3-row:
w3-row-padding:
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-stretch 클래스는 요소에서 오른쪽 및 왼쪽 여백을 제거한다.
이 클래스는 패딩된 행을 늘리는 데 자주 사용된다.
w3-stretch의 예:
w3-stretch가 없는 예:
예제
<div class="w3-row-padding w3-section w3-stretch">
<div class="w3-col s4">
<img src="img_nature_wide.jpg">
</div>
<div class="w3-col s4">
<img src="img_snow_wide.jpg">
</div>
<div class="w3-col s4">
<img src="img_mountains_wide.jpg">
</div>
</div>
반응형 표시/숨기기
w3-hide-small, w3-hide-medium 및 w3-hide-large 클래스는 특정 화면 크기에서 요소를 숨긴다.
⭐ 작동 방식을 이해하려면 브라우저 창 크기를 조정하자.
예제
<div class="w3-container w3-hide-small w3-red"> <p>w3-hide-small will be hidden on small screens (phones)</p> </div> <div class="w3-container w3-hide-medium w3-green"> <p>w3-hide-medium will be hidden on medium screens (tablets)</p> </div> <div class="w3-container w3-hide-large w3-blue"> <p>w3-hide-large will be hidden on large screens (laptops/desktop)</p> </div>
w3-mobile 클래스
w3-mobile 클래스는 모든 요소에 모바일 우선 응답성을 추가한다.
너비가 600px 미만인 화면의 요소에 display:block 및 width:100%를 추가한다.
예제
<a class="w3-button w3-mobile" href="#">Link</a>
화면 해상도
W3.CSS의 기본 응답 기능은 화면의 DP 크기를 사용한다.
W3.CSS는 750 x 1334 픽셀 해상도의 iPhone 6를 375 x 667 픽셀 DP의 작은 화면으로 처리한다.
소형 화면은 601픽셀 DP 미만이고, 중형 화면은 993픽셀 DP 미만이다.
다음은 일반적인 장치 해상도 및 보고된 DP 크기 목록이다.
해상도
640×960
DP
320×480
해상도
640×1136
DP
320×528
해상도
750×1334
DP
375×667
해상도
1080×1920
DP
414×736
해상도
1440×2560
DP
360×640
해상도
1440×2560
DP400x853
_
해상도
1440×2560
DP
411×731
해상도
768×1024
DP
768×1024
해상도
1536×2048
DP
768×1024
해상도
1366×768
DP
1366×768
해상도
1920×1080
DP
1920×1080
12열 반응형 유동 격자
W3.CSS는 또한 고급 12열 반응형 유동 격자를 지원한다.
효과를 보려면 페이지 크기를 조정하자.
이 부분은 작은 화면에서는 12열, 중간 화면에서는 4열, 큰 화면에서는 3열을 차지한다.
이 부분은 작은 화면에서는 12열, 중간 화면에서는 8열, 큰 화면에서는 9열을 차지한다.