아임웹은 서브메뉴가 2가지 타입 밖에 없어서 섬세한 디자인 제한이 높은 편입니다.
그래서 css로 서브메뉴에 그라데이션 배경을 넣어서 다른 변화를 줬습니다.
순서1. 그라데이션 색상을 정한다.
아래 사이트를 이용하면 그라데이션을 정말 정말 쉽게 만들수 있습니다.
원하는 색깔을 클릭해보세요!
CSS Gradient – Generator, Maker, and Background
As a free CSS gradient generator tool, this website lets you create a colorful gradient background for your website, blog, or social media profile.
cssgradient.io
그라데이션 생성 바를 움직이면 CSS 코드를 자동으로 생성해줍니다. 너무 편하고 좋아요!
순서2. 아임웹에 코드 위젯을 생성하고 style 태그에 css를 넣는다.
코드위젯 생성하는 방법은 아시죠?
(아임웹 가이드 : https://imweb.me/faq?mode=view&category=29&category2=38&idx=329 )
코드 복사해서 세브메뉴 배경 ID값만 변경하면 됩니다.
<style>
#dropdown_w202504163bb9e096a0223 .mega_dropdown_wrap {background: #6F1C1B;
background: linear-gradient(90deg,rgba(111, 28, 27, 1) 0%, rgba(212, 101, 36, 1) 50%, rgba(255, 121, 43, 1) 100%);}
</style>
아임웹 위젯 ID값 찾는 방법
순서3. 잘 적용됐는지 확인한다.
별것 아니지만 서브메뉴 배경에 색상 변화만 줘도 분위기가 많이 달라지네요.
아임웹에 적용해보시면 좋을것 같아요.
이상입니다.
다음글은 그림자 넣는 포스팅으로 갈게요.
https://cssgenerator.org/box-shadow-css-generator.html
Box Shadow CSS Generator
A box-shadow CSS Generator tool to quickly generate box-shadow CSS declarations.
cssgenerator.org