묻고답하기
레이아웃 코딩 기법 질문입니다.
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
감사합니다~ 근데 아래쪽 스샷이 안보여요...
| 글쓴이 | 제목 | 최종 글 |
|---|---|---|
| XE | 공지 글 쓰기,삭제 운영방식 변경 공지 [16] | 2019.03.05 by 남기남 |
| Alice-N.m | 메뉴 네비게이터에 대해 질문드립니다ㅠ [1] | 2010.09.21 by 앙띠2 |
| reform |
페이지수정은 언제나 어려워요~~
[1]
 | 2010.09.21 by 앙띠2 |
| 블랙데뷜 | xe 초보 - 나모 웹 에디터 프로그램? [2] | 2010.09.21 by 앙띠2 |
| ESSB | 인덱스 질문입니다. [1] | 2010.09.21 by 스카이피아 |
| sbshs77 | XE문제는 아닌데요.. 라우터 문제;; | |
| 박노열 |
쉬운설치에서 삭제의 의미는 ?
[2]
| 2010.09.21 by 스카이피아 |
| 김미죵 | 스킨을 바꾸려는데요! [1] | 2010.09.21 by LutZ |
| 스카이피아 |
레이아웃 코딩 기법 질문입니다.
[2]
| 2010.09.21 by hhgyu |
| jjoohee | 등록 오류 메시지가 자꾸 뜨네요 [1] | 2010.09.21 by LutZ |
| tui |
위젯 페이지 질문입니다.
[1]
| 2010.09.21 by LutZ |
| 오토썬 | 홈페이지연결질문.. http://??.co.kr 로접속하면 http://??.co.kr/xe 로연결되는방법 [2] | 2010.09.21 by 휘즈 |
| 스카이피아 | 같은 레이아웃을 각각 생성했을때 이미지 로드 [1] | 2010.09.21 by ForHanbi |
| my5082 | Xe Official v2 Layout [1] | 2010.09.21 by ForHanbi |
| tui |
위젯 아이콘 질문 드립니다.
[1]
| 2010.09.21 by ForHanbi |
| 도라란 | 글 작성후 작성한 글이 아닌 목록으로 이동하게 하고 싶습니다. [1] | 2010.09.21 by hhgyu |
| DaKi | iframe 자동 길이 조절에 대해 질문.... | |
| ESSB |
[요청하신 모듈을 찾을 수 없습니다.]오류 질문
[2]
| 2010.09.21 by 휘즈 |
| tui | 권한 질문입니다. | |
| 김재현573 | 가상 서버 호스팅(VPS) 뭐가 좋을까요?? | |
| 슈퍼제로보드 | index 페이지 말인데요 [1] | 2010.09.21 by 스카이피아 |
그리고 빽그라운드 포지션 부분은background-position:right -106px; 이 말은
불러온 백그라운드 이미지에서 오른쪽 그리고 밑으로 106px로 내려가서( 정확히 표현하면 위로 106px만큼 끌어 올려서) 시작하라는 이야깁니다.
이제 이미지가 보여서 ^^&위 이미지를 보자면 4번째 이미지 정도 되것네요. 그냥 right top을 사용해 버리면 가장 위의 네모 이미지에 걸리는 상황이고 4번째 이미지를 사용하기 위해서는 이미지를 106px끌어 올려서 백그라운드 이미지를 잡으라는 말입니다.