Newtil CSS

Appearance

아이콘 (Icon) ​

m3-icon 컴포넌트는 Google Material Icons를 사용하여 프로젝트 전역에서 일관된 아이콘 UI를 제공합니다. 아래 예제들은 test/icon.html 데모 페이지와 동일한 구성요소를 문서화한 것입니다.

기본 사용법 ​

아이콘을 사용하려면 m3-icon 클래스와 함께 아이콘 이름을 지정하세요:

html
<span class="m3-icon icon:home"></span>
<span class="m3-icon icon:menu"></span>
<span class="m3-icon icon:close"></span>

아이콘 스타일 ​

icon-style:* 클래스를 사용하여 아이콘의 스타일을 변경할 수 있습니다.

icon-style:outlined
icon-style:rounded
icon-style:sharp
html
<span class="m3-icon icon:home icon-style:outlined"></span>
<span class="m3-icon icon:home icon-style:rounded"></span>
<span class="m3-icon icon:home icon-style:sharp"></span>

아이콘 채우기 ​

icon-filled:* 클래스를 사용하여 아이콘을 채울지 여부를 결정할 수 있습니다.

icon-filled:0
icon-filled:1
html
<span class="m3-icon icon:home icon-filled:0"></span>
<span class="m3-icon icon:home icon-filled:1"></span>

아이콘 두께 ​

icon-weight:* 클래스를 사용하여 아이콘의 두께를 조절할 수 있습니다. 값이 클수록 더 두꺼워집니다.

icon-weight:100
icon-weight:200
icon-weight:300
icon-weight:400
icon-weight:500
icon-weight:600
icon-weight:700
html
<span class="m3-icon icon:home icon-weight:100"></span>
<span class="m3-icon icon:home icon-weight:400"></span>
<span class="m3-icon icon:home icon-weight:700"></span>

아이콘 그라데이션 ​

icon-grade:* 클래스를 사용하여 아이콘의 그라데이션을 조절할 수 있습니다.

icon-grade:-25
icon-grade:0
icon-grade:200
html
<span class="m3-icon icon:home icon-grade:-25"></span>
<span class="m3-icon icon:home icon-grade:0"></span>
<span class="m3-icon icon:home icon-grade:200"></span>

아이콘 광학 크기 ​

icon-optical-size:* 클래스를 사용하여 아이콘의 광학 크기를 조절할 수 있습니다. 이는 폰트의 가변 폰트 기능을 활용합니다.

icon-optical-size:20
icon-optical-size:24
icon-optical-size:40
icon-optical-size:48
html
<span class="m3-icon icon:home icon-optical-size:20"></span>
<span class="m3-icon icon:home icon-optical-size:24"></span>
<span class="m3-icon icon:home icon-optical-size:40"></span>
<span class="m3-icon icon:home icon-optical-size:48"></span>

아이콘 색상 ​

icon-color:* 클래스를 사용하여 프로젝트에서 정의한 색상 팔레트를 사용할 수 있습니다.

icon-color:main-1
icon-color:main-2
icon-color:main-3
icon-color:sub-1
icon-color:sub-2
icon-color:sub-3
icon-color:accent-1
icon-color:accent-2
icon-color:accent-3
icon-color:base-1
icon-color:base-5
icon-color:base-9
html
<span class="m3-icon icon:home icon-color:main-1"></span>
<span class="m3-icon icon:home icon-color:sub-1"></span>
<span class="m3-icon icon:home icon-color:accent-1"></span>
<span class="m3-icon icon:home icon-color:base-9"></span>

아이콘 크기 ​

icon-size:* 클래스를 사용하여 아이콘의 크기를 조절할 수 있습니다.

icon-size:20
icon-size:24
icon-size:40
icon-size:48
html
<span class="m3-icon icon:home icon-size:20"></span>
<span class="m3-icon icon:home icon-size:24"></span>
<span class="m3-icon icon:home icon-size:40"></span>
<span class="m3-icon icon:home icon-size:48"></span>

버튼과 함께 사용하기 ​

아이콘은 버튼과 함께 사용할 수 있습니다. 버튼 클래스에 아이콘 클래스를 추가하면 됩니다.

html
<button class="m3-btn icon:home">홈</button>
<button class="m3-btn icon:menu">메뉴</button>
<button class="m3-btn icon:search">검색</button>

사용 가능한 아이콘 ​

Newtil CSS는 Google Material Icons의 Essential 버전을 제공합니다. 총 60개의 핵심 아이콘을 포함하고 있습니다.

