[잡담] 인장에 배경 넣기 ~총정리~

이번 글은 코드는 가능하면 적게 나오게,

그리고 딱 보면 알아볼 수 있도록 최대한 노력해서 써보겠습니다.

총 정리 한번 깔끔하게 해놓으면 질문주시는 분들한테 링크 드리기가 편할 것 같아서요. ㅎㅎ

일단 인장에 배경을 사용하는 방법을 알아볼게요.

배경은 색깔이 될수도 있고 이미지가 될수도 있겠죠?

여기서 알려드리는 팁은 html모드에서 작업하시는 것을 기본으로 해요.

html모드는 인벤토리 수정하실 때

에디터 오른쪽 위의 버튼을 누르시면 사용하실 수 있어요.

html이란, 웹페이지를 구성하는 코드라고 생각하시면 돼요.

사실 우리가 보는 웹페이지는 모두 html로 되어 있어요.

브라우저가 그 내용을 해석해서 좋게 보여주는 것이죠.

그러니까 이번에는 우리가 브라우저에게 난 이렇게 보여주고 싶어!라고 알려줍시다.

html과 태그는 엄연히 따지면 다르지만

이 글에서는 html와 태그를 구분하지 않을게요.

1. 인장 배경에 색깔 넣기

<div style="background-color: 색상;">

~인장내용~

</div>

~인장내용~에는 인장 검색기나 지금까지 받은 인장 짤들 같은 것을 태그로 넣으시면 돼요.

색상에는 red, blue, gray 같이 영어로 된 색상 이름이나,

#FF0, #F1AFCB와 같은 색상 코드가 들어갈 수 있어요.

색상 코드는 이 사이트 (클릭)를 이용하시면 쉽게 알아낼 수 있어요.

<div style="background-color: #F1AFCB;">

~인장내용~

</div>

이런식으로 사용하시면 돼요.

2. 인장 배경에 이미지 넣기

<div style="background-image: url('이미지주소');">

~인장내용~

</div>

이미지주소는 인벤에 올려져 있는 이미지에 우클릭 하시면 '주소 복사'라고 나오는 메뉴를 이용하시면 쉽게 알아낼 수 있어요.

<div style="background-image: url('https://upload2.inven.co.kr/upload/2015/03/23/bbs/i13033215906.png');">

~인장내용~

</div>

이런 식으로 사용하시면 돼요.

3. 배경을 적용했는데 보이지 않아요! / 배경이 잘려서 나와요!

기본적으로 위에 알려드린 태그는 ~인장내용~의 길이에 따라 자동으로 세로 길이가 늘어나게 되어 있어요.

인장 내용이 없거나 짧으면 배경도 그만큼만 나오니까 보이지 않거나 잘려서 나오겠죠?

이 문제를 해결하려면 인장 배경에 내부 여백을 주면 돼요.

이게 무슨 말이냐면요.

배경 내용을 일부러 늘려준다는 뜻이에요.

그림으로 설명해드릴게요.

그림처럼 배경 이미지가 정확히 인장 내용만큼만 나오는 상태예요.

여기서 배경 상단에 내부 여백을 주게 되면

위 그림처럼 배경 이미지가 보이는 크기가 늘어나요.

흔히 엔터를 쳐서 공간을 만들어서 배경을 나오게 하시잖아요.

그 공간을 엔터가 아니라 정말로 빈 공간을 만들어 주는 거예요.

내부 여백은 다음과 같이 줄 수 있어요.

<div style="background-image: url('이미지주소'); padding-top: 상단여백; padding-bottom: 하단여백;">

~인장내용~

</div>

상단 또는 하단 둘 중 하나만 여백을 주시려면

padding-top: 상단여백; 이것만 사용하시면 상단 여백만,

padding-bottom: 하단여백; 이것만 사용하시면 하단 여백만 주게 돼요.

4. 앗! 배경을 넣었는데 이미지가 반복돼서 여러번 나타나요!

네. 기본적으로 배경은 반복돼서 나타나도록 되어있어요.

한번만 나타나게 하시려면

<div style="background-image: url('이미지주소'); background-repeat: no-repeat;">

~인장내용~

</div>

이렇게 하시면 돼요!

인장 배경에 이미지 넣는 방법에서

이미지를 반복시키지 않는다! 라는 내용이 추가됐을 뿐이에요!

5. 배경 이미지가 너무 커서 잘려요. 어떻게 하죠?

배경 이미지의 크기를 조절하는 방법이 있긴 있어요.

하지만 브라우저마다 그 방법이 작동이 될 때가 있고 안될 때가 있어요.

그렇기 때문에 배경으로 쓰실 이미지 자체의 크기를 줄여서 쓰시기 바랍니다.

6. 글을 읽다보니 궁금해요. ;는 왜 쓰는 거죠?

;는 스타일끼리 구분해주는 문자예요.

예를들어, background-color: red padding-top: 10px 이렇게 가운데에 ;가 없이 적어버리면

브라우저는 red padding-top 이라는 색상을 배경에 넣으려고 마구 찾아다니다가 지쳐서 색상을 적용하지 못할 거예요.

맨 뒤에 ;를 붙이는 건 취향인데요. 굳이 붙이지 않아도 돼요.