답변 2개
자문자답합니다.
위에 드래곤된다님이 남겨주신 댓글의 내용으로는 안되어서 직접 style을 수정하였습니다...
일단, 기본 갤러리의 style.css를 열어 아래의 항목을 수정한뒤
#bo_gall #gall_ul {margin:10px 0 0;width: 게시판넓이;margin-left: auto;margin-right: auto;padding:0;list-style:none;zoom:1;text-align: center;}반응형으로 동작할 수 있도록 @media를 적용합니다.
</p><p>@media only screen and ( min-width:767px ) and ( max-width:1000px ) {</p><p>#bo_gall #gall_ul {margin:10px 0 0;width: 게시판넓이;margin-left: auto;margin-right: auto;padding:0;list-style:none;zoom:1;text-align: center;}</p><p>}</p><p>@media only screen and ( min-width:414px ) and ( max-width:767px ) {</p><p>#bo_gall #gall_ul {margin:10px 0 0;width: <span style="font-size: 14.6666669845581px; line-height: 1.5;">게시판넓이</span><span style="font-size: 11pt; line-height: 1.5;"></span><span style="font-size: 11pt; line-height: 1.5;">;margin-left: auto;margin-right: auto;padding:0;list-style:none;zoom:1;text-align: center;}</span></p><p>}</p><p>@media only screen and (max-width:414px) {</p><p>#bo_gall #gall_ul {margin:10px 0 0;width: <span style="font-size: 14.6666669845581px; line-height: 1.5;">게시판넓이</span><span style="font-size: 11pt; line-height: 1.5;"></span><span style="font-size: 11pt; line-height: 1.5;">;margin-left: auto;margin-right: auto;padding:0;list-style:none;zoom:1;text-align: center;}</span></p><p>}참고로, @media의 게시판 넓이는 직접 확인하여 기재하여야 합니다. 저는 크롬의 요소검사 기능을 사용해 크기를 확인하고 입력하였는데 생각보다 괜찮게 동작하네요. 참고로, 414px의 경우에는 아이폰6+를 기준으로 한 것이고 320px에도 대응할 수 있도록 섬네일 이미지는 135px로 적용하였습니다.
예시 페이지는 아직 호스팅을 받고 있지 않아서 생략합니다...ㅠㅠ (아직 사이트 준비중이라서...)
댓글을 작성하려면 로그인이 필요합니다.
</p><p>//1</p><p><div></p><p><span class="Apple-tab-span" style="white-space:pre"></span><span style="font-size: 14.6666669845581px; line-height: 1.5;"> </span><span style="font-size: 14.6666669845581px; line-height: 1.5;"> </span><span style="font-size: 11pt; line-height: 1.5;"><img src="" alt="" /></span></p><p></div> </p><p> </p><p>//2</p><p> </p><p style="font-size: 14.6666669845581px;"><div></p><p style="font-size: 14.6666669845581px;"><span style="font-size: 14.6666669845581px; line-height: 1.5;"> </span><span style="font-size: 14.6666669845581px; line-height: 1.5;"> </span><span style="font-size: 14.6666669845581px; line-height: 1.5;"></span><span style="font-size: 14.6666669845581px; line-height: 1.5;"><span></span></p><p style="font-size: 14.6666669845581px;"><span style="font-size: 14.6666669845581px; line-height: 1.5;"> </span><span style="font-size: 14.6666669845581px; line-height: 1.5;"> </span><span style="font-size: 14.6666669845581px; line-height: 1.5;"></span><span style="font-size: 14.6666669845581px; line-height: 1.5;"> <img src="" alt="" /></span></p><p style="font-size: 14.6666669845581px;"><span style="font-size: 14.6666669845581px; line-height: 1.5;"> </span><span style="font-size: 14.6666669845581px; line-height: 1.5;"> </span><span style="font-size: 14.6666669845581px; line-height: 1.5;"></span><span style="font-size: 14.6666669845581px; line-height: 1.5;"></span></span></p><p><span style="font-size: 14.6666669845581px; line-height: 1.5;"></div></span> </p><p>
1번같이 div 안에 img태그가 들어가있다고 했을때 div의 width가 100%라면 img태그에 marign:0 auto 나 text-align:cneter 이걸 주시면 가운데정렬이 되요.
2번같이 width가 100%인곳 안에 태그하나 더 두고서 img가 들어가 있을때는 그 위에있는 span에 주시면되요.
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인