Company 테마 PC 메인 슬라이딩 이미지 수정 예
theme/company/img
이미지 : 1444 × 647 px
theme/company/css/default.css
[code]#main_bn li.bn_bg1{background:url(../img/Hashima_Island_01.jpg) no-repeat 50% 50%; background-size: cover;display: table;-ms-filter: sizingMethod='scale' property}
#main_bn li.bn_bg2{background:url(../img/Hashima_Island_02.jpg) no-repeat 50% 50%; background-size: cover;display: table;-ms-filter: sizingMethod='scale' property}
#main_bn li.bn_bg3{background:url(../img/Hashima_Island_03.jpg) no-repeat 50% 50%; background-size: cover;display: table;-ms-filter: sizingMethod='scale' property}
#main_bn li.bn_bg4{background:url(../img/Hashima_Island_04.jpg) no-repeat 50% 50%; background-size: cover;display: table;-ms-filter: sizingMethod='scale' property}[/code]
'bg1' 소스를 복사해서 아래에 삽입하고, 연번과 이미지 파일명을 수정해주는 방식입니다.
theme/company/index_head.php
[code] <div id="main_bn">
<ul class="bn_ul">
<li class="bn_bg1">
<div class="bn_wr">
<div class="bn_txt">
<h2>Hashima Island <br></h2>
<p>Native name: 端島<br>Nickname: Battleship Island</p>
</div>
</div>
</li>
<li class="bn_bg2">
<div class="bn_wr">
<div class="bn_txt">
<h2>Hashima Island <br></h2>
<p>Native name: 端島<br>Nickname: Battleship Island</p>
</div>
</div>
</li>
<li class="bn_bg3">
<div class="bn_wr">
<div class="bn_txt">
<h2>Hashima Island <br></h2>
<p>Native name: 端島<br>Nickname: Battleship Island</p>
</div>
</div>
</li>
<li class="bn_bg4">
<div class="bn_wr">
<div class="bn_txt">
<h2>Hashima Island <br></h2>
<p>Native name: 端島<br>Nickname: Battleship Island</p>
</div>
</div>
</li>
</ul>
<div class="bn_btn">
<a href="#" class="unslider-arrow prev">Previous slide</a>
<a href="#" class="unslider-arrow next">Next slide</a>
</div>
</div>[/code]
전부 'bg1'으로 동일하게 되어있는 것을 연번을 수정하고, 내용도 달리하세요.
(저는 귀찮아 동일한 내용으로 했습니다만)
속도는 바로 아래의 스크립트 소스에서 적절히 조절하세요.
그리 부드럽게 되지는 않네요.
이미지 : 1444 × 647 px
theme/company/css/default.css
[code]#main_bn li.bn_bg1{background:url(../img/Hashima_Island_01.jpg) no-repeat 50% 50%; background-size: cover;display: table;-ms-filter: sizingMethod='scale' property}
#main_bn li.bn_bg2{background:url(../img/Hashima_Island_02.jpg) no-repeat 50% 50%; background-size: cover;display: table;-ms-filter: sizingMethod='scale' property}
#main_bn li.bn_bg3{background:url(../img/Hashima_Island_03.jpg) no-repeat 50% 50%; background-size: cover;display: table;-ms-filter: sizingMethod='scale' property}
#main_bn li.bn_bg4{background:url(../img/Hashima_Island_04.jpg) no-repeat 50% 50%; background-size: cover;display: table;-ms-filter: sizingMethod='scale' property}[/code]
'bg1' 소스를 복사해서 아래에 삽입하고, 연번과 이미지 파일명을 수정해주는 방식입니다.
theme/company/index_head.php
[code] <div id="main_bn">
<ul class="bn_ul">
<li class="bn_bg1">
<div class="bn_wr">
<div class="bn_txt">
<h2>Hashima Island <br></h2>
<p>Native name: 端島<br>Nickname: Battleship Island</p>
</div>
</div>
</li>
<li class="bn_bg2">
<div class="bn_wr">
<div class="bn_txt">
<h2>Hashima Island <br></h2>
<p>Native name: 端島<br>Nickname: Battleship Island</p>
</div>
</div>
</li>
<li class="bn_bg3">
<div class="bn_wr">
<div class="bn_txt">
<h2>Hashima Island <br></h2>
<p>Native name: 端島<br>Nickname: Battleship Island</p>
</div>
</div>
</li>
<li class="bn_bg4">
<div class="bn_wr">
<div class="bn_txt">
<h2>Hashima Island <br></h2>
<p>Native name: 端島<br>Nickname: Battleship Island</p>
</div>
</div>
</li>
</ul>
<div class="bn_btn">
<a href="#" class="unslider-arrow prev">Previous slide</a>
<a href="#" class="unslider-arrow next">Next slide</a>
</div>
</div>[/code]
전부 'bg1'으로 동일하게 되어있는 것을 연번을 수정하고, 내용도 달리하세요.
(저는 귀찮아 동일한 내용으로 했습니다만)
속도는 바로 아래의 스크립트 소스에서 적절히 조절하세요.
그리 부드럽게 되지는 않네요.
댓글 9개
10년 전
정말 감사합니다~~~덕분에 도움이 되었습니다~~~^^
10년 전
팁, 고맙습니다. 모바일 버전에서는 적용이 안되는 것인가요?
10년 전
http://sir.co.kr/g5_tip/3051
10년 전
메인 이미지 사이즈를 고정하고 싶습니다. 방법이 없을까요. 아무리해도 안되서요 ...,
현재 이미지 사이즈가 1033 * 761 픽셀입니다. 브라우저 및 모니터 해상도에 따라
이미지가 커졌다가 작아졌다 해서 도움을 청합니다.
현재 이미지 사이즈가 1033 * 761 픽셀입니다. 브라우저 및 모니터 해상도에 따라
이미지가 커졌다가 작아졌다 해서 도움을 청합니다.
초록물고기
10년 전
감사합니다.
7년 전
찾던 내용인데... 팁 감사합니다.
WoodslabNet
7년 전
너무 감사합니다. 잘 사용하겠습니다.
무아와연기
6년 전
좋은 자료 감사합니다.
무아와연기
6년 전
좋은 자료 감사합니다.
게시판 목록
그누보드5 팁자료실
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 공지 | 3년 전 | 4429 | ||
| 2334 | 2년 전 | 3697 | ||
| 2333 | 2년 전 | 2064 | ||
| 2332 |
swallow
|
2년 전 | 1423 | |
| 2331 | 2년 전 | 2504 | ||
| 2330 | 2년 전 | 3448 | ||
| 2329 |
welcome
|
2년 전 | 2128 | |
| 2328 | 2년 전 | 1504 | ||
| 2327 |
|
2년 전 | 2195 | |
| 2326 | 2년 전 | 1343 | ||
| 2325 | 2년 전 | 2153 | ||
| 2324 | 2년 전 | 1628 | ||
| 2323 |
희동이76
|
2년 전 | 1400 | |
| 2322 | 2년 전 | 2198 | ||
| 2321 | 2년 전 | 1739 | ||
| 2320 |
희동이76
|
2년 전 | 1388 | |
| 2319 | 2년 전 | 2192 | ||
| 2318 |
슈퍼스타맨
|
2년 전 | 1822 | |
| 2317 | 2년 전 | 1490 | ||
| 2316 | 2년 전 | 1967 | ||
| 2315 | 2년 전 | 1769 | ||
| 2314 | 2년 전 | 1274 | ||
| 2313 | 2년 전 | 1460 | ||
| 2312 | 2년 전 | 2495 | ||
| 2311 | 2년 전 | 1715 | ||
| 2310 | 2년 전 | 1714 | ||
| 2309 | 2년 전 | 3340 | ||
| 2308 | 2년 전 | 1026 | ||
| 2307 | 2년 전 | 1620 | ||
| 2306 |
디지털홍익인간
|
2년 전 | 2508 | |
| 2305 | 2년 전 | 1902 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기