다음은 w3css 의 클래스에 대한 요약 정리야.
내가 열심히 번역한 건 아니고 아래 분이 정리한 것을 복사해서 여러분에게 알려 주는거야. 아래 님께 감사...
https://blog.naver.com/cbs3455/221709021485

아래 클래스의 기능에 대해 자세한 내용은 W3Schools.com 참조.
https://www.w3schools.com/w3css/w3css_references.asp

▶ 컨테이너 클래스

w3-container	좌우 16픽셀의 페딩을 가진 경계선이 없는 박스
w3-panel	좌우16픽셀의 페딩을 가진고 위아래 16픽셀의 마진값을 가진 경계선 없는 박스
w3-badge	배경색이 검정인 원형
w3-tag	배경색이 검정인 사각형
w3-ul	순서없는 리스트 형식
w3-display-contianer	w3-display-클래스의 컨테이너 안에 요소들을 배치하는용도
w3-block	화면의 한줄 모두를 차지하게끔 하는 클래스
w3-code	코드 컨테이너
w3-codespan	인라인코드 컨테이너
w3-content	중앙정렬 고정크기(980px) 경계선없는 박스
w3-auto	1205픽셀보다 큰 화면은 최대너비를 1140(95%)으로 하는 중앙정렬 그 이하는 100%사용함
w3-search	w3-row-padding과 함께 사용하여 좌우 마진을 제거한 창의 크기를 제공함

▶ 테이블에 사용하는 클래스들

w3-table	테두리가 없는 테이블 기본
w3-striped	얼룩말형태의 색상배열함
w3-border	테이블에 외곽선을 그린다.
w3-bordered	테이블의 각열에 아래쪽 경계선을 그린다.
w3-centered	테이블 안쪽의 th td의 글자를 중앙정렬함
w3-hoverable	테이블 위에 마우스가 올라가면 배경색이 회색으로 변함
w3-table-all	위의 w3-table w3-bordered w3-striped w3-border 각 모두 사용함
w3-responsive	화면의 크기가 작아지면 수평 스크롤바가 나타난다. 반응형웹사이트용

▶ 카드 클래스

w3-card	w3-card-2와 같음
w3-card-2	2픽셀의 경계선 그림자를 가진 박스
w3-card-4	4픽셀의 좀 넓은 경게선 그림자를 가진 박스

▶ 반응형 클래스

w3-row	한줄 전체를 사용함
w3-row-padding	열 안의 요소들이 좌우8픽셀의 패딩값을 가진다.
w3-stretch	각태그들의 좌우 마진값을 제거함..경계가 같음
w3-half	12칸중 6칸을 사용한다 1/2
w3-third	12칸중 4칸을 사용한다.1/3
w3-twothird	12칸중 8칸을 사용한다. 2/3
w3-quarter	12칸중 3칸을 사용한다. 1/4
w3-threequarter	12칸중 9칸을 사용한다. 3/4
w3-col	한줄을 칸으로 나눌때 사용 만약 아래와 같이 사용하여 칸의 크기를 설정함(12칸) 설정이 없을 경우 12칸 모두를 사용함= 한줄 모두를 사용함
w3-rest	앞의 태그들이 12칸중 선택된 칸 이외의 나머지칸 모두를 사용함
l1 - l12	모니터의 큰크기 화면에서 12칸중 차지하는 칸수
m1 -m12	테블릿의 중간크기 화면에서 12칸중 차지하는 칸수
s1 - s12	스마트폰의 작은 사이즈화면에서 12칸중 차지하는 칸수
w3-hide-small	작은 화면에서는 숨긴다.
w3-hide-medium	중간크기화면에서는 숨긴다.
w3-hide-large	큰 화면에서는 숨긴다.
w3-image	화면 크기에 따라 이미지 크기가 작아짐, 설정한 최대값이 최대크기
w3-mobile	600픽셀보다 작은 화면에서 각 태그들을 블록처리하고, 화면의 최대너비를 사용함

▶ 수평 한줄에서의 위치

w3-cell-row	하위 w3-cell을 가진다. 내용에 따라 자동으로 조정됨
w3-cell	테이블의 컬럼과 같음
w3-cell-top	w3-cell 하위에서 정렬방식을 결정함 위쪽정렬
w3-cell-middle	가운데
w3-cell-bottom	바닥기준으로 정렬

