안녕하세요 하나씩 차근차근 모든 분들과 함께하는 워드프레스 성장 노트, 짜근페이퍼입니다.
제 지인 중 한분이 워드프레스로 회사 홈페이지를 제작하다가, 설정을 잘 모르겠다는 부분이 있어서 전화를 붙들고 5분간 상세하게 설명을 하시더라구요… 사실 단 한마디만 해도 이해 할 수 있는 내용이었는데, 용어에 서투른 분들이 본인이 만들고 싶은 것을 설명하다보면 통화가 길어지는 일이 많이 있습니다.
제 지인이 만들고 싶은건 말 그대로 ‘대각선 둥근 모서리’ 만들기 영어로는 Diagonal Rounded Corners라고 합니다. 글로 하면 이해가 잘 안되는 분들도 있으실 테니 아래 이미지를 참고하세요.
위에 이미지를 보면 완전하게 이해하실 수 있죠, 지인의 요구를 정리하면, 사진을 이미지 수정 프로그램으로 수정하지 않고, 왼쪽 상단과 오른쪽 하단을 둥글게 만들고 싶다였습니다. Elementor를 잘 다루시는 분들은 큰 어려움이 없지만, 처음 접하시는 분들은 정말로 이런 기능이 될까 하는 의문이 들 수 있을 것 같습니다.
자 그럼 지금부터 초보자 분들을 위해 Elementor를 이용해 이미지를 수정없이 대각선 둥근 모서리를 만드는 방법을 알려드리겠습니다.
이미지 대각선 둥글게 변형하기
해당 기능을 하고 싶은 분들이라면, 기본적인으로 이미지 위젯 추가, 이미지 선택 같은 완전 기본적인 내용은 다 하실 수 있다고 생각하기 때문에, 이 내용에서는 다루지 않겠습니다.
다음 그림과 같이 대각선 둥글게 변경하기 위한 이미지를 선택하고, 이미지 스타일 변경을 선택합니다. 그리고 좌측 메뉴 하단에 있는 ‘테두리 반경’에 있는 ‘값을 함께 연결’ 부분을 클릭하여 해제 합니다. (위 이미지 참조)
이미지 반경 값에 각자 맞는 이름은 위 이미지와 같이 좌측 상단 코너는 “상단”, 우측 상단 코너는 “오른쪽”, 좌측 하단 코너는 “왼쪽”, 우측 하단 코너는 “하단”으로 각각 표기가 되어 있습니다.
자 그럼 처음 제가 대각선 둥근 모서리가 반영된 이미지를 샘플로 보여 드렸는데, 해당 설정에 대한 값은 다음과 같습니다.
| 상단 | 오른쪽 | 하단 | 왼쪽 |
|---|---|---|---|
| 100 | 0 | 100 | 0 |
둥글기 수치는 개개인이 생각하는 수치를 넣으시면 됩니다. 이미지 크기에 따라 둥글기 수치는 조정이 필요합니다.
오늘은 간략하게 제 지인이 전화로 질문한 내용을 정리해서 가이드를 드렸습니다.
복잡한 난이도는 아니지만, 세세한 설정을 하지 못하시는 분들이 있거나 또는 도움이 필요하시면 언제든지 짜근페이퍼 (zzagnpaper@zzagnpaper.com)으로 문의 주시면 제가 알고 있는 한도내에서 알려 드리도록 하겠습니다.
지금까지 하나씩 차근차근, 모든 분들과 함께하는 워드프레스 성장 노트, 짜근페이퍼였습니다.
