| 틀:background-image | |
|---|---|
사용문서
|
|
넘겨주기
|
이동하기
|
이 틀은 {{bg-image}}, {{bg-img}}(으)로도 사용할 수 있습니다.
설명
{{bg-img|파일명|반복 횟수(선택)|추가 스타일(선택)}}
미디어위키 문법에서는 background-image: url(""); 구문을 지원하지 않기 때문에 꼼수를 이용해 비슷하게나마 기능을 구현한 틀입니다.
사용법
틀 제작자는 보급형 틀을 만들 때 "최대한 쉽고 간편한 사용법"이 가능하도록 하는 것이 제1의 목표인데, 이 틀은 안타깝게도 기술력의 한계로 사용법이 다소 복잡합니다. 그러니 아래 사용법을 반드시 숙지하세요.
- 전제 조건
- 틀을 감싸고 있는 또 다른 박스가 있어야 한다.
보통<div>로 많이 쓰지만 테이블에도 쓸 수 있습니다. - 틀을 감싸고 있는 박스의 style에 다음 구문이 있어야 한다.
다음 구문이 하나라도 없거나 잘못되어 있다면 틀이 정상 작동하지 않습니다. 또한 이 때문에 position과 z-index 속성은 사용할 수 없는 셈입니다.position: relative;z-index: 1;
- 틀을 감싸고 있는 박스의 style에 다음 구문이 있으면 안 된다.
반대로 있어서는 안 되는 구문도 있습니다. 틀의 원리가 박스 안에 이미지를 맞춰 끼우는 방식이므로 박스 자체에 배경색이 있다면 당연히 적용되지 않습니다.background-colorbackground-image
- 틀을 감싸고 있는 또 다른 박스가 있어야 한다.
즉 틀이 사용되는 가장 기본적인 위치는 다음과 같습니다.
<div style="position: relative; z-index: 1; background-color: 값; background-image: 값;">{{bg-img}}</div>
이 기본 구성만 지키면 div style=""에 다른 어떤 속성이 와도 상관없습니다.
아주 간단한 예시로 너비 100%에 회색 테두리를 가진 div 안에 틀을 사용해 파일:bg-marble.png를 배경 이미지로 넣어 보겠습니다. 안의 내용으로는 로렘 입숨을 넣겠습니다.
| 문법 | 결과 |
|---|---|
<div style="position: relative; z-index: 1; width: 100%; border: 1px solid gray; color: black;">{{bg-img|bg-marble}}{{로렘 입숨}}</div>
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
보다시피 잘 적용되었습니다. 하지만 틀을 감싸는 박스의 style에 특정 속성이 있다면 틀 안에서도 해주어야 하는 조치가 있습니다. 하위 문단들에서 설명하겠습니다.
주의: border-radius
가장 기본적인 예시에서 박스 style에 border-radius를 20px만큼 줘 보겠습니다.
| 문법 | 결과 |
|---|---|
<div style="position: relative; z-index: 1; width: 100%; border-radius: 20px; border: 1px solid gray; color: black;">{{bg-img|bg-marble}}{{로렘 입숨}}</div>
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
테두리를 둥글게 만드는 border-radius 속성에 따라 둥글어진 테두리에 여전히 각진 배경 이미지 모서리가 튀어 나왔습니다.
그렇다면 마찬가지로 배경 이미지, 즉 틀도 둥글게 만들어 주면 됩니다. 박스와 마찬가지로 |style=border-radius: 20px;을 입력합니다. 이 역시 박스에 적용한 숫자와 단위만큼 일치시키면 되겠습니다.
| 문법 | 결과 |
|---|---|
<div style="position: relative; z-index: 1; width: 100%; border-radius: 20px; border: 1px solid gray; color: black;">{{bg-img|bg-marble|style=border-radius: 20px;}}{{로렘 입숨}}</div>
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
잘 적용되었군요.
주의: 파일
먼저 이 틀로 넣은 배경 이미지가 삽입되는 방식을 알아야 할 필요가 있습니다. 틀을 감싸는 박스 안에서 배경 이미지는 반드시 100% 너비를 가지며, 원래의 가로세로 비율을 유지합니다. 이때 박스의 높이가 이미지보다 낮으면 박스 높이에 맞춰 이미지가 잘리고, 박스의 높이가 이미지보다 높으면 남는 부분에 똑같은 새로운 이미지가 반복됩니다.
가장 기본적인 예시에서 배경 이미지를 파일:bg-marble.png → 파일:세이넬 제국의 방패.png로 바꿔 보겠습니다. 배경 이미지로 적합한 이미지는 아니지만 직관적인 예시를 위해서입니다.
| 문법 | 결과 |
|---|---|
<div style="position: relative; z-index: 1; width: 100%; border: 1px solid gray; color: black;">{{bg-img|세이넬 제국의 방패}}{{로렘 입숨}}</div>
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
박스의 높이가 원본 이미지의 높이보다 높으므로 남는 부분에 똑같은 이미지가 반복되었습니다. 높이가 더욱 높다면 그만큼 더욱 반복됩니다. 이 최대 반복 횟수는 기본적으로 100회이며, 즉 변수로 반복 횟수를 조정하지 않는 한 설정된 이미지(정확히는 박스)의 너비에 따른 높이에서 반복 횟수를 곱한 값만큼의 높이보다 박스가 더 높다면 그 시점부터는 배경 이미지가 적용되지 않습니다. 물론 극단적으로 너비보다 높이가 낮은 이미지거나 극단적으로 내용을 많이 넣지 않는 한 그전에 서버 메모리 한계에 도달할 것입니다.
첨언하자면, 틀을 한 번 사용하는 것으로 실제로 보이는 박스에 이미지가 얼마나 반복되었든 문법상으로는 이미지가 100회씩이나 반복되어 있는 것이기 때문에 틀을 단 한 번 사용하는 것도 문서에 큰 부담을 줍니다. 다섯 번 정도 이상 사용한 문서는 다른 내용이 별로 없음에도 로딩이 다소 버벅임을 느끼실 겁니다.
그렇다면 반대로 이미지의 높이보다 박스의 높이가 낮다면 어떨까요?
| 문법 | 결과 |
|---|---|
<div style="position: relative; z-index: 1; width: 100%; border: 1px solid gray; color: black;">{{bg-img|세이넬 제국의 방패}}TEST</div>
|
TEST
|
이렇게 이미지의 넘치는 부분이 잘린 채 출력됩니다.
따라서 이 틀로 넣을 배경 이미지는 예시에서 사용한 파일:bg-marble.png처럼 잘리거나 반복되어도 어색하지 않을 만한 이미지가 적합합니다.
