모서리 반경 바꾸기: 네 모서리 한꺼번에 또는 따로

카드나 이미지의 네모난 모서리가 딱딱해 보일 때가 있습니다. 모서리를 둥글게 하는 값이 모서리 반경(border-radius)이고, 편집기에서는 슬라이더 하나로 바꿀 수 있습니다. 이 글에서는 컨테이너·카드의 네 모서리를 한꺼번에, 또는 모서리마다 따로 바꾸는 방법과 이미지에서 쓰는 바로 쓰기 버튼을 살펴봅니다. 테두리와 그림자는 별도 글에서 다룹니다.

1. 모서리 반경은 어디에 있나요

바꿀 요소를 고르면 속성 패널의 스타일 탭에 모서리 반경 항목이 있습니다. 바깥 여백과 안쪽 여백 아래, 자식 간격 위에 놓여 있어서 고급 설정을 펼치지 않아도 바로 보입니다. 컨테이너는 선택 테두리 오른쪽에 나타나는 점 세 개를 눌러 도구 막대를 펼친 뒤 레이아웃 / 간격 아이콘을 눌러도 같은 항목이 있는 작은 창이 열립니다. 제목, 텍스트, 버튼을 골랐을 때도 스타일 탭에 같은 항목이 나옵니다.

2. 네 모서리를 한꺼번에 바꾸기

처음에는 전체 한 줄만 보입니다. 슬라이더를 끌거나 오른쪽 칸에 숫자를 쓰면 네 모서리가 같은 값으로 바뀌고, 편집 화면에는 바로 반영됩니다. 값의 범위는 0부터 200px입니다. 높이 200px인 카드에서 0, 16, 40, 100px로 바꿔 보면 아래와 같습니다.

카드 높이의 절반 이상으로 올리면 양쪽 끝이 반원 모양이 되어 알약처럼 보입니다. 슬라이더로 대략 모양을 잡은 뒤 숫자 칸에서 1px 단위로 다듬으면 편리합니다. 값을 0으로 돌리면 다시 각진 모서리가 됩니다.

3. 모서리마다 다르게 바꾸기

제목 줄 오른쪽에는 작은 아이콘 두 개가 있습니다. 마우스를 올리면 네 방향 같은 값과 상·우·하·좌 개별이라고 나옵니다. 개별을 누르면 한 줄이 네 줄로 펼쳐집니다. 줄 앞의 글자 대신 모서리 모양 아이콘이 붙어 있어 왼쪽 위, 오른쪽 위, 오른쪽 아래, 왼쪽 아래 순서로 어느 모서리인지 한눈에 알 수 있습니다.

한 모서리만 바꾸려면 개별을 누른 뒤 그 줄의 값만 고치면 됩니다. 나머지 세 줄은 그대로 남습니다. 왼쪽 위와 오른쪽 아래를 48px로 두고 나머지를 0으로 하면 대각선으로 둥근 카드가 됩니다. 왼쪽 위와 오른쪽 위를 40px로 하면 위쪽만 둥근 카드가 됩니다.

저장한 뒤 편집기를 다시 열어도 값이 그대로 유지됩니다. 네 모서리 값이 서로 다른 요소는 처음부터 개별 네 줄로 열립니다.

4. 이미지의 모서리

이미지를 고른 뒤 점 세 개를 눌러 도구 막대를 펼치고 이미지 아이콘을 누르면 창이 열립니다. 이 창에서 모양 탭을 선택하면 맨 위에 모서리 반경 슬라이더(0~200px)가 있고, 그 아래에 바로 쓰기 버튼 다섯 개가 있습니다.

• 없음: 모서리를 각지게 되돌립니다.
• 8px · 16px · 32px: 정해 둔 크기로 둥글게 합니다. 지금 적용된 값과 같은 버튼은 보라색으로 강조됩니다.
• 원형: 정사각형 이미지를 동그랗게 만듭니다.

같은 탭 아래쪽의 마스크 모양은 모서리 반경과 다른 기능이며 별도 글에서 다룹니다.

5. 이렇게 활용해 보세요

• 처음에는 전체 값으로 크기를 정하고, 한두 모서리만 다르게 하고 싶을 때 개별로 바꿔 보세요.
• 페이지의 카드와 버튼, 이미지를 비슷한 크기의 모서리로 맞추면 한 가족처럼 보이도록 정리할 수 있습니다.
• 정사각형으로 자른 인물 사진에 원형을 적용해 프로필 이미지처럼 쓸 수 있습니다.
• 화면 위쪽에 붙는 카드는 위쪽 두 모서리만, 아래쪽에 붙는 카드는 아래쪽 두 모서리만 둥글게 해서 다른 상자와 이어 붙인 느낌을 낼 수 있습니다.

6. 알아 두실 점

• 값은 고른 요소 하나에만 적용됩니다. 같은 모양의 카드가 여러 개라면 카드마다 같은 값을 넣어 맞춥니다.
• 컨테이너 슬라이더에서 값을 바꾸면 편집 화면에 곧바로 반영됩니다. 저장은 위쪽 저장 버튼으로 하십시오.
• 원형은 정사각형 이미지에서 가장 자연스럽습니다. 가로로 긴 사진이라면 이미지 크기를 정사각형에 가깝게 맞춘 뒤 적용해 보세요.

안쪽 여백과 자식 간격처럼 함께 쓰는 값은 여백을 다룬 글에서, 테두리와 박스 그림자는 별도 글에서 이어서 다룹니다.