아임웹 CSS 적용하는 방법｜초보자도 가능한 디자인 수정 방법

아임웹으로 홈페이지를 만들다 보면 기본 디자인 설정만으로는 원하는 느낌을 만들기 어려울 때가 있습니다.

예를 들어,

• 버튼 색상을 더 세밀하게 바꾸고 싶을 때
• 섹션 여백을 원하는 값으로 조정하고 싶을 때
• 모바일에서 글자 크기를 따로 조정하고 싶을 때
• 특정 위젯만 디자인을 다르게 만들고 싶을 때
• 기본 디자인보다 더 고급스러운 스타일을 적용하고 싶을 때

이럴 때 사용하는 것이 바로 CSS입니다.

CSS를 사용하면 아임웹 기본 설정으로는 부족한 디자인을 더 자유롭게 수정할 수 있습니다.

---

 

1. CSS란 무엇인가요?

CSS는 웹사이트의 디자인을 담당하는 코드입니다.

쉽게 말하면,

HTML이 구조라면, CSS는 디자인입니다.

예를 들어 홈페이지에 버튼이 있다면,

• 버튼의 색상
• 버튼의 크기
• 버튼의 둥근 정도
• 버튼 안의 글자 크기
• 마우스를 올렸을 때 효과
• 모바일에서 보이는 방식

이런 부분을 CSS로 조정할 수 있습니다.

---

 

2. 아임웹에서 CSS는 어디에 넣나요?

아임웹에서 CSS를 적용하는 방법은 크게 2가지입니다.

 

방법 1. HTML 위젯 안에 넣기

특정 섹션이나 특정 기능에만 CSS를 적용하고 싶다면 HTML 위젯 안에 넣는 방식이 좋습니다.

<style>
  .my-button {
    background: #111;
    color: #fff;
    padding: 14px 24px;
    border-radius: 999px;
  }
</style>

이 방식은 특정 영역에만 코드를 적용하기 좋습니다.

 

방법 2. 사이트 공통 코드에 넣기

전체 사이트에 공통으로 적용하고 싶다면 공통 코드 영역에 CSS를 넣을 수 있습니다.

예를 들어 전체 버튼 스타일, 폰트 스타일, 모바일 공통 여백 등을 관리할 때 사용합니다.

공통 코드에 넣으면 여러 페이지에 한 번에 적용할 수 있어서 관리가 편합니다.

---

 

3. CSS 기본 구조 이해하기

CSS는 보통 아래처럼 작성합니다.

선택자 {
  속성: 값;
}

예를 들어 버튼 색상을 바꾸고 싶다면 이렇게 작성합니다.

.my-button {
  background: #111111;
  color: #ffffff;
}

여기서,

• .my-button은 수정할 대상을 의미합니다.
• background는 배경색을 의미합니다.
• color는 글자색을 의미합니다.

즉,

my-button이라는 이름을 가진 요소의 배경은 검정색, 글자는 흰색으로 바꾼다

는 뜻입니다.

---

 

4. 아임웹에서 CSS 적용 예시

아래 코드는 아임웹 HTML 위젯에 바로 넣어볼 수 있는 간단한 버튼 예시입니다.

버튼 마우스 오버 전 후

<a href="#contact" class="motsa-css-btn">상담 문의하기</a>

<style>
.motsa-css-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:14px 26px;
  background:#111827;
  color:#ffffff !important;
  border-radius:999px;
  font-size:15px;
  font-weight:700;
  text-decoration:none !important;
  font-family:Pretendard,sans-serif;
  transition:all .25s ease;
}

.motsa-css-btn:hover{
  background:#2563eb;
  color:#ffffff !important;
  transform:translateY(-3px);
}
</style>

위 코드를 넣으면 둥근 형태의 상담 문의 버튼을 만들 수 있습니다.

---

5. 특정 위젯만 CSS 적용하는 방법

아임웹에서는 특정 위젯 ID를 활용하면 원하는 영역만 수정할 수 있습니다.

예를 들어 특정 위젯 ID가 아래와 같다고 가정해보겠습니다.

#w20260529abc123

이 위젯 안의 버튼만 수정하고 싶다면 이렇게 작성합니다.

#w20260529abc123 .btn {
  background: #111827;
  color: #ffffff;
  border-radius: 999px;
}

이렇게 작성하면 사이트 전체 버튼이 아니라 해당 위젯 안에 있는 버튼만 수정됩니다.

---

 

6. 섹션 ID로 CSS 적용하는 방법

아임웹에서는 섹션마다 고유 ID가 있습니다.

섹션 우 클릭 후 섹션 설정 -> 섹션ID 확인

 

예를 들어 섹션 ID가 아래와 같다면,

#s20260529abc123

해당 섹션의 배경색을 바꾸고 싶을 때는 이렇게 작성할 수 있습니다.

#s20260529abc123 {
  background: #f8fafc;
}

또는 해당 섹션 안의 제목만 수정하고 싶다면,

#s20260529abc123 h2 {
  font-size: 42px;
  font-weight: 800;
  color: #111827;
}

처럼 사용할 수 있습니다.

---

 

7. 모바일 CSS 적용하는 방법

아임웹 홈페이지는 PC보다 모바일에서 더 많이 보는 경우가 많습니다.

그래서 CSS를 적용할 때는 모바일 화면도 꼭 확인해야 합니다.

모바일 전용 CSS는 아래처럼 작성합니다.

@media (max-width: 768px) {
  .motsa-css-btn {
    width: 100%;
    font-size: 14px;
    padding: 13px 20px;
  }
}

