화면구현 - Materialize CSS

공식 홈페이지 https://materializecss.com/ 에 접속Get Started 클릭CDN의 stylesheet link를 html 문서 head의 title태그 밑에 복사 붙여넣기동적표현을 하려면 script 링크를 body태그 마지막줄에 넣어주

글자색상글자배경글자배경 연하게글자배경 진하게정렬1) 이미지반응형이미지 모양2) 아이콘https://materializecss.com/ 에 접속메뉴 - Components - Icons - Usage 링크 복사html문서 head에 붙여넣기: 연동완료사용법: i

container 클래스: 화면의 70% 정도를 사용하고 중앙에 배치한다(양옆으로 여백을 줌)한줄에 12개의 column을 가진다.<실행화면>1) 기종(특정px크기)에 따른 내용의 크기 변화:<실행화면>

offset-숫자: 숫자만큼의 칸을 띄우고 배치반응형 설정 가능.<실행화면>push-숫자: 숫자칸만큼 오른쪽으로 밀어냄pull-숫자: 숫자칸만큼 왼쪽으로 당김<실행화면>

<실행화면>클릭할 때 효과 발생

stripedcenteredhighlightresponsive-tableresponsive-table이 적용된 모습