워드 프레스 상품 게시판 갤러리 문의
본문
열심히 배우고 있는 초보 유저입니다.
상품 갤러리에 사진들이 너무 크게 진열이 되고
클릭을 하면 새창 혹은 팝업이 아닌 기존 페이지에서 팝업으로 뜬다음 뒤로가기를 눌러야되는
번거로움이 있네요.
상품 갤러리칸을 썸네일 크기로 좌우정렬로 바꾸고싶은데 도저히 하다하다 안되서 질문 게시판에 올립니다.
도움 주시면 너무 감사하겠습니다.
사진처럼 상품 이미지랑 동일한 크기로 자꾸 설정이되네요.
답변 1
1.
해당 이미지 선택자를 알아내신 후,
https://homzzang.com/b/free-1497 참고
2.
해당 이미지 크기를 가로 40 ~ 50% 정도로 설정, 세로 auto로 설정
3.
세로로 정렬이 되는 이유는 이미지가 50%를 넘어서 그렇거나,
clear:both; 같은 속성이 걸렸거나,
display:block 또는 블럭 요소로 감싸져서 그런 것입니다.
이 정도 난이도에서 헤메시면 ...... 안 되는뎅...
이건 좀 더 HTML CSS를 전문적으로 공부 후 수정하시는 게 좋을 듯 합니다.
하루에 50개 정도씩 공부하면 일주일이면 뚝딱 마스터 가능해요.
친절한 답변 감사드립니다. 해당 이미지를 40~50%정도로 설정은 어디서 이루어져야되는건지요.. 생초짜라 유튜브보고 하나하나 따라하는중인데 결과물이 달라서...
html로 직접 수정하라는 그말씀인가요?아니면 홈피 어드민에서 가능이 한건지..
해당 선택자에 대해서 스타일을 정의하는 곳에서 해야겠죠.
위 첫 번째 링크된 좌표 페이지 방법 이용해서 CSS 파일 위치 확인 가능해요.
HTML 파일과 CSS 파일 둘다 봐야 정확히 알 수 있는 문제라 .............
HTML CSS 일주일 날잡고 공부 후 수정하시라고 밖에 조언을 못 드리겠네요.
이게 훨씬 더 시간을 아껴줍니다.
질게를 통해 하나하나 문제가 생길 때마다 물어서 해결하는 것보다 훨씬 경제적입니다.
ps.
좌표 찍어보세요.
브라우저로 대충 알려드릴 수 있는 수준이면 더 자세히 봐드리도록 할게요.
보니까 이미지들이 다 블럭 요소인 div 요소로 감싸져서 그런 거네요.
woocommerce-product-gallery__image 이것이 해당 이미지들을 감싸는 div 요소의 클래스인데,
이것에 대해서 해당 페이지 상단에 별도로 스타일을 정의해 넣으시면 될 듯 합니다.
대략 이런 식으로...
.woocommerce-product-gallery__image {
float:left;
width:33.3333333333 %;
}
PS.
1.
브라우저로는 저 선택자가 정의된 파일 찾는 게 쉽지가 않네요.
2.
https://sir.kr/g5_skin/23043 이 스킨 다운받아 공부해 보세요.
좋은말씀 너무 감사드립니다. 이따가 집에가서 해보겠습니다. 다시 한번 너무 감사드립니다.
