W3.CSS 참조
W3.CSS 클래스
| 등급 |
정의 |
|
| w3-컨테이너 |
16px 왼쪽 및 오른쪽 패딩이 있는 HTML 컨테이너 |
|
| |
헤더로 사용 |
|
| |
바닥글로 사용 |
|
| w3-패널 |
16px 왼쪽 및 오른쪽 패딩과 16px 위쪽 및 아래쪽 여백이 있는 HTML 컨테이너 |
|
| |
메모를 표시하는 데 사용 |
|
| |
견적을 표시하는 데 사용 |
|
| w3 배지 |
원형 배지 |
|
| w3일 |
직사각형 태그 |
|
| w3-ul |
순서 없는 목록 |
|
| w3-디스플레이 컨테이너 |
w3-display- 클래스 용 컨테이너 (컨테이너 내부의 요소 위치 지정 가능) |
|
| w3 블록 |
모든 요소의 전체 너비를 정의하는 데 사용할 수 있는 클래스 |
|
| w3 코드 |
코드 컨테이너 |
|
| w3-codespan |
인라인 코드 컨테이너(코드 조각용) |
|
| w3 콘텐츠 |
고정 크기 중심 콘텐츠용 컨테이너 |
|
| w3 자동차 |
반응형 크기 중심 콘텐츠용 컨테이너 |
|
| w3-스트레치 |
오른쪽 및 왼쪽 여백을 제거하는 클래스(패딩된 행을 늘리는 데 특히 유용함(w3-row-padding)) |
|
| 등급 |
정의 |
|
| w3-테이블 |
HTML 테이블용 컨테이너 |
|
| w3-스트라이프 |
스트라이프 테이블 |
|
| w3-테두리 |
테두리가 있는 테이블 |
|
| w3 경계 |
경계선 |
|
| w3 중심 |
중앙 테이블 |
|
| w3-hoverable |
호버블 테이블 |
|
| w3-table-all |
모든 속성 집합 |
|
| |
w3 줄무늬, w3 테두리 및 w3 테두리 사용 |
|
| |
컬러 헤드로 |
|
| |
w3 반응형으로 |
|
| |
w3-tiny와 함께 |
|
| |
w3-small |
|
| |
w3-large와 함께 |
|
| |
w3-xlarge 포함 |
|
| |
w3-xxlarge 포함 |
|
| |
w3-xxxlarge와 함께 |
|
| |
색상으로 |
|
| |
w3 점보 포함 |
|
| w3 반응형 |
반응형 테이블 생성 |
|
| 등급 |
정의 |
|
| w3 카드 |
w3-card-2와 동일 |
|
| w3-카드-2 |
모든 HTML 콘텐츠용 컨테이너(2px 테두리 그림자) |
|
| w3-카드-4 |
모든 HTML 콘텐츠에 대한 컨테이너(4px 테두리가 있는 그림자) |
|
| 등급 |
정의 |
|
| w3 행 |
유동 반응형 콘텐츠의 한 행에 대한 컨테이너 |
|
| w3 행 패딩 |
모든 열에 기본 패딩이 있는 행 |
|
| w3 자동차 |
반응형 크기 중심 콘텐츠용 컨테이너 |
|
| w3-스트레치 |
좌우 여백을 제거하는 클래스 |
|
| w3-반 |
반(1/2) 스크린 컬럼 컨테이너 |
|
| w3-3 |
세 번째(1/3) 화면 열 컨테이너 |
|
| w3-2/3 |
2/3(2/3) 화면 열 컨테이너 |
|
| w3분기 |
쿼터(1/4) 스크린 컬럼 컨테이너 |
|
| w3-3/4 |
3/4(3/4) 스크린 컬럼 컨테이너 |
|
| w3-col |
모든 HTML 콘텐츠에 대한 열 컨테이너 |
|
| w3-휴식 |
나머지 열 너비를 차지합니다. |
|
| |
|
|
| l1 - l12 |
대형 화면에 대한 반응형 크기 |
|
| m1 - m12 |
중간 화면의 반응형 크기 |
|
| 초1 - 초12 |
작은 화면을 위한 반응형 크기 |
|
| |
|
|
| w3-hide-small |
작은 화면에서 콘텐츠 숨기기(601px 미만) |
|
| w3-hide-medium |
중간 화면에서 콘텐츠 숨기기 |
|
| w3-hide-large |
큰 화면에서 콘텐츠 숨기기(992px 이상) |
|
| |
|
|
| w3 이미지 |
반응형 이미지 |
|
| |
|
|
| w3-모바일 |
모든 요소에 모바일 우선 응답성을 추가합니다.
모바일 장치에서 요소를 블록 요소로 표시합니다. |
|
| 등급 |
정의 |
|
| w3 셀 행 |
레이아웃 열(셀)용 컨테이너입니다. |
|
| w3 세포 |
레이아웃 열(셀). |
|
| w3-cell-top |
열(셀)의 상단에 내용을 맞춥니다. |
|
| w3-cell-중간 |
열(셀)의 세로 중간에 내용을 맞춥니다. |
|
| w3-cell-바닥 |
열(셀)의 맨 아래에 내용을 맞춥니다. |
|
| 등급 |
정의 |
|
| w3-바 |
수평 막대 |
|
| w3-바-블록 |
세로 막대 |
|
| w3-bar-항목 |
바 항목에 대한 공통 스타일 제공 |
|
| w3 사이드바 |
사이드 바 |
|
| |
사이드 바에는 모든 유형의 콘텐츠가 포함될 수 있습니다. |
|
| |
메인 콘텐츠를 오버레이하는 사이드 바 |
|
| |
모든 주요 콘텐츠를 오버레이하는 사이드 바 |
|
| |
메인 콘텐츠를 오른쪽으로 이동시키는 사이드바 |
|
| |
오버레이 배경이 있는 사이드 바 |
|
| |
오른쪽에 있는 사이드 바 |
|
| w3-접기 |
w3-sidebar와 함께 사용하여 완전히 자동으로 반응하는 측면 탐색을 만듭니다. 이 클래스가 작동하려면 페이지 콘텐츠가 "w3-main" 클래스 내에 있어야 합니다. |
|
| w3-메인 |
반응형 측면 탐색을 위해 w3-collapse 클래스를 사용할 때 페이지 콘텐츠에 대한 컨테이너 |
|
| |
완전 자동 오른쪽 반응형 측면 탐색 |
|
| w3 드롭다운 클릭 |
클릭 가능한 드롭다운 요소 |
|
| w3-dropdown-hover |
호버블 드롭다운 요소 |
|
| |
Hoverable 드롭다운 요소(w3-bar에서 사용) |
|
| |
Hoverable 드롭다운 요소(w3-bar-block에서 사용) |
|
| |
Hoverable 드롭다운 요소(w3-sidebar에서 사용) |
|
| 등급 |
정의 |
|
| w3 버튼 |
호버에 회색 배경색이 있는 직사각형 버튼 |
|
| w3-btn |
마우스 오버 시 그림자가 있는 직사각형 버튼 |
|
| w3-원 |
원형 버튼을 만드는 데 사용할 수 있습니다. |
|
| w3 리플 |
잔물결 효과가 있는 직사각형 버튼 |
|
| |
잔물결 효과가 있는 원형 플로팅 버튼 |
|
| w3-바 |
가로 막대에서 버튼과 같은 요소를 그룹화하는 데 사용할 수 있습니다. |
|
| w3 블록 |
전체 너비 w3 버튼을 정의하는 데 사용할 수 있는 클래스 |
|
| |
전체 너비 w3-btn |
|
| |
전체 너비 원형 버튼 |
|
| 등급 |
정의 |
|
| w3 입력 |
입력 요소 |
|
| |
양식을 카드로 입력 |
|
| |
입력 요소(상단 레이블) |
|
| |
입력 요소(하단 레이블) |
|
| w3-체크 |
체크박스 입력 유형 |
|
| w3 라디오 |
라디오 입력 유형 |
|
| w3 선택 |
입력 선택 요소 |
|
| w3 애니메이션 입력 |
입력 너비를 100%로 애니메이션 |
|
| 등급 |
정의 |
|
| w3-모달 |
모달 컨테이너 |
|
| w3-modal-content |
모달 팝업 요소 |
|
| w3-도구 설명 |
툴팁 요소 |
|
| w3-텍스트 |
툴팁 텍스트 |
|
| 등급 |
정의 |
|
| w3-애니메이션-탑 |
상단 -300px에서 0px까지 요소에 애니메이션 효과를 줍니다. |
|
| w3-애니메이션-왼쪽 |
왼쪽 -300px에서 0px로 요소에 애니메이션 효과를 줍니다. |
|
| w3-animate-bottom |
-300px에서 0px까지 요소에 애니메이션 효과를 줍니다. |
|
| w3-animate-right |
오른쪽 -300px에서 0px까지 요소에 애니메이션 효과를 줍니다. |
|
| w3 애니메이션 불투명도 |
요소의 불투명도를 0에서 1로 애니메이션 |
|
| w3 애니메이트 줌 |
크기가 0%에서 100% 사이인 요소에 애니메이션 효과를 줍니다. |
|
| w3-애니메이션 페이딩 |
요소의 불투명도를 0에서 1로, 1에서 0으로 애니메이션을 적용합니다(페이드 인 및 아웃). |
|
| w3-스핀 |
아이콘을 360도 회전 |
|
| |
모든 요소를 360도 회전 |
|
| w3 애니메이션 입력 |
입력 필드의 너비를 100%로 애니메이션 |
|
| 등급 |
정의 |
|
| w3-작은 |
10픽셀의 글꼴 크기를 지정합니다. |
|
| w3-작은 |
12픽셀의 글꼴 크기를 지정합니다. |
|
| w3-대형 |
18픽셀의 글꼴 크기를 지정합니다. |
|
| w3-xlarge |
24픽셀의 글꼴 크기를 지정합니다. |
|
| w3-xxlarge |
32픽셀의 글꼴 크기를 지정합니다. |
|
| w3-xxxlarge |
48픽셀의 글꼴 크기를 지정합니다. |
|
| w3 점보 |
64픽셀의 글꼴 크기를 지정합니다. |
|
| w3-와이드 |
더 넓은 텍스트를 지정합니다. |
|
| w3-세리프 |
글꼴을 serif로 변경 |
|
| w3-sans-serif |
글꼴을 sans-serif로 변경 |
|
| w3 필기체 |
글꼴을 필기체로 변경 |
|
| w3-모노스페이스 |
글꼴을 고정 폭으로 변경 |
|
| 등급 |
정의 |
|
| w3-센터 |
중심 콘텐츠 |
|
| w3-왼쪽 |
요소를 왼쪽으로 띄웁니다(float: left). |
|
| w3-오른쪽 |
요소를 오른쪽으로 띄웁니다(float: right). |
|
| w3-왼쪽 정렬 |
왼쪽 정렬 텍스트 |
|
| w3-오른쪽 정렬 |
오른쪽 정렬 텍스트 |
|
| w3-정당화 |
오른쪽 및 왼쪽 정렬 텍스트 |
|
| w3 블록 |
모든 요소의 전체 너비를 정의하는 데 사용할 수 있는 클래스 |
|
| w3-원 |
서클 콘텐츠 |
|
| w3-숨기기 |
숨겨진 콘텐츠(표시:없음) |
|
| w3-show |
콘텐츠 표시(디스플레이:블록) |
|
| w3-show-block |
w3-show의 별칭(디스플레이:블록) |
|
| w3-show-inline-block |
콘텐츠를 인라인 블록으로 표시(디스플레이:인라인 블록) |
|
| w3-top |
페이지 상단의 고정 콘텐츠 |
|
| w3-바닥 |
페이지 하단의 고정 콘텐츠 |
|
| w3-디스플레이 컨테이너 |
w3-display- 클래스 용 컨테이너 (위치: 상대) |
|
| w3-디스플레이-왼쪽 위 |
w3-display-container의 왼쪽 상단 모서리에 콘텐츠를 표시합니다. |
|
| w3-디스플레이-상단 |
w3-display-container의 오른쪽 상단 모서리에 콘텐츠를 표시합니다. |
|
| w3-디스플레이-하단왼쪽 |
w3-display-container의 왼쪽 하단 모서리에 콘텐츠를 표시합니다. |
|
| w3-디스플레이-하단오른쪽 |
w3-display-container의 오른쪽 하단 모서리에 콘텐츠를 표시합니다. |
|
| w3-디스플레이-왼쪽 |
w3-display-container의 왼쪽(왼쪽 중간)에 내용을 표시합니다. |
|
| w3-디스플레이 오른쪽 |
w3-display-container의 오른쪽(오른쪽 가운데)에 내용을 표시합니다. |
|
| w3-디스플레이-중간 |
w3-display-container의 중간(중앙)에 내용을 표시합니다. |
|
| w3-디스플레이 상단 중간 |
w3-display-container의 상단 중앙에 내용을 표시합니다. |
|
| w3-display-bottommiddle |
w3-display-container의 하단 중앙에 내용을 표시합니다. |
|
| w3-디스플레이 위치 |
w3-display-container의 지정된 위치에 콘텐츠를 표시합니다. |
|
| w3-디스플레이-호버 |
w3-display-container 내에서 마우스를 가져갈 때 콘텐츠를 표시합니다. |
|
| 등급 |
정의 |
|
| w3-불투명도 |
요소에 불투명도/투명도 추가(불투명도: 0.6) |
|
| |
텍스트에 불투명도/투명도 추가 |
|
| w3-불투명도-꺼짐 |
불투명도/투명도를 끕니다(불투명도: 1). |
|
| w3-불투명도-최소 |
요소에 불투명도/투명도 추가(불투명도: 0.75) |
|
| w3-불투명도-최대 |
요소에 불투명도/투명도 추가(불투명도: 0.25) |
|
| w3-grayscale-min |
요소에 회색조 효과를 추가합니다(회색조: 50%). |
|
| w3-그레이스케일 |
요소에 회색조 효과 추가(회색조: 75%) |
|
| w3-grayscale-max |
요소에 회색조 효과를 추가합니다(회색조: 100%). |
|
| w3-세피아-민 |
요소에 세피아 효과 추가(세피아: 50%) |
|
| w3-세피아 |
요소에 세피아 효과 추가(세피아: 75%) |
|
| w3-세피아-맥스 |
요소에 세피아 효과 추가(세피아: 100%) |
|
| 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-hover-white |
호버 색상 흰색 |
|
| w3-hover-black |
호버 색상 블랙 |
|
| w3-hover-red |
호버 색상 빨간색 |
|
| w3-hover-blue |
호버 색상 파란색 |
|
| w3-hover-green |
호버 색상 녹색 |
|
| w3-hover-aqua |
호버 컬러 아쿠아 |
|
| w3-호버-오렌지 |
호버 색상 주황색 |
|
| w3-hover-grey |
호버 색상 회색 |
|
| w3-hover-옅은 녹색 |
호버 색상 옅은 녹색 |
|
| 등급 |
정의 |
|
| w3-텍스트-빨간색 |
텍스트 색상 빨간색 |
|
| w3-텍스트-녹색 |
텍스트 색상 녹색 |
|
| w3-텍스트-파란색 |
텍스트 색상 파란색 |
|
| w3-텍스트-노란색 |
텍스트 색상 노란색 |
|
| w3-text-light-grey |
Text color light-grey |
|
| w3-text-grey |
Text color grey |
|
| w3-text-dark-grey |
Text color dark grey |
|
| w3-text-black |
Text color black |
|
| w3-text-white |
Text color white |
|
| w3-text-pink |
Text color pink |
|
| w3-text-purple |
Text color purple |
|
| w3-text-teal |
Text color teal |
|
| w3-text-light-green |
Text color light green |
|
| w3-text-lime |
Text color lime |
|
| w3-text-deep-purple |
Text color deep purple |
|
| w3-text-indigo |
Text color indigo |
|
| w3-text-light-blue |
Text color light blue |
|
| w3-text-blue-grey |
Text color blue grey |
|
| w3-text-cyan |
Text color cyan |
|
| w3-text-aqua |
Text color aqua |
|
| w3-text-amber |
Text color amber |
|
| w3-text-orange |
Text color orange |
|
| w3-text-deep-orange |
Text color deep orange |
|
| w3-text-sand |
Text color sand |
|
| w3-text-khaki |
Text color khaki |
|
| w3-text-brown |
Text color brown |
|
The text classes above can also be used as hover classes:
| Class |
Defines |
|
| w3-hover-text-red |
Hover text color red |
|
| w3-hover-text-green |
Hover text color green |
|
| w3-hover-text-blue |
Hover text color blue |
|
| w3-hover-text-yellow |
Hover text color yellow |
|
| Class |
Defines |
|
| w3-hover-border-color |
Hover border color |
|
| w3-hover-opacity |
Adds transparency to an element on hover (opacity: 0.6) |
|
| w3-hover-opacity-off |
Removes transparency from an element on hover (100% opacity) |
|
| w3-hover-shadow |
Adds shadow to an element on hover |
|
| w3-hover-grayscale |
Adds a black and white (100% grayscale) effect to an element |
|
| w3-hover-sepia |
Adds a sepia effect to an element on hover |
|
| w3-hover-none |
Removes hover effects from an element |
|
| Class |
Defines |
|
| w3-round |
Element rounded (border-radius) 4px |
|
| w3-round-small |
Element rounded (border-radius) 2px |
|
| w3-round-medium |
Element rounded (border-radius) 4px |
|
| w3-round-large |
Element rounded (border-radius) 8px |
|
| w3-round-xlarge |
Element rounded (border-radius) 16px |
|
| w3-round-xxlarge |
Element rounded (border-radius) 32px |
|
| Class |
Defines |
|
| w3-padding-small |
Padding 4px top and bottom, and 8px left and right. |
|
| w3-padding |
Padding 8px top and bottom, and 16px left and right. |
|
| w3-padding-large |
Padding 12px top and bottom, and 24px left and right. |
|
| w3-padding-16 |
Padding 16px top and bottom |
|
| w3-padding-24 |
Padding 24px top and bottom |
|
| w3-padding-32 |
Padding 32px top and bottom |
|
| w3-padding-48 |
Padding 48px top and bottom |
|
| w3-padding-64 |
Padding 64px top and bottom |
|
| w3-padding-top-64 |
Padding 64px on top |
|
| w3-padding-top-48 |
Padding 48px on top |
|
| w3-padding-top-32 |
Padding 32px on top |
|
| w3-padding-top-24 |
Padding 24px on top |
|
| Class |
Defines |
|
| w3-margin |
Adds an 16px margin to an element |
|
| w3-margin-top |
Adds an 16px top margin to an element |
|
| w3-margin-right |
Adds an 16px right margin to an element |
|
| w3-margin-bottom |
Adds an 16px bottom margin to an element |
|
| w3-margin-left |
Adds an 16px left margin to an element |
|
| w3-section |
Adds an 16px top and bottom margin to an element |
|
| Class |
Defines |
|
| w3-border |
Borders (top, right, bottom, left) |
|
| w3-border-top |
Border top |
|
| w3-border-right |
Border right |
|
| w3-border-bottom |
Border bottom |
|
| w3-border-left |
Border left |
|
| w3-border-0 |
Removes all borders |
|
| w3-border-color |
Displays any defined borders in a specified color (like red, etc) |
|
| w3-bottombar |
Adds a thick bottom border (bar) to an element |
|
| w3-leftbar |
Adds a thick left border (bar) to an element |
|
| w3-rightbar |
Adds a thick right border (bar) to an element |
|
| w3-topbar |
Adds a thick top border (bar) to an element |
|
| w3-hover-border-color |
Hoverable border color |
|
