뱃지·카드 요소

"신규 오픈", "마감 임박" 같은 짧은 라벨이나, 강의·서비스를 하나씩 소개하는 네모난 상자는 랜딩 페이지에 자주 들어가는 요소입니다. 에디터에는 이 두 가지가 뱃지와 카드라는 이름으로 준비되어 있습니다. 이 글에서는 두 요소를 넣는 방법과 색·모서리·여백·그림자를 바꾸는 방법을 화면 순서대로 안내합니다. 글자를 고치는 일반적인 방법은 제목·텍스트 요소를 다루는 별도 글에서 설명합니다.

1. 뱃지와 카드는 어디에 있나요

왼쪽 레일의 요소 추가(+ 아이콘)를 누르면 요소 패널이 열립니다. 콘텐츠 카테고리에 버튼 다음으로 뱃지와 카드가 있습니다. 요소는 지금 선택해 둔 컨테이너 안에, 컨테이너 없이 섹션만 선택했다면 그 섹션의 맨 아래에 들어갑니다. 넣고 싶은 자리의 컨테이너나 섹션을 먼저 눌러 두세요.

2. 뱃지 넣기

뱃지를 누르면 뱃지 추가 창이 열립니다. 입력칸에는 "뱃지 텍스트"가 선택된 채로 들어 있으니 그대로 덮어 쓰면 되고, 아래 미리보기에서 모양을 바로 볼 수 있습니다. 삽입을 누르면 들어갑니다.

뱃지는 연보라색 배경에 보라색 글자, 둥근 알약 모양으로 들어갑니다.

3. 카드 넣기

카드는 입력 창 없이 누르는 즉시 들어갑니다. 연한 회색 배경, 얇은 테두리, 둥근 모서리의 상자 안에 "카드 제목"과 "카드 내용을 입력하세요."라는 안내 글이 담겨 있습니다. 카드는 들어간 영역의 가로 폭을 가득 채웁니다.

카드 안의 제목과 설명은 각각 독립된 텍스트라서, 글자를 한 번 눌러 고른 뒤 한 번 더 누르면 편집 상태가 되고 Esc로 끝납니다.

4. 뱃지 모양 바꾸기

뱃지를 누른 뒤 Esc로 글자 편집을 끝내면 툴바가 나타납니다. 톱니바퀴(요소 설정 열기)를 누르면 텍스트 설정 창이 열리고, 배경색에서 단색의 색상 칸에 색 코드를 입력해 배경을 바꿀 수 있습니다. 이 창에는 너비(전체 너비 (100%)와 자동, 뱃지의 기본값은 자동), 배경색(없음, 단색, 그라데이션과 투명도), 위치 이동 항목이 있습니다.

창 맨 아래 전체 속성 패널 열기를 누르고 스타일 탭으로 가면 더 많은 항목을 고칠 수 있습니다.

• 텍스트 색상: 글자색입니다.
• 폰트 크기: 글자 크기(px)입니다.
• 안쪽 여백: 글자와 가장자리 사이 간격입니다. 위·우·아래·좌를 따로 정할 수 있습니다.
• 모서리 반경: 값을 줄이면 알약 모양에서 네모에 가까운 모양이 됩니다.
• 고급 설정 안의 테두리: 두께, 스타일, 색상을 정합니다.

5. 카드 모양 바꾸기

카드는 글자가 아닌 안쪽 여백의 빈 곳을 누르면 카드 전체가 선택됩니다. 오른쪽 위의 점 세 개를 눌러 툴바를 열고 톱니바퀴를 누르면 컨테이너 설정 창이 열리며, 여기서 배경색을 바꿀 수 있습니다. 전체 속성 패널 열기의 스타일 탭에서는 다음을 고칩니다.

• 안쪽 여백: 상자 가장자리와 글 사이 간격입니다.
• 모서리 반경: 값이 클수록 모서리가 둥글어집니다.
• 고급 설정 안의 테두리와 박스 그림자: 테두리 색을 바꾸고, 그림자를 켠 뒤 부드러운, 보통, 강한, 떠있는 중에서 고릅니다.

모양을 다듬은 카드를 툴바의 요소 복제로 복제하면 같은 모양이 그대로 복사되므로, 글만 바꿔 여러 장을 만들 수 있습니다.

6. 이렇게 활용해 보세요

• 제목 위에 "신규", "추천" 같은 뱃지를 하나 두어 어떤 소식인지 먼저 알려 줄 수 있습니다.
• 강의나 서비스마다 카드를 하나씩 만들고, 제목에는 이름을, 설명에는 한 줄 소개를 적어 보세요.
• 뱃지와 카드의 색을 페이지의 대표 색에 맞춰 두면 한 페이지 안에서 통일감을 줄 수 있습니다.

7. 알아 두실 점

• 뱃지는 속성 패널에서 텍스트(<span>)로, 카드는 컨테이너(<div>)로 표시됩니다. 그래서 두 요소 모두 이미 있는 텍스트·컨테이너 요소와 같은 항목으로 다듬습니다.
• 바꾼 내용은 상단바의 저장을 눌러야 보존되며, 저장하고 에디터를 새로 열어도 색·모서리·여백이 그대로 유지됩니다.
• 카드를 고를 때 글자 위를 누르면 카드가 아니라 그 글자가 선택됩니다. 카드 자체를 고르려면 안쪽 여백의 빈 곳을 누르세요.

요소 패널 사용법과 툴바의 각 버튼, 속성 패널의 구조는 별도 글에서 이어서 다룹니다.