아임웹 동영상 위젯 모서리 둥글게 (코드)

1. 시작하며

아임웹으로 홈페이지를 만들다 보면 다양한 위젯을 배치하게 됩니다.
그중에서도 동영상 위젯은 시각적인 정보 전달에 효과적인 요소인데요, 이때 다른 요소들과 조화롭게 보이기 위해서는 디자인 디테일이 매우 중요합니다.

예를 들어 이미지나 버튼은 둥글게 처리했는데, 동영상만 각져 있다면 화면의 전체적인 느낌이 어색해질 수 있습니다.
그래서 이번 글에서는 아임웹 동영상 위젯의 모서리를 둥글게 설정하는 방법을 소개드리고자 합니다.

Tip: 이런 작은 디테일들이 모여 하나의 브랜드 감성을 완성합니다.
세심한 스타일 조정은 방문자의 경험을 한층 높여줍니다.

우선 아임웹 디자인 모드에 접속한 뒤, 동영상을 삽입하고 싶은 위치로 이동합니다.
위젯 추가를 통해 다양한 위젯 목록에서 ‘동영상’ 위젯을 선택합니다.

위젯을 드래그하여 원하는 위치에 배치하면 기본적으로 video 태그가 생성됩니다.

위젯이 추가되었다면, 위젯을 마우스 우클릭을 통해 설정 창을 엽니다.
이곳에서 유튜브 혹은 비메오 주소를 입력할 수 있으며, 자동 재생 여부, 반복 설정, 음소거 여부 등 세부 옵션을 조정할 수 있습니다.

설정을 마친 후 저장 버튼을 누르면, 홈페이지 상에서 해당 동영상이 출력됩니다.

💡

참고
동영상 위젯에서 유튜브(Youtube) 혹은 비메오(Vimeo) 설정이 궁금하다면 아래의 글을 참고해 보세요!

이제 외형을 커스터마이징할 차례입니다.
아임웹 디자인 모드에서는 ‘코드 위젯’을 활용해 직접 CSS를 삽입할 수 있습니다.
해당 위젯을 적절한 위치에 배치하고 아래 코드를 붙여넣어 주세요.

.img_box.holder {
    border-radius: 20px !important;
}

이 코드는 모서리를 20px만큼 둥글게 처리하는 역할을 합니다.

만약, 한 페이지에 여러 개의 동영상 위젯이 배치되어 있고 각각 다른 스타일을 적용하고 싶은 경우 아래 코드를 활용하세요.

#위젯ID .img_box.holder {
    border-radius: 20px !important;
}

Tip: border-radius를 50%로 설정하면 원형 프레임처럼 보이는 효과도 낼 수 있습니다.
썸네일 디자인에 활용해보세요.

코드를 추가하고 저장을 누른 후에는 반드시 미리보기 모드에서 적용 여부를 확인해야 합니다.
특히 반응형 디자인이 중요한 요즘, PC뿐만 아니라 모바일 환경에서도 디자인이 깨지지 않는지 살펴보는 것이 좋습니다.

화면 크기에 따라 스타일이 달라질 수 있으므로, media query를 활용한 추가 설정도 고려해 보세요.

지금까지 아임웹 동영상 위젯의 모서리를 둥글게 만드는 방법을 단계별로 안내해드렸습니다.
단순한 코드 한 줄로도 홈페이지 전체 분위기를 부드럽게 바꿀 수 있다는 점에서 매우 유용한 팁입니다.

* 아임웹 고객센터 문의 방법

* 아임웹 텍스트가 떠오르는 애니메이션 (코드)

* 아임웹 라이브 뱃지 만들기 (코드)