배경 색상/이미지 위에 텍스트를 추가하는 방법

  아임웹 연구소 소장 해준  |  2017 . 09 . 18

시작에 앞서
텍스트 위젯은 언뜻 보면 텍스트만을 입력하기 위한 위젯처럼 보입니다. 그러나 이는 다릅니다. 텍스트 위젯은 잘 활용하면 정말 다양한 응용이 가능합니다. 오늘은 그 응용법 중 하나를 알려드리고자 합니다.

그건 바로 텍스트 위젯 배경에 색상 또는 이미지를 추가하고, 텍스트 배경의 모서리를 둥글게 만드는 방법입니다. 본 꿀팁의 예시는 아래 링크에서 확인해보실 수 있습니다.

https://imwebstarteredu.imweb.me/text-widget-bg





1단계, 텍스트 위젯 삽입 후 글자 넣기
[위젯 추가] 버튼을 클릭해, [텍스트 위젯]을 하나 추가합니다.





2단계, 텍스트 위젯 설정 창 켜기
추가한 텍스트 위젯의 설정을 변경하기 위해, 설정 창을 열어야 합니다. 아임웹에서 모든 위젯 및 섹션의 설정 창을 여는 방법은 같습니다.

아래 그림처럼, 편집하려는 위젯 위에 마우스 커서를 올리고, 마우스 [오른쪽] 버튼을 클릭한 다음 [설정]을 클릭해주세요.





3단계, 배경색/음영 컬러 바꾸기
설정 창이 열리면, 배경 항목의 [배경색/음영] 부분을 주목해주세요. 이 부분에 색상을 넣어주시면 됩니다. HEX 컬러 코드값을 입력하거나, 오른쪽 동그란 버튼을 클릭해 [컬러 팔레트]를 열어 색상을 선택할 수도 있습니다.

아래 그림에 설정 창 뒤를 보시면, 텍스트 위젯 배경이 노란색으로 바뀐 걸 확인하실 수 있습니다. :)





4단계, 여백 크기 조절하기
설정 창 [객체] 항목 오른쪽 끝에, 상하/좌우 여백 크기를 조절함으로써, 텍스트 주변 여백의 크기를 늘리거나, 줄일 수 있습니다. 저는 상하 여백을 64픽셀(px)로, 좌우 여백을 48픽셀(px)로 입력했습니다.





5단계, 설정 창 끄고, 확인하기
이제 텍스트 위젯 설정 창을 끄고, 확인해볼까요? 텍스트 영역 배경이 노란색으로 변경됐고, 상하/좌우 여백이 커진 것을 확인하실 수 있습니다.





6단계, 배경색 대신 배경 이미지 넣기
색상 대신 이미지를 넣는 것도 가능합니다. 아래 그림처럼 설정 창 [배경] 항목에서 색상값 대신 [이미지]를 넣어주시면 됩니다.





7단계, 배경 모서리 둥글게 만들기
아래 그림처럼 [배경] 항목에 [라운딩] 값을 입력해 텍스트 배경 영역의 모서리를 둥글게 만들 수 있습니다. 당연하지만 픽셀(px) 값이 커질 수록, 모서리도 더 둥글게 변합니다.



해준
배우고 익히고 나누는 | 해준씨 | 유용한 콘텐츠 마케팅 | 네이버 카페 '아임웹 연구소' 소장
jin@haejoon.com

아임웹 공식제휴사

아임웹은 페이팔, KG이니시스, 네이버페이, KCP 공식파트너입니다.