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
50픽셀
쉬다
1/4
쉬다
100픽셀
45픽셀
쉬다
W3.CSS 반응형 클래스
W3.CSS의 그리드 시스템은 반응형이며 열은 화면 크기에 따라 자동으로 다시 정렬됩니다.
| 등급 | 설명 |
|---|---|
| w3-반 | 창의 1/2 차지(중형 및 대형 화면) |
| w3-3 | 창의 1/3을 차지합니다(중형 및 대형 화면) |
| w3-2/3 | 창의 2/3 차지(중형 및 대형 화면) |
| w3분기 | 창의 1/4 차지(중형 및 대형 화면) |
| w3-3/4 | 창의 3/4 차지(중형 및 대형 화면) |
| w3-휴식 | 나머지 열 너비를 차지합니다. |
| w3-col | 12열 반응형 그리드에서 하나의 열을 정의합니다. |
| w3-모바일 | 셀(열)에 모바일 우선 응답성을 추가합니다. 모바일 장치에서 요소를 블록 요소로 표시합니다. |
위의 반응형 클래스는 완전히 반응형이 되려면 w3-row 클래스(또는 w3-row-padding 클래스) 내에 배치되어야 합니다 .
| 등급 | 설명 |
|---|---|
| w3 행 | 패딩이 없는 반응형 클래스용 컨테이너 |
| w3 행 패딩 | 8px 왼쪽 및 오른쪽 패딩이 있는 반응형 클래스용 컨테이너 |
| w3 콘텐츠 | 고정 크기 중심 콘텐츠용 컨테이너 |
| w3-hide-small | 작은 화면에서 콘텐츠를 숨깁니다(601px 미만). |
| w3-hide-medium | 중간 화면에서 콘텐츠를 숨깁니다. |
| w3-hide-large | 큰 화면에서 콘텐츠를 숨깁니다(992px 이상). |
| l1 - l12 | 대형 화면에 대한 반응형 크기 |
| m1 - m12 | 중간 화면의 반응형 크기 |
| 초1 - 초12 | 작은 화면을 위한 반응형 크기 |
w3-half 클래스
w3-half 클래스 의 너비는 부모 요소(style="width:50%")의 1/2입니다.
601픽셀보다 작은 화면에서는 100%로 크기가 조정됩니다.
w3-반
w3-반
예시
<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-서드 클래스
w3-3번째 클래스 의 너비는 부모 요소의 1/3입니다(style="width:33.33%").
601픽셀보다 작은 화면에서는 100%로 크기가 조정됩니다.
w3-3
w3-3
w3-3
예시
<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 클래스 의 너비는 상위 요소의 2/3입니다(style="width:66.66%").
601픽셀보다 작은 화면에서는 100%로 크기가 조정됩니다.
w3-2/3
w3-3
예시
<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-쿼터 클래스
w3-quarter 클래스 의 너비는 부모 요소(style="width:25%")의 1/4입니다.
601픽셀보다 작은 화면에서는 100%로 크기가 조정됩니다.
w3분기
w3분기
w3분기
w3분기
예시
<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-3/4 클래스
w3-threequarter 클래스 의 너비는 상위 요소의 3/4입니다(style="width:75%").
601픽셀보다 작은 화면에서는 100%로 크기가 조정됩니다.
w3-3/4
w3분기
예시
<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>
조합
w3분기
w3-반
w3분기
w3분기
w3분기
w3-반
w3-반
w3분기
w3분기
중첩된 행
예: w3-half 내부 w3-half
<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 클래스 는 고정 크기 중심 콘텐츠에 대한 컨테이너를 정의합니다. CSS max-width 속성을 사용하여 기본 너비(980px)를 재정의합니다.
예시
<body class="w3-content" style="max-width:500px">
page content...
</body>
w3 행 대 w3 행 패딩
w3-row 클래스는 패딩 이 없는 컨테이너를 정의하는 반면 w3-row-padding 클래스는 각 열에 8px 왼쪽 및 오른쪽 패딩을 추가합니다.
w3 행:
w3-3
w3-3
w3-3
w3 행 패딩:
w3-3
w3-3
w3-3
w3 행:
w3 행 패딩:
예시
<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>
반응형 표시/숨기기
The w3-hide-small, w3-hide-medium, and w3-hide-large classes hide elements on specific screen sizes.
Note: Resize the browser window to understand how it works:
Example
<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>
The w3-mobile Class
The w3-mobile class adds mobile-first responsiveness to any element.
It adds display:block and width:100% to an element on screens that are less than 600px wide.
Example
<a class="w3-button w3-mobile" href="#">Link</a>
Screen Resolutions
The built-in responsiveness of W3.CSS uses the DP size of a screen.
W3.CSS will treat an iPhone 6 with a resolution of 750 x 1334 pixels as a small screen of 375 x 667 pixels DP.
Small screens are less than 601 pixels DP, medium screens are less than 993 pixels DP.
Below is a list of typical device resolutions and reported DP sizes:
Iphone 4
Resolution
640 x 960
DP
320 x 480
Iphone 5
Resolution
640 x 1136
DP
320 x 528
Iphone 6
Resolution
750 x 1334
DP
375 x 667
Iphone 6s
Resolution
1080 x 1920
DP
414 x 736
Galaxy S6
Resolution
1440 x 2560
DP
360 x 640
Note 4
Resolution
1440 x 2560
DP
400 x 853
Nexus 6
Resolution
1440 x 2560
DP
411 x 731
iPad Mini
Resolution
768 x 1024
DP
768 x 1024
iPad
Resolution
1536 x 2048
DP
768 x 1024
Typical Laptop
Resolution
1366 x 768
DP
1366 x 768
Typical Desktop
Resolution
1920 x 1080
DP
1920 x 1080
12 Column Responsive Fluid Grid
W3.CSS also supports an advanced 12 column responsive fluid grid.
Resize the page to see the effect!
This part will occupy 12 columns on a small screen, 4 on a medium screen, and 3 on a large screen.
This part will occupy 12 columns on a small screen, 8 on a medium screen, and 9 on a large screen.
You will learn a lot more about the fluid grid in a later chapter.