사이즈를 수정할 수 있는 파일을 찾아주세요. 부탁드립니다.
XEdition 기본 레이아웃의 layout.html 파일의 305행부터 메인화면의 슬라이드가 나오는 소스 부분인것 같은데요,
아무리 타고 들어가봐도 이미지의 사이즈를 조정하는 html 또는 css 파일을 찾지를 못하겠네요.
크롬에서 F12 눌러서 확인을 해보면 아래처럼 바뀌는데요, 여기서 width: 7440px; height: 600px; 이부분을
수정할 수 있는 파일은 어떤 파일인지 알 수 있을까요?
크롬에서 보이는 소스입니다.
<div class="swiper-wrapper" style="width: 7440px; height: 600px; transform: translate3d(-2480px, 0px, 0px); transition-duration: 0.3s;">
요건 layout.html 파일의 슬라이드 부분입니다.
<!-- 슬라이드 -->
<div class="swiper-wrapper">
<!--@if($_sample_slide)-->
<include target="./demo/slide.html" />
<!--@else-->
<div cond="$layout_info->slide_img1" style="background-image:url('{$layout_info->slide_img1}');" class="swiper-slide">
<div cond="$layout_info->slide_text1">
<div>
{$layout_info->slide_text1}
</div>
</div>
</div>
<div cond="$layout_info->slide_img2" style="background-image:url('{$layout_info->slide_img2}');" class="swiper-slide">
<div cond="$layout_info->slide_text2">
<div>
{$layout_info->slide_text2}
</div>
</div>
</div>
<div cond="$layout_info->slide_img3" style="background-image:url('{$layout_info->slide_img3}');" class="swiper-slide">
<div cond="$layout_info->slide_text3">
<div>
{$layout_info->slide_text3}
</div>
</div>
</div>
<div cond="$layout_info->slide_img4" style="background-image:url('{$layout_info->slide_img4}');" class="swiper-slide">
<div cond="$layout_info->slide_text4">
<div>
{$layout_info->slide_text4}
</div>
</div>
</div>
<div cond="$layout_info->slide_img5" style="background-image:url('{$layout_info->slide_img5}');" class="swiper-slide">
<div cond="$layout_info->slide_text5">
<div>
{$layout_info->slide_text5}
</div>
</div>
</div>
<!--@end-->
</div>
<!-- END:슬라이드 -->
<div class="swiper-wrapper">
<!--@if($_sample_slide)-->
<include target="./demo/slide.html" />
<!--@else-->
<div cond="$layout_info->slide_img1" style="background-image:url('{$layout_info->slide_img1}');" class="swiper-slide">
<div cond="$layout_info->slide_text1">
<div>
{$layout_info->slide_text1}
</div>
</div>
</div>
<div cond="$layout_info->slide_img2" style="background-image:url('{$layout_info->slide_img2}');" class="swiper-slide">
<div cond="$layout_info->slide_text2">
<div>
{$layout_info->slide_text2}
</div>
</div>
</div>
<div cond="$layout_info->slide_img3" style="background-image:url('{$layout_info->slide_img3}');" class="swiper-slide">
<div cond="$layout_info->slide_text3">
<div>
{$layout_info->slide_text3}
</div>
</div>
</div>
<div cond="$layout_info->slide_img4" style="background-image:url('{$layout_info->slide_img4}');" class="swiper-slide">
<div cond="$layout_info->slide_text4">
<div>
{$layout_info->slide_text4}
</div>
</div>
</div>
<div cond="$layout_info->slide_img5" style="background-image:url('{$layout_info->slide_img5}');" class="swiper-slide">
<div cond="$layout_info->slide_text5">
<div>
{$layout_info->slide_text5}
</div>
</div>
</div>
<!--@end-->
</div>
<!-- END:슬라이드 -->
댓글 11
swiper-container 로 찾으시면 됩니다.대략 800번때 줄부터
고맙습니다. 그런데 864행의 height: 600px 를 110px로 바꿔봤는데 여전히 바뀌지 않네요. ㅜ.ㅜ
.swiper-container {
height: 110px;
그 아래에 다른 height: 600px 도 변경을 해봤지만 반응이 없네요. ㅜ.ㅜ
이미지 파일도 사이즈를 높이 110 으로 줄여서 모두 올려봤지만 여전히....
F12키를 눌러서 해당 소스 부분의 우측의 Filter 를 보면 element.style {
이곳에서 height: 110px; 로 바꿔보면 이때는 사이즈가 110 으로 줄어들거든요.
element.style { 이런 소스 부분의 위치는 어떻게 찾을 수 있을까요?
element.style {
width: 7440px;
height: 600px;
에서 이 element.style은 어느쪽에 쓰이는건지요? html 이나 css 어느쪽인지요? 착한인연님 이번에도 촉을 좀 써주세요. ㅎ 고맙습니다.
점점 미궁으로 들어가지 마시고 원하시는 부분이 무엇이신지?
무엇을 어떻게 저렇게 요렇게 하고 싶은지를 알려주셔야 더 도움을 드릴듯합니다만...
넵! ㅎㅎ 너무 깊게 들어간건가요? 죄송합니다.
저는 단지 기본 XEDITION 레이아웃의 기본으로 나오는 슬라이드의 높이를 줄이고 싶습니다.
현재 600px로 되어 있는데 이걸 110px 또는 150px 줄이고 싶은거죠.
레이아웃 XEDITION 의 사용자 설정은 아래와 같을 때 메인 페이지에 큰 슬라이드가 나와서 이걸
줄이고 싶다는 말씀이죠.
이해해주세요. 초보들은 원래 요리조리 횡설수설이에요. ㅎㅎ
위에 적어 주신대로
860번대에 적혀있는 숫자를 변경하면 세로 사이즈가 줄게됩니다.
.swiper-container {
height: 300px;
font-family: Raleway, '나눔바른고딕', NanumBarunGothic, ng, '돋움', Dotum, AppleGothic, Helvetica, serif;
}
다른글들을 보았을때 기존 XEDITION레이아웃을 사용하지 않으시고
다른 변형되어거나 커스텀된 XEDITION 레이아웃을 사용하시지 않나요.?
Xedition_MH 사용중이시라고 다른글에서는 보입니다만,
레이아웃 폴더를 잘 확인하시고.. 만약 변경해도 아무런 변화가 없다면
혹 다른폴더를 보시는게 아닐까 생각도 듭니다.
layout.css 만 바꿀게 아니더라구요. layout.min.css layout.js layout.min.js 여기서도 수정을 해야 되더라구요. 총 4개의 파일이네요.
슬라이드 높이가 기본 600px 인데 3개의 파일에서 600을 찾아서 원하는 크기로 200px 으로 바꿨더니 크기가 줄었습니다.
착한인연님 덕분에 생각의 전환으로 고민하다 해결했습니다. 고맙습니다.
초보때에는 그냥 layout.min.css파일을 사용하지 않으시길 권해드립니다.
수정도 어렵고 그냥 layout.css를 사용하시길 바랍니다.
사용방법은 layout.min.css파일이름을 변경하세요.
예를 들자면 layout.4444min.css이렇게 변경하면 layout.css파일을 읽어드립니다.
js도 동일하게 이름을 변경하시길 바랍니다.
편안하게 수정하시길 바랍니다.
저도 미쳐 이야기를 못드렸네요. 잊고 있었습니다.
하지만 공부가 되셨을 거라 생각됩니다.
기존 파일을 수정을 다 하시고 추후
그 파일코드를 압축하여 다시 min파일에 다시 넣으시면 됩니다.
압축하는 사이트는 찾아보시면 많이 나옵니다.