▶ 바(Bar)

w3-bar	w3-bar-item을 수평으로 배열함
w3-bar-block	w3-bar-item을 수직으로 배열함
w3-bar-item	바형태의 스타일
w3-sidebar	왼쪽에 붙은 수직의 창
w3-collapse	w3-main과 함께 사용하여 사이드바가 사라지고 나타나게 한다.
w3-main

▶ 드롭다운 메뉴

w3-dropdown-hover	호버되면 dropdown-content의 내용이 표시됨
w3-dropdown-click	클릭하면 dropdown-content의 내용이 표시됨
w3-dropdown-content	실제 나타나는 부분

▶ 버튼

w3-btn	호버되면 배경색이 회색으로 변화하는 사각형 버튼
w3-button	호버되면 그림자가 나타나는 사각형 버튼
w3-circle	원형 버튼
w3-ripple	w3-button과 유사한효과. 회색의 좀 넓은 그림자가 나타남
w3-bar	한줄을 모두 사용함(그룹단위설정- 하위개체존재함)
w3-block	한줄을 모두 사용함(하위개체없음)

▶ input 태그

w3-input	한줄 모두사용하는 인풋태그
w3-check	체크박스 인풋
w3-radio	radio 인풋
w3-select	선택인풋
w3-animate-input	클릭하면 설정된 너비에서 한줄 끝까지 애니메이션이 되어 늘어남

▶ 모달 (Modal)

w3-modal	모달컨테이너
w3-modal-content	모달선택시 팝업되어 보여지는 박스
w3-tooltip	툴팁사용
w3-text	툴팁이 사용될때 나타나는 부분

▶ 에니메이션 효과

w3-animate-top/left/bottom/right/opacity -300 ->0	투명도0->100% 불투명
w3-animate-zoom/fading/spin	0->100% 확대, 나타났다사람짐/360도회전
w3-animate-input	위에서설명함

▶ 폰트와 글자

w3-tiny/small/large/xlarge/xxlarge/xxxlarge/jumbo	10/12/18/24/32/48/64픽셀 폰트크기
w3-wide/serif	글자칸을 넓게 serif폰트사용

▶ 화면배치

w3-center/left/right	화면 가운데정렬/ 좌측정렬/우측정렬
w3-left-align/right-align/justify	글자를 좌측/ 우측/해제 정렬
w3-hide <> w3-show <> w3-show-inline
w3-block
w3-circle
w3-top/bottom
w3-display-container
w3-display-topleft/topright/bottomleft/bottomright
w3-display-left/right/middle
w3-display/topmiddle/buttommiddle
w3-display-position
w3-display-hover

▶ 효과

w3-opacity
w3-opacity-off/min/max
w3-grayscale
w3-grayscale-max/min
w3-sepia
w3-sepia-min/max
w3-overlay

▶ 배경색 : w3-색상명

▶ 글자색상 : w3-text-색상명

▶ 호버될때 배경색 : w3-hover-색상명

▶ 호버될때 글자색 : w3-hover-text-색상명

▶ 호버될 때 기타 스타일

w3-hover-border-색상명
w3-hover-opacity
w3-hover-opacity-off
w3-hover-shadow/grayscale/sepia/none

▶ 모서리 처리

w3-round	4픽셀의 둥근모서리처리
w3-round-small/medium/large/xlarge/xxlarge	2/4/8/16/32픽셀의 둥근모서리처리

▶ 패딩

w3-padding	위아래8픽셀, 좌우16픽셀 패딩
w3-padding-small/large	위아래4픽셀/좌우8픽셀, 위아래12픽셀/좌우24픽셀
w3-padding-16/24/32/48/64	위아래 16/24/32/48/64픽셀 패딩처리

▶ 마진

w3-margin	16픽셀의 공간확보
w3-margin-top/right/left/bottom	위/우/좌/아래 16픽셀확보
w3-section	위아래 16픽셀확보

▶ 테두리 스타일

w3-border	테두리 보임
w3-border-top/bottom/left/right	각 지정면에 테두리
w3-border-0	테두리 제거(안보임)
w3-border-색상	테두리 색상
w3-bottombar/leftbar/rightbar/topbar	각 위치의 테두리 두껍게
w3-hover-border-색상	호버시 테두리 색상변경