이미지 위에 텍스트 오버레이 - imiji wie tegseuteu obeolei

아임웹 캠퍼스 총창 해준 | 2017 . 09 . 18

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

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

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

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

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

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

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

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

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

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

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

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

이미지(사진) 위에 글자(문장)가 겹쳐지게 표현하는 방법에 대해 알아보겠습니다.

마치 글자가 포함된 이미지를 만들어 사용하는 효과를 볼 수 있습니다.

배경 이미지는 동일하고 글자 내용이 매번 바뀌는 경우,

그럴때마다 새로 이미지를 만들어 줄 필요없이 이미지 위에 글자를 겹쳐 나타나게 하면 간단하게 해결 됩니다.

예) 후원금 알림 게시글 작성할때 감사의 배경이미지를 하나 만들어 놓고,

후원자의 이름과 후원금액만 정해진 위치에 표시 되도록 하면 매번 이미지를 만들 필요가 없어지게 됩니다.

style의 값들을 적당히 변경하여 원하는 위치에 원하는 형태의 내용을 표시할 수 있습니다.

원하는 적당한 위치를 지정하면 이 글이 그 위치에 나타남.

이미지 위에 겹쳐서 나타남.

</div>

원하는 적당한 위치를 지정하면 이 글이 그 위치에 나타남.

이미지 위에 겹쳐서 나타남.

</div>

.....

이 글이 도움이 되었기를 바랍니다. ^-^

공감♡ 클릭과 댓글은 글쓰기에 큰 힘이 됩니다.

관련 게시물