아이콘/아이콘박스(Icon/Icon-box )

아이콘 요소는 버튼이나 선등 아이콘이 같이 사용되는 요소에서 사용법과 동일합니다.

아이콘만 단독으로 사용될 때는 일반적을 PPT의 느낌을 좋아하는 디자인 구현 시

자주 사용하게 되지만 크기나 사용 빈도가 너무 높으면 너무 설명적인

느낌이 강해져 웹 제작의 장점을 살리기 어렵습니다.

아이콘요소 메뉴 패널

단독 아이콘 메뉴 패널 매우 간단합니다.

아이콘은 아이콘만 사용할 것이냐 배경도 사용할 것이냐에 따라 느낌의 변화가 큽니다.

사이드 메뉴에 배경에서 그 설정이 가능합니다.

배경이나 배경없이 테두리를 채워 사용할 수도 있습니다.

사실상 아이콘 사용은 버튼 UI와 거의 동일합니다.

아이콘박스는 아이콘+텍스트+버튼이 하나로 묶인 요소입니다.

아이콘박스는 아이콘 따로 텍스트따로 버튼 따로 구현이 가능하지만

편리하게 한번의 요소드랍으로 사용이 가능합니다.

아이콘박스 개별 요소 설정

아이콘 박스내 요소는 각각 삭제가 가능해 필요한 요소 조합으로 사용이 가능합니다.

아이콘 박스 내에 버튼 요소를 삭제한 이미지 입니다.

일반적으로 아이콘과 텍스트 조합을 사용하는 경우가 많습니다.

아이콘박스 활용

해당 템플릿은 아이콘 박스를 이용해 디자인한 방식입니다.

위 이미지 처럼 아이콘 박스는 활용이 가능합니다. 메뉴는 각각 요소의 메뉴 사용과 동일합니다.

아이콘/아이콘박스 요소 마무리

타사 작업시 유독 아이콘을 크게 해서 디자인하는 경우가 있습니다

왜 그렇게 했는지 살펴보면 디자인 내용이 부족하기 때문이라고 합니다.

아이콘은 포인트로 사용되기 때문에 디자인으로 사용하기 위해서는

배경 디자인이 우선 되어야 합니다.

플러그인에 대해

폴리랭 플러그인 (POLYL...
워드프레스 웹사이트 하나로 한국어, 영어, 일본어 등 여러 언어를 동시에 지원하는 다...
스마트 슬라이더 3 플러그인...
웹사이트 첫 화면의 메인 비주얼 배너나 이미지 슬라이드를 코딩 없이 전문 디자이너 수...
요스트SEO 플러그인(Yoa...
내 웹사이트와 블로그 글이 구글, 네이버 등 주요 검색엔진 결과 상위에 노출될 수 있...

참고 사이트 소개

SVG Repo
웹사이트를 제작할 때 메뉴 아이콘, 버튼 심볼, 서비스 특징을 설명하는 일러스트는 방...
리무브비지(Remove BG...
웹사이트를 제작할 때 상품 사진, 인물 프로필, 브랜드 로고를 깔끔하게 배치하려면 불...
캔바(Canva)
웹사이트를 만들 때 가장 큰 난관 중 하나는 로고, 메인 비주얼 배너, 블로그 썸네일...