아임웹 기본 텍스트 위젯 꾸미기 | 호버 효과가 적용된 프리미엄 카드 디자인

 

텍스트 위젯만으로 고급 카드 UI 구현하기

홈페이지를 보다 전문적으로 보이게 만드는 가장 쉬운 방법 중 하나는 정보 전달 방식을 바꾸는 것입니다.

단순히 텍스트를 나열하는 것보다 카드 형태로 구성하면 가독성이 좋아지고 방문자가 내용을 빠르게 이해할 수 있습니다.

이번 커스텀 코드는 아임웹 텍스트 위젯만 활용하여 깔끔한 카드 디자인을 만드는 방법입니다.

 

별도의 디자인 프로그램이나 복잡한 HTML 구조 없이 적용할 수 있으며,

마우스를 올렸을 때 자연스럽게 떠오르는 애니메이션 효과도 포함되어 있습니다.

 

실제 구현 예시

믓아 스튜디오

 

---

 

이 코드로 구현되는 기능

이 커스텀 코드를 적용하면 다음과 같은 효과를 구현할 수 있습니다.

• 카드 형태 레이아웃 자동 적용
• 번호 영역 자동 스타일링
• 카드 제목 강조
• 설명 문구 가독성 향상
• 마우스 오버 시 카드 상승 효과
• 모바일 자동 최적화

서비스 소개, 제작 프로세스, 강점 소개, 홈페이지 제작 포인트 등을 표현할 때 활용하기 좋습니다.

---

 

사용하면 좋은 상황

- 홈페이지 제작 프로세스 소개

- 01 기획, 02 디자인, 03 개발과 같이 단계별 설명이 필요한 경우

- 회사 강점 소개, 전문성, 경험, 고객만족 등을 카드 형태로 보여주고 싶은 경우

서비스 특징 정리 방문자가 한눈에 내용을 이해할 수 있도록 구성할 때 효과적입니다.

---

 

적용 방법

1단계

아임웹에서 텍스트 위젯 3개를 생성합니다.

세개의 내용에 각각의 내용 작성합니다.

 

2단계

텍스트 위젯 ID를 확인합니다.

예시

w20260607b629d4b3f1055

w20260607b52fdd1944a41

w2026060749da08adeb376

 

3단계

디자인 모드 → SEO 및 헤더설정 → HEAD 영역에 아래 코드를 추가합니다.

---

 

전체 코드

<style>

/* 카드 */

#w20260607b629d4b3f1055,
#w20260607b52fdd1944a41,
#w2026060749da08adeb376{
    background:#fff !important;
    border:1px solid rgba(0,0,0,.08) !important;
    border-radius:24px !important;
    padding:40px !important;
    box-shadow:0 15px 50px rgba(0,0,0,.06) !important;
    transition:all .35s ease !important;
    height:100%;
}

#w20260607b629d4b3f1055:hover,
#w20260607b52fdd1944a41:hover,
#w2026060749da08adeb376:hover{
    transform:translateY(-8px);
    box-shadow:0 25px 70px rgba(0,0,0,.12) !important;
}

/* 번호 */

#w20260607b629d4b3f1055 .fr-view p:nth-child(1),
#w20260607b52fdd1944a41 .fr-view p:nth-child(1),
#w2026060749da08adeb376 .fr-view p:nth-child(1){
    width:58px;
    height:58px;
    margin:0 0 24px !important;

    display:flex;
    align-items:center;
    justify-content:center;

    background:#111;
    color:#fff;

    border-radius:999px;

    font-size:14px;
    font-weight:700;
    line-height:1;
}

/* 제목 */

#w20260607b629d4b3f1055 .fr-view p:nth-child(2),
#w20260607b52fdd1944a41 .fr-view p:nth-child(2),
#w2026060749da08adeb376 .fr-view p:nth-child(2){
    margin:0 0 14px !important;

    font-size:30px !important;
    font-weight:700 !important;
    line-height:1.3 !important;
    color:#111 !important;
}

/* 설명 */

#w20260607b629d4b3f1055 .fr-view p:nth-child(3),
#w20260607b52fdd1944a41 .fr-view p:nth-child(3),
#w2026060749da08adeb376 .fr-view p:nth-child(3){
    margin:0 !important;

    font-size:16px !important;
    line-height:1.8 !important;
    color:#666 !important;
}

@media(max-width:768px){

    #w20260607b629d4b3f1055,
    #w20260607b52fdd1944a41,
    #w2026060749da08adeb376{
        padding:28px !important;
        border-radius:20px !important;
    }

    #w20260607b629d4b3f1055 .fr-view p:nth-child(2),
    #w20260607b52fdd1944a41 .fr-view p:nth-child(2),
    #w2026060749da08adeb376 .fr-view p:nth-child(2){
        font-size:22px !important;
    }

}

</style>

---

코드 수정 포인트

1. 카드 모서리 둥글기 변경

현재

border-radius:24px;

값을 변경하면 됩니다.

border-radius:40px;

 

 

2. 카드 그림자 변경

현재

box-shadow:0 15px 50px rgba(0,0,0,.06);

숫자를 높이면 더 입체적인 느낌을 만들 수 있습니다.

 

3. 카드 색상 변경

현재

background:#fff;

브랜드 컬러에 맞게 변경 가능합니다.

예시

background:#f7f8fa;

 

 

4 호버 이동 거리 변경

현재

transform:translateY(-8px);

더 크게 움직이고 싶다면

transform:translateY(-15px);

로 수정하면 됩니다.

---

 

자주 발생하는 오류와 해결 방법

1. 카드 디자인이 적용되지 않아요

대부분 위젯 ID가 다르기 때문입니다.

반드시 본인 사이트의 텍스트 위젯 ID로 변경해야 합니다.

 

2. 제목 스타일이 적용되지 않아요

텍스트 위젯 내부 구조가 달라졌을 가능성이 있습니다.

아래 순서를 유지해야 합니다.

1번째 문단 = 번호

2번째 문단 = 제목

3번째 문단 = 설명

 

3. 모바일에서 글자가 너무 커요

아래 값을 조절하세요.

font-size:22px;

 

 

4. 카드 높이가 다르게 보여요

텍스트 길이가 서로 다르면 발생할 수 있습니다.

설명 문장의 길이를 비슷하게 맞추면 정렬이 더욱 깔끔해집니다.

---

 

마무리

아임웹은 기본 기능만 사용해도 홈페이지를 제작할 수 있지만, 작은 커스텀 코드 하나만 추가해도 디자인 완성도가 크게 달라집니다.

특히 카드형 레이아웃은 서비스 소개, 제작 프로세스, 강점 정리 등 다양한 영역에서 활용도가 높아 방문자의 이해도를 높이고 홈페이지의 전문성을 강화하는 데 도움이 됩니다.

아임웹 홈페이지 제작이나 웹디자인 작업을 진행 중이라면 이번 HTML/CSS 커스텀 코드를 활용해 보다 고급스러운 카드 UI를 만들어보시기 바랍니다.

 

홈페이지 제작 상담 문의

믓아 스튜디오

 

아임웹 카드 슬라이드 커스텀 코드

아임웹 카드 슬라이드 커스텀 코드 | 고급 카드 캐러셀 디자인 구현하기