네비게이션 (15개) ​

icon:home - 홈
icon:menu - 메뉴
icon:close - 닫기
icon:arrow_back - 뒤로 가기
icon:arrow_forward - 앞으로 가기
icon:expand_more - 더 보기 (아래)
icon:expand_less - 더 보기 (위)
icon:chevron_left - 왼쪽 화살표
icon:chevron_right - 오른쪽 화살표
icon:more_vert - 더보기 (세로)
icon:more_horiz - 더보기 (가로)
icon:refresh - 새로고침
icon:settings - 설정
icon:apps - 앱
icon:launch - 실행

액션 (20개) ​

icon:add - 추가
icon:remove - 제거
icon:edit - 편집
icon:delete - 삭제
icon:save - 저장
icon:check - 확인
icon:clear - 지우기
icon:cancel - 취소
icon:done - 완료
icon:search - 검색
icon:share - 공유
icon:download - 다운로드
icon:upload - 업로드
icon:copy - 복사
icon:visibility - 보기
icon:visibility_off - 숨기기
icon:lock - 잠금
icon:lock_open - 잠금 해제
icon:sync - 동기화
icon:info - 정보

커뮤니케이션 (8개) ​

icon:email - 이메일
icon:phone - 전화
icon:chat - 채팅
icon:notifications - 알림
icon:send - 보내기
icon:reply - 답장
icon:help - 도움말
icon:feedback - 피드백

미디어 (7개) ​

icon:play_arrow - 재생
icon:pause - 일시정지
icon:stop - 정지
icon:volume_up - 볼륨 높이기
icon:volume_off - 볼륨 끄기
icon:mic - 마이크
icon:mic_off - 마이크 끄기

파일 (5개) ​

icon:folder - 폴더
icon:folder_open - 열린 폴더
icon:attach_file - 파일 첨부
icon:cloud - 클라우드
icon:description - 문서

소셜 (5개) ​

icon:person - 사람
icon:people - 사람들
icon:favorite - 즐겨찾기
icon:star - 별
icon:thumb_up - 좋아요

커스텀 아이콘 사용하기 ​

Newtil CSS는 기본적으로 약 10개 내외의 핵심 아이콘만 제공합니다. 프로젝트에서 필요한 추가 아이콘은 프로젝트 내 CSS 파일에 직접 추가할 수 있습니다.

Google Material Icons에서 원하는 아이콘을 찾아 유니코드 값을 가져온 후, 다음과 같이 스타일을 추가하면 됩니다:

css
.icon\:your_icon_name::before {
	content: "\e88a";
}

예를 들어, icon-essential.css 파일에 다음과 같이 추가할 수 있습니다:

css
/* === NAVIGATION === */
.icon\:home::before {
	content: "\e88a";
}

아이콘 유니코드 찾는 방법 ​

  1. Google Material Icons 사이트에 접속합니다.
  2. 원하는 아이콘을 검색하거나 카테고리에서 선택합니다.
  3. 아이콘을 클릭하면 상세 정보가 표시됩니다.
  4. "Font" 탭에서 유니코드 값을 확인할 수 있습니다 (예: \e88a).
  5. 해당 유니코드 값을 content 속성에 추가합니다.

예제 ​

프로젝트의 CSS 파일에 다음과 같이 추가하면 새로운 아이콘을 사용할 수 있습니다:

css
/* 커스텀 아이콘 추가 */
.icon\:favorite_border::before {
	content: "\e87e";
}

.icon\:shopping_cart::before {
	content: "\e8cc";
}

그리고 HTML에서 다음과 같이 사용합니다:

html
<span class="m3-icon icon:favorite_border"></span>
<span class="m3-icon icon:shopping_cart"></span>

옵션 조합 예제 ​

여러 옵션을 조합하여 사용할 수 있습니다:

크기 + 색상 + 채우기
크기 + 두께 + 색상
스타일 + 채우기 + 색상
html
<!-- 크기, 색상, 채우기 조합 -->
<span class="m3-icon icon:home icon-size:40 icon-color:main-1 icon-filled:1"></span>

<!-- 크기, 두께, 색상 조합 -->
<span class="m3-icon icon:home icon-size:48 icon-weight:700 icon-color:accent-1"></span>

<!-- 스타일, 채우기, 색상 조합 -->
<span class="m3-icon icon:home icon-style:rounded icon-filled:1 icon-color:main-2"></span>

Copyright © 2024 newlecture