묻고답하기
사진간 간격을 주고 싶습니다. 위아래로...
2015.01.07 01:55
댓글 10
-
SUHONE
2015.01.07 10:18
쿨럭님 안녕하세요.
이른 새벽에 답글 달아주셔서 감사합니다.
해당 스킨의 css 폴더에 wiget.css 파일을 손보라는 말씀같은데요.
찾아보니
.phizGalleryA .thumbnail1:after{ content:""; display:block; clear:both;}
.phizGalleryA .thumb-wrap{overflow:hidden;}
.phizGalleryA .thumb-wrap a img {
-moz-transition: all 0.4s;
-webkit-transition: all 0.4s;
transition: all 0.4s;
}
.phizGalleryA .thumb-wrap a img:hover {
-ms-transform: scale(1.2);
-o-transform: scale(1.2);
-moz-transform: scale(1.2);
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
라는 구문이 있던데 이건 마우스 온오버시 이미지가 커졌다 작아졌다 하는게 아닌지...
함수쪽으론 기본 지식이 없고 그냥 이리저리 검색해가면서 끼워맞추기 식으로 하고 있는지라...
도움주실순 없을까요?
-
이런 문제도 링크를 걸어 두셔야 쉽게 파악이 됩니다.
-
widget.css 60 line
.phizGalleryA .thumbnail 의 마진 또는 패딩으로 조정하세요
-
.phizGalleryA .thumbnail 라는 클래스명이 있었군요.. 그런데... 왜 위에는 안적혀있징 ㅠㅠ
.phizGalleryA .thumbnail {display: block;height: auto;margin:20px 20px 20px 20px; <<추가 max-width: 100%;margin: 0;padding: 0;line-height: 1.428571429;background-color: transparent;border: 0;border-radius: 0;}
-
정말 위코드에는 thumbnail 클래스가 없네요
코드를 바꾸어 놓아서 수정이 안될 듯,
원래 위젯 설정에서 이미지 간격(마진)을 있음,없음을 선택할 수 있도록 되어 있는데 구조를 바꾸어서 사용할 수 없게 되었군요
-
SUHONE
2015.01.08 03:19
우선, 늦은 새벽에 댓글 달아주셔서 두분 너무 감사드립니다.
제가 css 수정없이 galleryA.html 파일만 다른것 처럼 했다가 안되니 문의를 올렸어요.
두분 말씀인즉, galleryA.html 파일이 수정이 되어서 css 에 추가를 해도 적용이 안될것 같다라는 말씀이신데요.
그래서 자료실에서 다시 원본을 받아서 css만 수정을 해봤는데 간격이 벌어지지 않고 그냥 붙어 있어요.
https://www.xpressengine.com/index.php?mid=download&package_id=22583905이게 본 링크입니다.근데, 휘즈님이 자료실에 위젯 올리신 그 휘즈분이신가요. ^^반응형이라 기존 갤러리 위젯은 mobile_hidden 으로 설정해두고 가장 아래에 이걸로 해두면 엄청 좋을것 같아요.테두리 입히는거랑 간격만 조절할수 있다면 너무 괜찮을것 같음... -
원본파일에서
위젯 설정에서 간격있음으로
간격의 크기는 widget.css 72 lile
.phizGalleryA .thumbnail1 {
display: block;
height: auto;
max-width: 100%;
margin: 0 5px 0 0; ==> 조정(이미지 1줄일 때, 2줄이상은 margin:10px; 로)
padding: 10px;
line-height: 1.428571429;
overflow: hidden;
background-color: transparent;
border: 1px solid #ddd;
border-radius: 4px;
}
이미지 테두리는
85 line
.phizGalleryA .thumb-wrap{
ovflow:hidden;
border: 1px solid #ddd; ==> 추가
}
-
위 코드에는 없지만 css 다운 받아보니 클래스명이 있더라구용 그래서 그에 맞게 작
성 한것인뎅;;ㄷㄷㄷ ㅎㅎ
-
바꾼 코드에서 thumbnail 클래스를 삭제했더군요
.thumb-wrap img {margin:0 20px} css를 수정 하세요.