테두리 넣기: 두께·스타일·색상

카드나 이미지에 얇은 선을 둘러 구역을 나누거나, 점선으로 쿠폰 같은 느낌을 내고 싶을 때가 있습니다. 편집기에서는 요소 하나에 테두리를 두께, 스타일, 색상 세 가지 값으로 정합니다. 이 글에서는 테두리 항목의 위치와 세 값을 바꾸는 방법, 이미지에 적용하는 방법을 살펴봅니다. 모서리를 둥글게 하는 값과 박스 그림자는 별도 글에서 다룹니다.

1. 테두리는 어디에 있나요

테두리 항목은 바로 보이지 않고 고급 설정 (정렬 · 테두리 · 그림자 · 배치) 안에 접혀 있습니다. 두 곳에서 열 수 있습니다.

• 컨테이너는 선택 테두리 오른쪽의 점 세 개를 눌러 도구 막대를 펼친 뒤 레이아웃 / 간격 아이콘을 누릅니다. 열리는 창을 아래로 내리면 고급 설정 줄이 있습니다.
• 속성 패널의 스타일 탭 아래쪽에도 같은 고급 설정 줄이 있습니다. 줄을 누르면 펼쳐집니다.

펼치면 정렬, 스타일 다음에 테두리 (Border)가 있고 바로 아래에 박스 그림자가 이어집니다. 속성 패널을 여는 방법은 속성 패널 구조를 다룬 글에서 안내합니다.

처음에는 두께가 0이어서 선이 보이지 않습니다. 세 값은 한 요소의 네 변에 똑같이 적용되며, 한 변만 다르게 정하는 항목은 없습니다. 값을 바꾸는 순서는 정해져 있지 않고, 어느 값을 먼저 바꿔도 결과 화면에 바로 반영됩니다.

2. 두께 정하기

두께는 슬라이더를 끌거나 오른쪽 칸에 숫자를 써서 정합니다. 범위는 0부터 20px이고, 값은 바로 편집 화면에 반영됩니다. 0으로 돌리면 선이 사라집니다.

3. 스타일 고르기

스타일 목록에는 다섯 가지가 있습니다.

• solid: 실선입니다. 가장 무난합니다.
• dashed: 짧은 선이 간격을 두고 이어지는 점선입니다.
• dotted: 동그란 점이 이어지는 점선입니다.
• double: 선이 두 줄로 그려집니다. 두께가 어느 정도 있어야 두 줄로 구분됩니다.
• none: 두께와 상관없이 테두리가 없어집니다. 다시 선을 보이려면 다른 스타일을 고릅니다.

4. 색상 정하기

색상 줄에는 색 견본과 코드 입력칸이 나란히 있습니다. 입력칸에 #4A3094처럼 색 코드를 쓰면 바로 바뀌어 브랜드 색을 그대로 맞출 수 있습니다.

색 견본을 누르면 색상 선택 창이 열립니다. 색 영역과 색상 막대를 끌어 고르거나, 코드를 입력하거나, 아래에 늘어선 견본 중 하나를 눌러 고를 수 있습니다.

5. 이미지에도 적용하기

이미지에도 같은 항목이 있습니다. 이미지를 고른 뒤 점 세 개를 눌러 도구 막대를 펼치고 톱니바퀴(요소 설정 열기)를 누릅니다. 열리는 창 맨 아래의 전체 속성 패널 열기 버튼으로 속성 패널을 연 뒤 스타일 탭의 고급 설정에서 테두리 (Border)를 정합니다. 같은 탭의 모서리 반경을 함께 올리면 둥근 액자 같은 모양이 됩니다.

6. 한 번에 따라 해 보기

1. 테두리를 넣을 카드를 고릅니다.
2. 속성 패널의 스타일 탭에서 고급 설정을 펼치고 테두리 (Border)까지 내려갑니다.
3. 스타일에서 solid를 고르고 두께를 2나 3으로 맞춥니다.
4. 색상 입력칸에 브랜드 색 코드를 씁니다.
5. 다른 요소를 눌러 선택선을 치운 뒤 모양을 확인하고, 마음에 들면 위쪽 저장을 누릅니다.

7. 이렇게 활용해 보세요

• 배경색이 연한 카드에 브랜드 색 실선을 2px 정도 두르면 구역이 또렷해집니다.
• 점선(dashed)을 쓰면 쿠폰이나 오려 쓰는 상자 같은 느낌을 낼 수 있습니다.
• 이미지에 굵은 선과 모서리 반경을 함께 주어 액자처럼 보이게 할 수 있습니다.
• 같은 역할의 카드는 두께, 스타일, 색상을 똑같이 맞추면 페이지가 정돈되어 보입니다.

8. 알아 두실 점

• 값은 고른 요소 하나에만 적용됩니다. 같은 모양의 카드가 여럿이면 카드마다 같은 값을 넣어 맞춥니다.
• 선택한 요소에는 편집용 보라색 선택선이 덧씌워집니다. 정한 테두리의 실제 모습은 다른 요소를 고른 상태에서 확인하세요.
• 바꾼 값은 위쪽 저장 버튼을 눌러야 저장됩니다. 저장한 뒤 편집기를 다시 열어도 두께, 스타일, 색상이 그대로 열립니다.

안쪽 여백과 간격은 여백을 다룬 글에서, 모서리 반경은 모서리 반경을 다룬 글에서, 박스 그림자는 별도 글에서 이어서 다룹니다.