아래 에티테마 메인 슬라이드 pc 버전 관련하여 글 올립니다.
페이지 정보
작성자 포드 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 댓글 5건 작성일 20-02-27 21:24본문
먼저 바쁘신 와중에도 답변해 주셔서 대단히 감사합니다.
제가 pc 버전과 mobile 버전 별도로 적용되게 수정할 수있으면 좋겠지만 메인슬라이드를 <div class="pc"> 그리고 <div class="mobile"> 수정 자체가 어려운 초보라서 그냥 전체를 pc 버젼처럼 보이게 할 수 없나요? 당장 반응형으로 적용할 순 없어도 현재로서는 pc 버전처럼만 보이게되도 좋겠습니다.
댓글목록
소프트존님의 댓글
소프트존 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 작성일
안녕하세요 포드님
해당 슬라이드 이미지는 가로 길이가 길고 세로길이가 짧기 때문에
모바일에서 이미지의 왜곡 없이 나타내기 위해서 부트스트랩에서 이렇게 제작된것으로 알고 있습니다.
해서 방법은 지난번에도 조금 설명해드린것 같긴한데요.
테마폴더에 보시면 css 에 modern-business.css 의 306 번째줄 보시면
.carousel-item {
/* height: 65vh; */
/* min-height: 150px; */
height: 100px;
background: no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
윗부분과 같은 css 코드가 있습니다.
원래는 /* min-height: 150px; */ 값이 사용되었는데요
제가 height:100px 을 추가해주었습니다.
세로 사이즈가 작아질 수록 가로사이즈가 잘 보이게 됩니다.
이런 원리를 아셔야 슬라이드 제작시 참고될것으로 보입니다.
즉 결론은 메인 pc 슬라이드 이미지의 세로크기를 더 크게 키우시면 모바일에서도
잘 보일거라고 생각됩니다.
(pc 에서 슬라이드 이미지를 정사각형으로 제작하시면 모바일에서도 매우 잘보이게 될것 같습니다.)
지금 보이시는 에티테마에 적용되어 있는 슬라이드의 경우 세로크기가 매우 작기 때문에
모바일에서 가로이미지들의 범위가 모두 짤리는 현상이 있는것으로 생각하시면 됩니다.
pc 버전이든 반응형이 아니든 모두 같은 원리하고 생각해주시면 될것 같습니다. ^^
수고하시고 즐거운 주말 되세요~
질문 있으시면 언제든지 남겨주시면 확인하는데로 답변 달아드리도록 하겠습니ㅏㄷ.
감사합니다.
포드님의 댓글
포드 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 작성일
바쁘신 와중에 이렇게 신경써주셔서 감사드립니다.
주말 잘보내세요.
소프트존님의 댓글
소프트존 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 작성일
넵 ~
http://ety.kr/board/GNU_TIP/26
위 주소 참고해주세요.
포드님이 원하시는 작업을 별도로 해놨습니다.
감사합니다.
소프트존님의 댓글
소프트존 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 작성일
수정하여 올려드립니다.
팁게시판 참고해주세요~
아래주소 클릭해주세요.
소프트존님의 댓글
소프트존 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 작성일http://ety.kr/board/GNU_TIP/26