묻고답하기
레이아웃 코딩 기법 질문입니다.
2010.09.21 11:17
안녕하세요~ 즐거운 명절에도 이러고 있습니다^^;;
다름아니라 코딩할때 어떤 방법으로 하는게 더 좋을지 궁금해서요...
예를들면 info.xml에서 설정 변경으로 메인페이지와 서브페이지를 설정할 수 있도록 할 때 어떤식으로 하는게 조금이라도 빠르고
트래픽에 유리할지가 궁금한데요.
첫번째, layout.html 안에 조건문으로 쭉 쓴다. : 이 방법의 경우 한번에 다 불러오게 되죠? 그래서... 두번째 방법을..
두번째, layout.html 안에 조건문으로 필요 페이지만 로드 한다.
<header_type">!--@if($layout_info->header_type == "1")-->
<div id="m_header">
<!--#include("./_mheader.html")-->메인
</div>
<!--@else if($layout_info->header_type == "2")-->
<div id="m_header">
<!--#include("./_mheader.html")-->서브
</div>
<!--@end--> 위 소스처럼 말이죠. 이 방법이 로드 속도나 트래픽에 유리할까요?? 다음 질문,
예를들어 위 이미지는 버튼의 백그라운드 이미지 입니다.
위 이미지를 css에서 만져주면 아래와 같이 출력이 되잖아요?
background-position:right -106px; 이 부분인거 같은데.... 잘 이해가 안되네요. 오른쪽 기준으로 -106px만큼 뿌려라 이런 내용인거 같은데
어떻게 원본 이미지의 왼쪽 부분이 출력 되는거죠??
<div id="m_header">
<!--#include("./_mheader.html")-->메인
</div>
<!--@else if($layout_info->header_type == "2")-->
<div id="m_header">
<!--#include("./_mheader.html")-->서브
</div>
<!--@end--> 위 소스처럼 말이죠. 이 방법이 로드 속도나 트래픽에 유리할까요?? 다음 질문,
예를들어 위 이미지는 버튼의 백그라운드 이미지 입니다.
위 이미지를 css에서 만져주면 아래와 같이 출력이 되잖아요?
background-position:right -106px; 이 부분인거 같은데.... 잘 이해가 안되네요. 오른쪽 기준으로 -106px만큼 뿌려라 이런 내용인거 같은데
어떻게 원본 이미지의 왼쪽 부분이 출력 되는거죠??댓글 2
-
ForHanbi
2010.09.21 11:47
-
스카이피아
2010.09.21 13:13
감사합니다. 또 막 궁금한게 생기네요..ㅠㅠ -
hhgyu
2010.09.21 11:48
CSS Sprite 기법을 말하시는 것 같네요참고해시면 좋을 것 같아서 사이트 주소 놓고 갈게요
http://codebuzz.net/15<div style="background: url("http://www.xpressengine.com/files/attach/images/122/448/143/019/1.jpg") no-repeat scroll 0% center transparent; width: 106px; height: 150px; float: left;"></div><div style="background: url("http://www.xpressengine.com/files/attach/images/122/448/143/019/1.jpg") no-repeat scroll center center transparent; width: 106px; height: 150px; float: left;"></div><div style="background: url("http://www.xpressengine.com/files/attach/images/122/448/143/019/1.jpg") no-repeat scroll right center transparent; width: 106px; height: 150px; float: left;"></div> <div style="float: left; width: 1024px;"> <div style="background: url("http://www.xpressengine.com/files/attach/images/122/448/143/019/1.jpg") no-repeat scroll 0% 0% transparent; width: 106px; height: 150px;"></div><div style="background: url("http://www.xpressengine.com/files/attach/images/122/448/143/019/1.jpg") no-repeat scroll center center transparent; width: 106px; height: 150px;"></div><div style="background: url("http://www.xpressengine.com/files/attach/images/122/448/143/019/1.jpg") no-repeat scroll right center transparent; width: 106px; height: 150px;"></div></div>
라운드 박스 이미지를 교체 하셨네요 .............
-
스카이피아
2010.09.21 13:12
감사합니다~ 근데 아래쪽 스샷이 안보여요...
그리고 빽그라운드 포지션 부분은background-position:right -106px; 이 말은
불러온 백그라운드 이미지에서 오른쪽 그리고 밑으로 106px로 내려가서( 정확히 표현하면 위로 106px만큼 끌어 올려서) 시작하라는 이야깁니다.
이제 이미지가 보여서 ^^&위 이미지를 보자면 4번째 이미지 정도 되것네요. 그냥 right top을 사용해 버리면 가장 위의 네모 이미지에 걸리는 상황이고 4번째 이미지를 사용하기 위해서는 이미지를 106px끌어 올려서 백그라운드 이미지를 잡으라는 말입니다.