유틸리티 클래스
W3.CSS의 대부분은 패딩, 여백, 크기 및 위치를 제공하는 유틸리티 클래스 주위에 내장되어 있습니다.
패딩 클래스
W3-padding- 크기 클래스는 HTML 요소에 패딩을 추가합니다 :
W3 패딩 점보 클래스는 32px 정상을 추가하고 바닥 64px 좌우.
W3 패딩 - xxlarge 클래스는 24 픽셀 정상을 추가하고 바닥 48px 좌우.
W3 패딩 - 초대형 클래스는 16px 정상을 추가하고 바닥 32px 좌우.
W3 패딩 대형 클래스는 12 픽셀 정상을 추가하고 바닥과 24 픽셀 왼쪽과 오른쪽.
W3 패딩 중간 클래스는 8px 상하 16px 왼쪽과 오른쪽에 추가합니다.
W3 패딩 - 작은 클래스는 4 픽셀 상단과 하단 왼쪽 8px과 오른쪽을 추가합니다.
W3 패딩 - 작은 클래스는 2 픽셀 상단과 하단 왼쪽 4 픽셀과 오른쪽을 추가합니다.
예
<div class="w3-container w3-padding-xlarge">
<p>I have 16px top and bottom padding and 32px left and right padding.</p>
</div>
»그에게 자신을보십시오 W3 패딩 - 수평을 수 클래스는 HTML 요소에 수평 (상단과 하단) 패딩을 추가합니다 :
W3 패딩 - 호르-4 클래스는 4 픽셀 상단과 하단에 패딩을 추가합니다.
W3 패딩 - 호르-8 클래스는 8px 상단과 하단에 패딩을 추가합니다.
W3 패딩 - 호르-16 클래스는 16px 상단과 하단에 패딩을 추가합니다.
W3 패딩 - 호르-32 클래스는 32px 상단과 하단에 패딩을 추가합니다.
W3 패딩 - 호르-64 클래스는 64px 상단과 하단에 패딩을 추가합니다.
예
<div class="w3-container w3-padding-hor-16">
I have 16px top and bottom padding
</div>
»그에게 자신을보십시오 W3 패딩-를 검증하기 수 클래스는 HTML 요소에 수직 (왼쪽 및 오른쪽) 패딩을 추가합니다 :
W3 패딩-버전-4 클래스는 4 픽셀 왼쪽과 오른쪽 패딩을 추가합니다.
W3 패딩-버전-8 클래스는 8px 왼쪽과 오른쪽 패딩을 추가합니다.
W3 패딩은-버전-16 클래스 16 배 왼쪽과 오른쪽 패딩을 추가합니다.
W3 패딩은-버전-32 클래스는 32px 왼쪽과 오른쪽 패딩을 추가합니다.
W3 패딩 - 호르-48 클래스는 64px 왼쪽과 오른쪽 패딩을 추가합니다.
예
<div class="w3-container w3-padding-ver-16">
<p>I have 16px left and right padding</p>
</div>
»그에게 자신을보십시오 여백 클래스
W3 마진 클래스는 요소에 여백을 추가 :
W3 마진 클래스는 요소의 모든 측면에 16px 여백을 추가합니다.
W3 마진 - 하단 클래스는 요소에 16px 아래쪽 여백을 추가합니다.
W3 마진 왼쪽 클래스는 요소에 여백을 왼쪽 16px를 추가합니다.
W3 마진 오른쪽 클래스는 요소에 16px 오른쪽 여백을 추가합니다.
W3 마진 탑 클래스는 요소에 16px 위쪽 여백을 추가합니다.
클래스 크기 조정
w3- 크기 클래스는 요소의 글꼴 크기를 변경합니다 :
나는 작은 (W3-작은 사용)하고있어
나는 작은 (W3-작은 사용)하고있어
나는 매체입니다. 기본.
나는 큰 (W3-큰 사용)하고있어
나는 (W3-초대형를 사용하여) 초대형 해요
예
<p class="w3-small">I'm small (using w3-small)</p>
<p>I'm medium. The default.</p>
<p class="w3-large">I'm
large (using w3-large)</p>
<p class="w3-xlarge">I'm xlarge (using
w3-xlarge)</p> »그에게 자신을보십시오 당신은 장에서 클래스를 크기에 대한 자세한 읽을 수 W3.CSS의 입력 체계를 .
클래스 반올림
W3 - 원형 - 크기 클래스는 요소에 테두리를 둥글게 추가합니다 :
예
<div class="w3-round w3-teal w3-padding">Round</div>
<div class="w3-round-large w3-teal w3-padding">Rounder</div>
<div class="w3-round-xlarge w3-teal w3-padding">Rounder</div>
<div class="w3-round-jumbo w3-teal w3-padding">Roundest</div>
»그에게 자신을보십시오 Circle 클래스
센터 클래스
W3 중심 클래스는 요소 센터 :
예
<div class="w3-container w3-center w3-green">
<img
class="w3-circle"
src="img_car.jpg" alt="Car">
</div> »그에게 자신을보십시오 클래스 부동
W3 왼쪽 클래스는 왼쪽 요소에서, W3 오른쪽 클래스가 오른쪽으로 요소를 수레 수레 :
예
<div class="w3-container w3-light-grey">
<div class="w3-left
w3-red">Float left</div>
<div class="w3-right w3-blue">Float
right</div>
</div> »그에게 자신을보십시오 표시 / 숨기기 클래스
W3 숨기기 - 작은 | 매체 | 큰 클래스는 특정 화면 크기에 요소를 숨 깁니다.
참고 :이 어떻게 작동하는지 이해하기 위해 브라우저 창 크기를 조정합니다 :
예
<p class="w3-hide-small">I will be hidden on small screens (phone)</p>
<p class="w3-hide-medium">I will be hidden on medium screens (tablet)</p>
<p class="w3-hide-large">I will be hidden
on large screens (laptop/desktop)</p> »그에게 자신을보십시오