재질-이미지 아이콘

이 장에서는 Google의 (Material) 이미지 아이콘 사용에 대해 설명합니다. 그것을 가정custom 아래에 주어진 예와 같이 크기와 색상을 정의한 CSS 클래스 이름입니다.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
		
      <style>
         i.custom {font-size: 2em; color: green;}
      </style>
		
   </head>
	
   <body>
      <i class = "material-icons custom">accessibility</i>
   </body>
	
</html>

다음 표는 Google의 (Material) 이미지 아이콘의 사용 및 결과를 포함합니다. 위 프로그램의 <body> 태그를 표에 제공된 코드로 대체하여 각 출력을 얻습니다.

용법 결과
<i class = "material-icons custom"> 사진에 _ 추가 </ i> add_to_photos
<i class = "material-icons custom"> 조정 </ i> 맞추다
<i class = "material-icons custom"> 도우미 </ i> 조수
<i class = "material-icons custom"> 도우미 </ i> 조수
<i class = "material-icons custom"> 오디오 트랙 </ i> 오디오 트랙
<i class = "material-icons custom"> blur_circular </ i> blur_circular
<i class = "material-icons custom"> blur_linear </ i> blur_linear
<i class = "material-icons custom"> blur_off </ i> blur_off
<i class = "material-icons custom"> blur_on </ i> blur_on
<i class = "material-icons custom"> 밝기 _1 </ i> 밝기 _1
<i class = "material-icons custom"> 밝기 _2 </ i> 밝기 _2
<i class = "material-icons custom"> 밝기 _3 </ i> 밝기 _3
<i class = "material-icons custom"> 밝기 _4 </ i> 밝기 _4
<i class = "material-icons custom"> 밝기 _5 </ i> 밝기 _5
<i class = "material-icons custom"> 밝기 _6 </ i> 밝기 _6
<i class = "material-icons custom"> 밝기 _7 </ i> 밝기 _7
<i class = "material-icons custom"> 깨진 이미지 </ i> broken_image
<i class = "material-icons custom"> 브러시 </ i> 브러시
<i class = "material-icons custom"> 카메라 </ i> 카메라
<i class = "material-icons custom"> camera_alt </ i> camera_alt
<i class = "material-icons custom"> camera_front </ i> camera_front
<i class = "material-icons custom"> 카메라 _ 후면 </ i> camera_rear
<i class = "material-icons custom"> camera_roll </ i> 카메라 롤
<i class = "material-icons custom"> center_focus_strong </ i> center_focus_strong
<i class = "material-icons custom"> center_focus_weak </ i> center_focus_weak
<i class = "material-icons custom"> 컬렉션 </ i> 컬렉션
<i class = "material-icons custom"> 컬렉션 _ 북마크 </ i> collections_bookmark
<i class = "material-icons custom"> color_lens </ i> color_lens
<i class = "material-icons custom"> 색칠 </ i> 채색하다
<i class = "material-icons custom"> 비교 </ i> 비교
<i class = "material-icons custom"> control_point </ i> 제어점
<i class = "material-icons custom"> control_point_duplicate </ i> control_point_duplicate
<i class = "material-icons custom"> 자르기 </ i> 수확고
<i class = "material-icons custom"> crop_16_9 </ i> crop_16_9
<i class = "material-icons custom"> crop_3_2 </ i> crop_3_2
<i class = "material-icons custom"> crop_5_4 </ i> crop_5_4
<i class = "material-icons custom"> crop_7_5 </ i> crop_7_5
<i class = "material-icons custom"> crop_din </ i> crop_din
<i class = "material-icons custom"> crop_free </ i> 무 작물
<i class = "material-icons custom"> crop_landscape </ i> crop_landscape
<i class = "material-icons custom"> crop_original </ i> crop_original
<i class = "material-icons custom"> crop_portrait </ i> crop_portrait
<i class = "material-icons custom"> crop_square </ i> crop_square
<i class = "material-icons custom"> 디 헤이즈 </ i> 디 헤이즈
<i class = "material-icons custom"> 세부 정보 </ i> 세부
<i class = "material-icons custom"> 수정 </ i> 편집하다
<i class = "material-icons custom"> 노출 </ i> 노출
<i class = "material-icons custom"> exposure_neg_1 </ i> exposure_neg_1
<i class = "material-icons custom"> exposure_plus_1 </ i> 노출 _ 플러스 _1
<i class = "material-icons custom"> exposure_plus_2 </ i> exposure_plus_2
<i class = "material-icons custom"> exposure_zero </ i> 노출 _ 제로
<i class = "material-icons custom"> 필터 </ i> 필터
<i class = "material-icons custom"> filter_1 </ i> filter_1
<i class = "material-icons custom"> filter_2 </ i> filter_2
<i class = "material-icons custom"> filter_3 </ i> filter_3
<i class = "material-icons custom"> 필터 _4 </ i> filter_4
<i class = "material-icons custom"> filter_5 </ i> filter_5
<i class = "material-icons custom"> filter_6 </ i> filter_6
<i class = "material-icons custom"> filter_7 </ i> filter_7
<i class = "material-icons custom"> filter_8 </ i> filter_8
<i class = "material-icons custom"> filter_9 </ i> filter_9
<i class = "material-icons custom"> filter_9_plus </ i> filter_9_plus
<i class = "material-icons custom"> filter_b_and_w </ i> filter_b_and_w
<i class = "material-icons custom"> filter_center_focus </ i> filter_center_focus
<i class = "material-icons custom"> filter_drama </ i> filter_drama
<i class = "material-icons custom"> 필터 _ 프레임 </ i> 필터 _ 프레임
<i class = "material-icons custom"> filter_hdr </ i> filter_hdr
<i class = "material-icons custom"> filter_none </ i> filter_none
<i class = "material-icons custom"> filter_tilt_shift </ i> filter_tilt_shift
<i class = "material-icons custom"> filter_vintage </ i> filter_vintage
<i class = "material-icons custom"> 플레어 </ i> 플레어
<i class = "material-icons custom"> flash_auto </ i> flash_auto
<i class = "material-icons custom"> flash_off </ i> flash_off
<i class = "material-icons custom"> flash_on </ i> flash_on
<i class = "material-icons custom"> 플립 </ i> 튀기다
<i class = "material-icons custom"> 그라데이션 </ i> 구배
<i class = "material-icons custom"> 그레인 </ i> 곡물
<i class = "material-icons custom"> grid_off </ i> grid_off
<i class = "material-icons custom"> grid_on </ i> grid_on
<i class = "material-icons custom"> hdr_off </ i> hdr_off
<i class = "material-icons custom"> hdr_on </ i> hdr_on
<i class = "material-icons custom"> hdr_strong </ i> hdr_strong
<i class = "material-icons custom"> hdr_weak </ i> hdr_weak
<i class = "material-icons custom"> 치유 </ i> 치유
<i class = "material-icons custom"> 이미지 </ i> 영상
<i class = "material-icons custom"> 이미지 _ 종횡비 </ i> image_aspect_ratio
<i class = "material-icons custom"> iso </ i> iso
<i class = "material-icons custom"> 가로 </ i> 경치
<i class = "material-icons custom"> leak_add </ i> 누출 _ 추가
<i class = "material-icons custom"> leak_remove </ i> 누수 제거
<i class = "material-icons custom"> 렌즈 </ i> 렌즈
<i class = "material-icons custom"> 모양 </ i> 외모
<i class = "material-icons custom"> 룩 _3 </ i> looks_3
<i class = "material-icons custom"> 외모 _4 </ i> look_4
<i class = "material-icons custom"> looks_5 </ i> looks_5
<i class = "material-icons custom"> looks_6 </ i> looks_6
<i class = "material-icons custom"> looks_one </ i> look_one
<i class = "material-icons custom"> looks_two </ i> look_two
<i class = "material-icons custom"> 확대경 </ i> 루페
<i class = "material-icons custom"> monochrome_photos </ i> 흑백 사진
<i class = "material-icons custom"> movie_creation </ i> movie_creation
<i class = "material-icons custom"> music_note </ i> 음악 노트
<i class = "material-icons custom"> 자연 </ i> 자연
<i class = "material-icons custom"> nature_people </ i> 자연 _ 사람
<i class = "material-icons custom"> wb_sunny </ i> wb_sunny
<i class = "material-icons custom"> navigate_next </ i> navigate_next
<i class = "material-icons custom"> navigate_before </ i> navigate_before
<i class = "material-icons custom"> 팔레트 </ i> 팔레트
<i class = "material-icons custom"> 파노라마 </ i> 파노라마
<i class = "material-icons custom"> panorama_fish_eye </ i> panorama_fish_eye
<i class = "material-icons custom"> panorama_horizontal </ i> panorama_horizontal
<i class = "material-icons custom"> panorama_vertical </ i> panorama_vertical
<i class = "material-icons custom"> panorama_wide_angle </ i> panorama_wide_angle
<i class = "material-icons custom"> 사진 </ i> 사진
<i class = "material-icons custom"> 사진 _ 앨범 </ i> photo_album
<i class = "material-icons custom"> 사진 _ 카메라 </ i> 사진기
<i class = "material-icons custom"> 사진 _ 라이브러리 </ i> 포토 라이브러리
<i class = "material-icons custom"> 사진 _ 크기 _ 선택 _ 실제 </ i> photo_size_select_actual
<i class = "material-icons custom"> photo_size_select_large </ i> photo_size_select_large
<i class = "material-icons custom"> photo_size_select_small </ i> photo_size_select_small
<i class = "material-icons custom"> picture_as_pdf </ i> picture_as_pdf
<i class = "material-icons custom"> 세로 </ i> 초상화
<i class = "material-icons custom"> remove_red_eye </ i> remove_red_eye
<i class = "material-icons custom"> rotate_90_degrees_ccw </ i> rotate_90_degrees_ccw
<i class = "material-icons custom"> 왼쪽으로 회전 </ i> rotate_left
<i class = "material-icons custom"> 오른쪽으로 회전 </ i> rotate_right
<i class = "material-icons custom"> 슬라이드 쇼 </ i> 슬라이드 쇼
<i class = "material-icons custom"> 직선화 </ i> 바르게 되다
<i class = "material-icons custom"> 스타일 </ i> 스타일
<i class = "material-icons custom"> switch_camera </ i> switch_camera
<i class = "material-icons custom"> switch_video </ i> switch_video
<i class = "material-icons custom"> tag_faces </ i> tag_faces
<i class = "material-icons custom"> 텍스처 </ i> 조직
<i class = "material-icons custom"> 타임 랩스 </ i> 저속 촬영
<i class = "material-icons custom"> 타이머 </ i> 시간제 노동자
<i class = "material-icons custom"> timer_10 </ i> timer_10
<i class = "material-icons custom"> timer_3 </ i> timer_3
<i class = "material-icons custom"> timer_off </ i> timer_off
<i class = "material-icons custom"> 색조 </ i> 색조
<i class = "material-icons custom"> 변환 </ i> 변환
<i class = "material-icons custom"> 조정 </ i> 곡조
<i class = "material-icons custom">보기 _ 편안함 </ i> view_comfy
<i class = "material-icons custom"> view_compact </ i> view_compact
<i class = "material-icons custom"> 비 네트 </ i> 삽화
<i class = "material-icons custom"> wb_auto </ i> wb_auto
<i class = "material-icons custom"> wb_cloudy </ i> wb_cloudy
<i class = "material-icons custom"> wb_ 백열등 </ i> wb_incandescent
<i class = "material-icons custom"> wb_ 무지개 </ i> wb_iridescent
ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2025 | All Rights Reserved