이 코드는 화면 너비가 768px 이하일 때만 적용됩니다.

즉, 모바일에서 버튼을 가로 전체 너비로 보여주고 싶을 때 사용할 수 있습니다.

---

 

8. CSS가 적용되지 않을 때 확인할 것

CSS를 넣었는데 적용되지 않는 경우가 있습니다.

이럴 때는 아래를 확인해보면 좋습니다.

1. 선택자가 정확한지 확인하기

수정하려는 대상의 클래스명이나 ID가 다르면 CSS가 적용되지 않습니다.

 

2. 중괄호가 빠지지 않았는지 확인하기

CSS는 { } 구조가 중요합니다.

.my-box {
  padding: 40px;
  background: #fff;
}

중괄호가 빠지면 코드가 제대로 작동하지 않을 수 있습니다.

 

3. 세미콜론이 빠지지 않았는지 확인하기

각 속성 끝에는 세미콜론을 넣는 것이 좋습니다.

color: #111;
font-size: 16px;

 

4. 기존 아임웹 스타일이 더 강한 경우

아임웹 기본 스타일이 우선 적용되어 내가 작성한 CSS가 밀릴 때가 있습니다.

이럴 때는 !important를 사용할 수 있습니다.

.motsa-css-btn {
  background: #111827 !important;
  color: #ffffff !important;
}

단, !important는 너무 많이 사용하면 관리가 어려워질 수 있으니 필요한 경우에만 사용하는 것이 좋습니다.

---

 

9. CSS 수정 시 자주 사용하는 속성

아임웹 디자인을 수정할 때 자주 사용하는 CSS 속성은 아래와 같습니다.

color: 글자색;
background: 배경색;
font-size: 글자 크기;
font-weight: 글자 두께;
line-height: 줄간격;
letter-spacing: 자간;
padding: 안쪽 여백;
margin: 바깥 여백;
border: 테두리;
border-radius: 둥근 모서리;
box-shadow: 그림자;
display: 배치 방식;
gap: 요소 사이 간격;
width: 너비;
max-width: 최대 너비;
transition: 전환 효과;
transform: 이동, 확대, 회전;

이 속성들만 알아도 기본적인 디자인 수정은 충분히 가능합니다.

---

 

10. 아임웹 CSS 적용 예시 코드

아래 코드는 아임웹 HTML 위젯에 넣어서 테스트해볼 수 있는 간단한 카드 디자인입니다.

 

실제구현

믓아 스튜디오

 

<div class="motsa-css-card">
  <span>CSS 적용 예시</span>
  <h3>아임웹에서도 원하는 디자인을 만들 수 있습니다</h3>
  <p>
    HTML 위젯과 CSS를 활용하면 기본 위젯으로 만들기 어려운 버튼, 카드, 섹션 디자인도 자유롭게 커스텀할 수 있습니다.
  </p>
</div>

<style>
  .motsa-css-card {
    max-width: 720px;
    margin: 0 auto;
    padding: 42px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 24px;
    box-shadow: 0 18px 50px rgba(17, 24, 39, 0.08);
    font-family: Pretendard, sans-serif;
  }

  .motsa-css-card span {
    display: inline-flex;
    margin-bottom: 14px;
    padding: 7px 12px;
    background: #eff6ff;
    color: #2563eb;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
  }

  .motsa-css-card h3 {
    margin: 0 0 14px;
    font-size: 30px;
    font-weight: 800;
    line-height: 1.35;
    color: #111827;
    letter-spacing: -0.04em;
  }

  .motsa-css-card p {
    margin: 0;
    font-size: 16px;
    line-height: 1.75;
    color: #4b5563;
    letter-spacing: -0.02em;
  }

  @media (max-width: 768px) {
    .motsa-css-card {
      padding: 28px 22px;
      border-radius: 18px;
    }

    .motsa-css-card h3 {
      font-size: 23px;
    }

    .motsa-css-card p {
      font-size: 15px;
    }
  }
</style>

---

 

11. CSS 적용 전에 알아두면 좋은 팁

아임웹에서 CSS를 수정할 때는 처음부터 전체 사이트를 바꾸려고 하기보다 특정 섹션 하나부터 수정하는 것이 좋습니다.

예를 들어,

• 버튼 하나 수정
• 카드 하나 수정
• 제목 크기 수정
• 모바일 여백 수정

처럼 작은 단위로 테스트하면서 적용하면 오류를 줄일 수 있습니다.

그리고 가능하면 클래스명 앞에 고유한 이름을 붙이는 것이 좋습니다.

예를 들어,

.custom-box

보다는

.motsa-custom-box

처럼 작성하면 다른 위젯과 충돌할 가능성이 줄어듭니다.

---

 

12. 마무리

아임웹 CSS 적용은 처음에는 어렵게 느껴질 수 있지만, 구조만 이해하면 생각보다 간단합니다.

핵심은 아래 3가지입니다.

1. 수정할 대상을 정확히 찾기
2. 원하는 디자인 속성을 작성하기
3. PC와 모바일을 함께 확인하기

CSS를 잘 활용하면 아임웹 기본 기능만으로는 부족했던 디자인을 훨씬 더 세밀하게 조정할 수 있습니다.

특히 브랜드 느낌을 살리거나, 문의 전환을 높이는 홈페이지를 만들고 싶다면 CSS 커스텀은 매우 유용한 방법입니다.

직접 적용이 어렵거나, 내 홈페이지에 맞는 CSS 커스텀이 필요하다면 전문가에게 맡기는 것도 좋은 선택입니다.

 

믓아 스튜디오