Mozilla 한국 커뮤니티

이상한 질문을 계속 올리게 되는군요..

css 를 쓰다가 원하는대로 모양이 안나와서 포기하기 전에 질문이라도 한 번 해봅니다..
보통 이런 식으로 배경 그림을 우측에 정렬한 다음 가로로 반복되게 할 수가 있는데... 이 때의 repeat-x 는 가로로 반복되는 것을 뜻합니다. 즉,

|<-block 끝 || (그림 좌측 | 그림 중앙 | 그림 우측) || block 끝->|

이렇게 있을 때 그림 우측 부분이 오른쪽 block 끝에 붙은 다음에 가로로 반복이 되는데요. 그래서 tmp.png 그림이 가로로 길 경우, 그림 좌측 부분이 우측에 붙어서 반복되어 나옵니다. 그런데 제가 하려는 것은, 그림 우측 부분을 고정시켜 놓은채로, 그림 좌측 부분이 왼쪽으로 계속 늘어나는 것을 하려고 하는데요.. 이게 안됩니다 -_-;; 이짓저짓 다 해보고 있는데..

적고보니 그림이 없으면 이해 불가 일 거 같아서 그림 첨부합니다.
(그림을 올릴 수가 없네요.. 좀 불편;;)

http://theyell.x-y.net/tmp/repeat-left.png

여기서 파란색 선 부분이 오른쪽 끝으로 가서 정렬되고,
붉은색 선 부분을 왼쪽 경계의 끝으로 정해서 붉은색 선<->초록색 선까지 사이를
반복시켜서 늘릴려고 합니다. ...설명이 이해가 되려나요;

css2의 clip 속성을 사용해서 이리저리 해봤는데 도저히 안되더군요. 한계입니다..
흠 너무 복잡하게 구현을 하려는건지... 되겠다 싶어서 시도해본 것인데 될 듯 하면서 안되더군요.

굳이 저렇게 하려는 이유는.. 이미지를 쪼개도 되지만, 안 쪼개고 통짜 이미지를 css 의 기교만으로 해볼려고 하기 때문입니다. 이게 되면 나름대로 유용히 써먹을 수 있을 듯 해서요 ^^; 사실 css 강좌 적을 때 이걸 한 파트로 넣을려고 했는데 막상 잘 안되니 서글픕니다.. 흙.

정리하면, repeat-x 속성을 좌측 방향으로 반복되게 할 수는 없는가 하는 점.
그리고 clip 속성을 어떻게 잘 조합해서 좌측으로만 반복될 수는 없는가 하는 점.
이런 걸로 고민해 보신 분 같이 해결해 보아요~

좌측과 우측은 각각의 DIV를 이용하면 가능한데, 이미지의 녹색과 빨강 사이 부분만을 가로로도 반복시키는 중앙 부분은 CSS만으론 불가능 합니다.
자바스크립트를 써서, 현재 윈도우의 너비만큼 DIV를 반복 생성하는 방법을 쓰면 가능할듯 하긴 합니다만...

그런데 쓰고 보니 방향 지정과는 별 상관없는 것이라 제가 질문을 제대로 이해한 건지 모르겠군요.

이리저리 해보다가 너무 크리티컬(모라고 해야할지 모르겠네요)한 방법을 시도하려는 걸 깨닫고 종래의 방식을 쓰기로 타협했습니다. css 만으로는 불가능하더군요. 혹 css3 에 그러한 지정이 가능한지는 모르겠지만, 그게 되려면 적어도 2년 이상은 지나야 가능할테고 -_-;

js 없이 순수 css 로만은 안된다는 걸 어제 아침에 몸소 체험 했습니다. 결국 잘라 쓰는 수 밖에 없겠네요.. 통 이미지 그대로 css 조작만으로 레고 블럭을 구현하겠다는 욕심은 물거품으로... ㅡㅜ

CSS3 는 됩니다.

아쉽죠...