컨테이너 클래스
| 수업 | 정의 | |
|---|
| W3 컨테이너 | HTML 콘텐츠 컨테이너 (16px 패딩 좌우 추가) | 시도 해봐 |
| 색상 클래스와 함께 사용 | 시도 해봐 |
| 헤더로 사용 | 시도 해봐 |
| 바닥 글로 사용 | 시도 해봐 |
| W3-leftbar와 함께 사용 | 시도 해봐 |
| W3-bottombar와 함께 사용 | 시도 해봐 |
| W3 섹션 | HTML 콘텐츠 컨테이너 (16px 여백 상단과 하단을 추가) | 시도 해봐 |
| W3-배지 | 원형 배지 (8) | 시도 해봐 |
| W3 태그 | 사각형 태그 더 나중에! | 시도 해봐 |
| W3-UL | 정렬되지 않은 목록 | 시도 해봐 |
| W3 디스플레이 컨테이너 | W3 - 디스플레이 - 클래스 컨테이너 (왼쪽 위, 오른쪽 위, 왼쪽 아래 또는 오른쪽 하단, 또는 용기의 중간에 요소를 배치) | 시도 해봐 |
| W3 이미지 | 추천되고 있지 않습니다. 대신 W3 디스플레이 컨테이너를 사용합니다. | 시도 해봐 |
| W3-인용구 | (대신 사용 W3-leftbar) 2.0에서 제거 | 시도 해봐 |
| W3 코드 | 코드 용기 | 시도 해봐 |
| W3 진행 컨테이너 | 진행 표시 줄 용기 | 시도 해봐 |
표 클래스
카드 클래스
| 수업 | 정의 | |
|---|
| W3 카드 | (테두리) 모든 HTML 콘텐츠에 대한 컨테이너 | 시도 해봐 |
| W3 카드-2 | 모든 HTML 콘텐츠 컨테이너 (2 픽셀의 보더 그림자) | 시도 해봐 |
| W3 카드-4 | 모든 HTML 콘텐츠 컨테이너 (4 픽셀 보더 그림자) | 시도 해봐 |
| W3 카드-8 | 모든 HTML 콘텐츠 컨테이너 (8px 보더 그림자) | 시도 해봐 |
| W3 카드-12 | 모든 HTML 콘텐츠 컨테이너 (12 픽셀 경계 그림자) | 시도 해봐 |
| W3 카드-16 | 모든 HTML 콘텐츠 컨테이너 (16px 경계 그림자) | 시도 해봐 |
| W3 카드-24 | 모든 HTML 콘텐츠 컨테이너 (24 픽셀 경계 그림자) | 시도 해봐 |
응답 클래스
| 수업 | 정의 | |
|---|
| W3 행 | 유체 응답 내용의 한 행에 대한 컨테이너 | 시도 해봐 |
| W3 행 패딩 | 모든 열은 기본 패딩이 행 | 시도 해봐 |
| W3 콘텐츠 | 고정 된 크기를 중심으로 콘텐츠에 대한 컨테이너 | 시도 해봐 |
| | |
|
| W3 반 | 반 (1/2) 화면 열 컨테이너 | 시도 해봐 |
| W3 - 세번째 | 1/3 스크린 열의 컨테이너 | 시도 해봐 |
| W3-twothird | 두 번째 (2/3) 화면 열 컨테이너 | 시도 해봐 |
| W3 분기 | 쿼터 (1/4) 화면 열 컨테이너 | 시도 해봐 |
| W3-threequarter | 세 분기 (3/4) 화면 열 컨테이너 | 시도 해봐 |
| W3-COL | 모든 HTML 콘텐츠에 대한 열 컨테이너 | 시도 해봐 |
| | |
| L1 - L12 | 대형 화면에 대한 응답 크기 | 시도 해봐 |
| M1 - M12 | 중간 화면에 대한 응답 크기 | 시도 해봐 |
| S1 - S12 | 작은 화면에 대한 응답 크기 | 시도 해봐 |
| | |
|
| W3 숨기기 - 작은 | 작은 화면에 숨기기 콘텐츠 (이하 601px) | 시도 해봐 |
| W3 숨기기 매체 | 매체 화면의 콘텐츠를 숨기기 | 시도 해봐 |
| W3 숨기기 대형 | 대형 스크린에 숨기기 콘텐츠 (보다 큰 992px) | 시도 해봐 |
탐색 클래스
| 수업 | 정의 | |
|---|
| W3 - 네비게이션 바 | 탐색 모음 | 시도 해봐 |
| 접을 수있는 탐색 모음 | 시도 해봐 |
| W3-topnav | 위쪽 탐색 모음 | 시도 해봐 |
| W3-sidenav | 측면 탐색 모음 | 시도 해봐 |
| 주요 내용을 오버레이 측면 탐색 모음 | 시도 해봐 |
| 모든 주요 내용을 오버레이 측면 탐색 모음 | 시도 해봐 |
| 오른쪽으로 주 콘텐츠를 이동 측면 탐색 모음 | 시도 해봐 |
| 오버레이 배경 측면 탐색 모음 | 시도 해봐 |
| W3 붕괴 | 완전 자동 응답 측면 탐색 | 시도 해봐 |
| W3-dropnav | 드롭 다운 네비게이션 | 시도 해봐 |
| W3 - 드롭 다운 클릭 | 클릭 가능한 드롭 다운 요소 | 시도 해봐 |
| W3 - 드롭 다운 - 호버 | Hoverable 드롭 다운 요소 | 시도 해봐 |
| (W3-네비게이션 바에서 사용) Hoverable 드롭 다운 요소 | 시도 해봐 |
| (W3-sidenav에 사용) Hoverable 드롭 다운 요소 | 시도 해봐 |
| (W3-topnav에 사용) Hoverable 드롭 다운 요소 | 시도 해봐 |
| W3-아코디언 | 숨기기 및 접을 수있는 콘텐츠를 표시 | 시도 해봐 |
| W3-sidenav에 사용되는 클릭 가능한 아코디언과 드롭 다운 | 시도 해봐 |
| W3-매김 | 페이지 매김 링크 | 시도 해봐 |
버튼 클래스
| 수업 | 정의 | |
|---|
| W3-btn을 | 사각형 HTML 버튼 | 시도 해봐 |
| 파급 효과와 사각형 HTML 버튼 | 시도 해봐 |
| W3-btn을 부동 | 원형 부동 버튼 | 시도 해봐 |
| 파급 효과와 원형 부동 버튼 | 시도 해봐 |
| W3-btn을 그룹 | 그룹화 된 버튼 | 시도 해봐 |
| W3-btn을 블록 | 반자 버튼 (100 %) | 시도 해봐 |
입력 클래스
| 수업 | 정의 | |
|---|
| W3 형태 | W3 패딩과 동일 | 시도 해봐 |
| 카드로 입력 폼 | 시도 해봐 |
| W3 입력 | 입력 요소 | 시도 해봐 |
| 입력 요소 (상단 라벨) | 시도 해봐 |
| 입력 요소 (하단 라벨) | 시도 해봐 |
| W3 그룹 | HTML 엘리먼트 그룹 | 시도 해봐 |
| W3 라벨 | 입력 레이블 | 시도 해봐 |
| W3-유효성 검사 | 입력 (변경 색상을 때 유효하지 않은 입력)의 유효성을 검사합니다 | 시도 해봐 |
| W3 검사 | 체크 박스의 입력 타입 | 시도 해봐 |
| W3 라디오 | 무선 입력 타입 | 시도 해봐 |
| W3-선택 | 입력 선택 요소 | 시도 해봐 |
| W3-애니메이션 입력 | 100 %에 대한 입력의 폭을 애니메이션화 | 시도 해봐 |
모달 클래스
애니메이션 클래스
| 수업 | 정의 | |
|---|
| W3 - 애니메이션 - 가기 | 0 픽셀 상단 -300px에서 요소를 애니메이션 | 시도 해봐 |
| W3 - 애니메이션 - 왼쪽 | 왼쪽 -300px에서 요소는 0 픽셀하는 애니메이션 | 시도 해봐 |
| W3-애니메이션 바닥 | 0 픽셀 하단 -300px에서 요소를 애니메이션 | 시도 해봐 |
| W3-애니메이션 오른쪽 | 오른쪽 -300px에서 요소는 0 픽셀하는 애니메이션 | 시도 해봐 |
| W3 - 애니메이션 - 불투명 | 0에서 1 요소의 불투명도를 애니메이트 | 시도 해봐 |
| W3 - 애니메이션 - 줌 | 0 크기의 100 %에 요소를 애니메이션 | 시도 해봐 |
| W3 - 애니메이션 - 페이딩 | (아웃 및 페이드) 0 0 1로 1에서 요소의 불투명도를 애니메이션 | 시도 해봐 |
| W3 스핀 | 아이콘을 360도 회전 | 시도 해봐 |
| 모든 요소를 360도 회전 | 시도 해봐 |
| W3-애니메이션 입력 | 100 %의 입력 필드의 폭을 애니메이션화 | 시도 해봐 |
유틸리티 클래스
| 수업 | 정의 | |
|---|
| W3 - 작은 | 10 픽셀의 글꼴 크기를 지정합니다 | 시도 해봐 |
| W3 - 작은 | 12 화소의 폰트 크기를 지정 | 시도 해봐 |
| W3 대형 | 20 픽셀의 글꼴 크기를 지정합니다 | 시도 해봐 |
| W3 - 초대형 | 24 화소의 폰트 크기를 지정 | 시도 해봐 |
| W3-xxlarge | 32 화소의 폰트 크기를 지정 | 시도 해봐 |
| W3-xxxlarge | 48 화소의 폰트 크기를 지정 | 시도 해봐 |
| W3 점보 | 64 픽셀의 폰트 크기를 지정 | 시도 해봐 |
| W3 슬림 | 슬림 텍스트를 지정합니다 | 시도 해봐 |
| W3 전체 | 넓은 텍스트를 지정합니다 | 시도 해봐 |
| W3 수직 | 수직 텍스트를 지정합니다 | 시도 해봐 |
| W3 탑 | 페이지의 상단에 고정 컨텐츠 | 시도 해봐 |
| W3 센터 | 중심 내용 | 시도 해봐 |
| W3-원 | 원 내용 | 시도 해봐 |
| W3 숨기기 | 숨겨진 콘텐츠 (표시 : 없음) | 시도 해봐 |
| W3 쇼 | 표시 내용 (디스플레이 : 블록) | 시도 해봐 |
| W3 쇼 블록 | W3 쇼의 별칭 (디스플레이 : 블록) | 시도 해봐 |
| W3 쇼 - 인라인 블록 | 인라인 블록으로 표시 함량 (디스플레이 : 인라인 블록) | 시도 해봐 |
| W3 숨기기 - 작은 | 작은 화면에 숨기기 콘텐츠 (이하 601px) | 시도 해봐 |
| W3 숨기기 매체 | 매체 화면의 콘텐츠를 숨기기 | 시도 해봐 |
| W3 숨기기 대형 | 대형 스크린에 숨기기 콘텐츠 (보다 큰 992px) | 시도 해봐 |
| W3에서 왼쪽으로 | 왼쪽 조정 내용 | 시도 해봐 |
| W3 오른쪽 | 오른쪽 조정 내용 | 시도 해봐 |
| W3-왼쪽 정렬 | 왼쪽 정렬 텍스트 | 시도 해봐 |
| W3에서 오른쪽 정렬 | 오른쪽 맞춤 텍스트 | 시도 해봐 |
| W3-정당화 | 오른쪽과 왼쪽 정렬 텍스트 | 시도 해봐 |
| W3 디스플레이 컨테이너 | W3 - 디스플레이 - 클래스 컨테이너 (위치 : 상대) | 시도 해봐 |
| W3-디스플레이 좌상 | 왼쪽 상단에 위치 내용 | 시도 해봐 |
| W3 디스플레이-topright | 오른쪽 상단 모서리에 위치 내용 | 시도 해봐 |
| W3 디스플레이 - bottomleft | 왼쪽 하단에 위치 내용 | 시도 해봐 |
| W3 디스플레이 - bottomright | 오른쪽 하단 모서리에 위치 내용 | 시도 해봐 |
| W3 디스플레이 - 중간 | 중간에 위치 함량 (수평 및 수직) | 시도 해봐 |
| W3 디스플레이 - topmiddle | 요소의 상단 중앙에 위치 내용 | 시도 해봐 |
| W3 디스플레이 - bottommiddle | 요소의 하단의 중간에 위치 내용 | 시도 해봐 |
| W3-리프 | 셰리프 글꼴을 변경합니다 | 시도 해봐 |
| W3-불투명 | 텍스트에 투명도를 추가합니다 | 시도 해봐 |
| 모든 요소에 투명도를 추가합니다 | 시도 해봐 |
| W3 오버레이 | 오버레이 효과를 만듭니다 | 시도 해봐 |
| W3 텍스트 그림자 | 텍스트에 그림자를 추가합니다 | 시도 해봐 |
색상 클래스
| 수업 | 정의 | |
|---|
| W3 레드 | 배경 색상 빨간색 | 시도 해봐 |
| W3 핑크 | 배경 색상 핑크 | 시도 해봐 |
| W3 자주색 | 배경 색상 보라색에게 | 시도 해봐 |
| W3-깊은 보라색 | 배경 색상 보라색 깊은에게 | 시도 해봐 |
| W3 - 인디고 | 배경 색상 인디고 | 시도 해봐 |
| W3 블루 | 배경 색상 블루 | 시도 해봐 |
| W3-밝은 파란색 | 배경 색상 라이트 블루 | 시도 해봐 |
| W3 - 시안 | 배경 색상 시안 | 시도 해봐 |
| W3 - 아쿠아 | 배경 색상의 아쿠아 | 시도 해봐 |
| W3-청록색 | 배경 색상 청록색 | 시도 해봐 |
| W3 - 녹색 | 배경 색상 녹색 | 시도 해봐 |
| W3 빛 녹색 | 배경 색상 빛 녹색 | 시도 해봐 |
| W3 라임 | 배경 색상 라임 | 시도 해봐 |
| W3 모래 | 배경 색상 모래 | 시도 해봐 |
| W3 - 카키 | 배경 색상 카키 | 시도 해봐 |
| W3 - 노란색 | 배경 색상 노랑 | 시도 해봐 |
| W3 - 황색 | 배경 색상 황색 | 시도 해봐 |
| W3 - 오렌지 | 배경 색상 오렌지 | 시도 해봐 |
| W3-깊은 오렌지 | 배경 색상 깊은 오렌지 | 시도 해봐 |
| W3 - 파랑 - 회색 | 배경 색상 블루 그레이 | 시도 해봐 |
| W3 갈색 | 배경 색상 갈색 | 시도 해봐 |
| W3-밝은 회색 | 배경 색상 라이트 그레이 | 시도 해봐 |
| W3 회색 | 배경 색상 회색 | 시도 해봐 |
| W3 어두운 회색 | 배경 색상 어두운 회색 | 시도 해봐 |
| W3 블랙 | 배경 색상 블랙 | 시도 해봐 |
| W3-옅은 붉은 | 배경 색상 옅은 빨간색 | 시도 해봐 |
| W3 - 담황색 | 배경 색상 담황색 | 시도 해봐 |
| W3-옅은 녹색 | 배경 색상 옅은 녹색 | 시도 해봐 |
| W3-옅은 파란색 | 배경 색상 옅은 파란색 | 시도 해봐 |
| W3 투명 | 투명 배경 색상 | |
호버 클래스
상기 모든 색은 호버 클래스로서 사용할 수있다 :
| 수업 | 정의 | |
|---|
| W3-호버 - 화이트 | 호버 색 흰색 | 시도 해봐 |
| W3-가져가 - 블랙 | 호버 색상 블랙 | 시도 해봐 |
| W3-가져가 - 빨간색 | 호버 붉은 색 | 시도 해봐 |
| W3-호버 블루 | 호버 색상 블루 | 시도 해봐 |
| W3-호버 - 녹색 | 호버 색상 녹색 | 시도 해봐 |
| W3-가져가 - 아쿠아 | 호버 색상의 아쿠아 | 시도 해봐 |
| W3-호버 - 오렌지 | 호버 색상 오렌지 | 시도 해봐 |
| W3-호버 회색 | 호버 색 회색 | 시도 해봐 |
| W3-가져가 - 옅은 녹색 | 호버 색상 옅은 녹색 | 시도 해봐 |
| | |
| W3 - 호버 텍스트 - 빨간색 | 텍스트 색상을 빨간색으로 마우스를 가져 가면 | 시도 해봐 |
| W3 - 호버 텍스트 - 빨간색 | 텍스트 색상 블루를 이동 | 시도 해봐 |
| W3 - 호버 텍스트 - 녹색 | 텍스트 색상 녹색를 이동 | 시도 해봐 |
| W3 - 호버 텍스트 - 보라색 | 호버 텍스트 색상 보라색에게 | 시도 해봐 |
| | |
| W3-가져가 - 테두리 - 색상 | 호버 테두리 색상 | 시도 해봐 |
| | |
| W3-가져가 - 불투명 | 호버의 요소에 투명성을 추가 (60 % 불투명도) | 시도 해봐 |
| W3-호버 그림자 | 호버의 요소에 그림자를 추가합니다 | 시도 해봐 |
| W3-가져가 - 없음 | 요소에서 마우스 오버 효과를 제거합니다 | 시도 해봐 |
라운드 클래스
| 수업 | 정의 | |
|---|
| W3 라운드 | 요소는 반올림 (경계 반경) 4 픽셀 | 시도 해봐 |
| W3 라운드 - 작은 | 요소는 반올림 (경계 반경) 2 픽셀 | 시도 해봐 |
| W3 라운드 중간 | 요소는 반올림 (경계 반경) 4 픽셀 | 시도 해봐 |
| W3 라운드 대형 | 요소는 반올림 (경계 반경) 8px | 시도 해봐 |
| W3-라운드 XLARGE | 요소 반올림 (경계 반경) 16px | 시도 해봐 |
| W3-라운드 xxlarge | 요소 반올림 (경계 반경) 32px | 시도 해봐 |
| W3 라운드 점보 | 요소 반올림 (경계 반경) 64px | 시도 해봐 |
패딩 클래스
| 수업 | 정의 | |
|---|
| W3 패딩-0 | 요소에서 모든 패딩을 제거합니다 | 시도 해봐 |
| W3 패딩 | 패딩 8px의 상단과 하단, 그리고 16px의 왼쪽과 오른쪽. | 시도 해봐 |
| W3 패딩 - 작은 | 패딩 2 픽셀의 상단과 하단, 그리고 4 픽셀 왼쪽과 오른쪽. | 시도 해봐 |
| W3 패딩 - 작은 | 패딩 4 픽셀의 상단과 하단, 그리고 8px 왼쪽과 오른쪽. | 시도 해봐 |
| W3 패딩 매체 | 패딩 8px의 상단과 하단, 그리고 16px의 왼쪽과 오른쪽. | 시도 해봐 |
| W3 패딩 대형 | 패딩 12 픽셀의 상단과 하단, 그리고 24 픽셀의 왼쪽과 오른쪽. | 시도 해봐 |
| W3 패딩 - 초대형 | 패딩 16px의 상단과 하단, 그리고 32px의 왼쪽과 오른쪽. | 시도 해봐 |
| W3 패딩 - xxlarge | 패딩 24 픽셀의 상단과 하단, 그리고 48px의 왼쪽과 오른쪽. | 시도 해봐 |
| W3 패딩 점보 | 패딩 32px의 상단과 하단, 그리고 64px의 왼쪽과 오른쪽. | 시도 해봐 |
| W3 패딩 탑 | 패딩 위로 8px | 시도 해봐 |
| W3 패딩 오른쪽 | 바로 16px 패딩 | 시도 해봐 |
| W3 패딩 바닥 | 패딩 바닥 8px | 시도 해봐 |
| W3 패딩 왼쪽 | 패딩 왼쪽 16px | 시도 해봐 |
| W3 패딩 - 호르-4 | 패딩 4 픽셀의 상단과 하단 | 시도 해봐 |
| W3 패딩 - 호르-8 | 패딩 8px의 상단과 하단 | 시도 해봐 |
| W3 패딩 - 호르-12 | 패딩 12 픽셀의 상단과 하단 | 시도 해봐 |
| W3 패딩 - 호르-16 | 패딩 16px의 상단과 하단 | 시도 해봐 |
| W3 패딩 - 호르-24 | 패딩 24 픽셀의 상단과 하단 | 시도 해봐 |
| W3 패딩 - 호르-32 | 패딩 32px의 상단과 하단 | 시도 해봐 |
| W3 패딩 - 호르-48 | 패딩 48px의 상단과 하단 | 시도 해봐 |
| W3 패딩 - 호르-64 | 패딩 64px의 상단과 하단 | 시도 해봐 |
| W3 패딩 - 호르-128 | 패딩 128px, 세로 상단과 하단 | 시도 해봐 |
| W3 패딩-버전-4 | 패딩 4 픽셀은 왼쪽과 오른쪽. | 시도 해봐 |
| W3 패딩-버전-8 | 패딩 8px 좌우. | 시도 해봐 |
| W3 패딩-버전-16 | 패딩 16px 좌우. | 시도 해봐 |
| W3 패딩-버전-24 | 패딩 24 픽셀 왼쪽과 오른쪽. | 시도 해봐 |
| W3 패딩-버전-32 | 패딩 32px 좌우. | 시도 해봐 |
| W3 패딩-버전-48 | 패딩 48px 좌우. | 시도 해봐 |
| W3 패딩-버전-64 | 패딩 64px 좌우. | 시도 해봐 |
여백 클래스
| 수업 | 정의 | |
|---|
| W3 마진-0 | 요소에서 모든 여백을 제거합니다 | 시도 해봐 |
| W3 마진 | 여백 16px | 시도 해봐 |
| W3 마진 탑 | 여백 위로 16px | 시도 해봐 |
| W3 마진 오른쪽 | 여백 자리 16px | 시도 해봐 |
| W3 마진 바닥 | 여백 바닥 16px | 시도 해봐 |
| W3 마진 왼쪽 | 여백 왼쪽 16px | 시도 해봐 |
국경 클래스
| 수업 | 정의 | |
|---|
| W3 국경 | 테두리 (위, 오른쪽, 아래, 왼쪽) | 시도 해봐 |
| W3 국경 탑 | 테두리 가기 | 시도 해봐 |
| W3 국경 오른쪽 | 국경 바로 | 시도 해봐 |
| W3 국경 바닥 | 국경 바닥 | 시도 해봐 |
| W3 국경에서 왼쪽으로 | 테두리 왼쪽 | 시도 해봐 |
| W3 국경-0 | 모든 테두리를 제거합니다 | 시도 해봐 |
| W3-테두리 - 색상 | (적색 등, 등)에서 지정된 색상에 정의 된 경계를 표시 | 시도 해봐 |
| W3-bottombar | 요소에 두꺼운 아래쪽 테두리 (바) 추가 | 시도 해봐 |
| W3-leftbar | 요소에 두꺼운 왼쪽 테두리 (바) 추가 | 시도 해봐 |
| W3-rightbar | 요소에 두꺼운 오른쪽 테두리 (바) 추가 | 시도 해봐 |
| W3-topbar | 요소에 두꺼운 위쪽 테두리 (바) 추가 | 시도 해봐 |
| W3-가져가 - 테두리 - 색상 | Hoverable 테두리 색상 | 시도 해봐 |