모바일 웹 관련 문의드립니다
본문
모바일 웹 관련 문의드립니다!
현재 메인화면 작업중에 갤럭시 s8, s9 이 두개를 가지고 작업하고 있습니다
반응형은 아니구 pc, 모바일 다르게 작업중에 있습니다.
작업하는 도중에 이상점을 발견했습니다
이 사진은 갤럭시 s9 화면인데 갤럭시 s8 같은경우에는 제가 원하는 사이즈와 위치에 맞게 출력이 되는데 갤럭시 s9 같은 경우 텍스트가 들쑥날쑥 출력되는 문제가 생겼습니다..
자세한 내용을 위해 코드 공유하겠습니다ㅜㅜ
<html 코드>
<div class="m_one_btn_wrap">
<ul class="m_one_btn">
<li class="m_one_li1"><a href="http://agricshare.com/bbs/board.php?bo_table=food_gun"><img src="/theme/basic/mobile/img/main_one_img01.png" class="m_one_img"/><p class="one_btn_p">면역력</p></a></li>
<li class="m_one_li2"><a href="http://agricshare.com/bbs/board.php?bo_table=food_gun02"><img src="/theme/basic/mobile/img/main_one_img.png" class="m_one_img2"/><p class="one_btn_p2">비타민A</p></a></li>
<li class="m_one_li3"><a href="http://agricshare.com/bbs/board.php?bo_table=food_gun03"><img src="/theme/basic/mobile/img/main_one_img3.png" class="m_one_img3"/><p class="one_btn_p3">비타민C</p></a></li>
<li class="m_one_li4"><a href="http://agricshare.com/bbs/board.php?bo_table=food_gun04"><img src="/theme/basic/mobile/img/main_one_img4.png" class="m_one_img4"/><p class="one_btn_p4">눈 건강</p></a></li>
</ul>
</div>
<css 코드>
.m_one_btn_wrap{margin:7px 0 50px 24px;color:#888888;float:left;}
.m_one_btn{margin:20px 0 0 0;}
.m_one_btn li{width:50px;height:50px;border-radius:50%;float:left;}
.m_one_btn img{width:30px;}
.m_one_img{margin:10px 0 0 10px;}
.m_one_img2{margin:10px 0 0 13px;}
.m_one_img3{margin:9px 0 0 10px;}
.m_one_img4{margin:10px 0 0 10px;}
.m_one_li1{margin:0 0 0 10px;border:1px solid rgb(214, 214, 214);}
.m_one_li2{margin:0 0 0 25px;border:1px solid rgb(214, 214, 214);}
.m_one_li3{margin:0 0 0 27px;border:1px solid rgb(214, 214, 214);}
.m_one_li4{margin:0 0 0 27px;border:1px solid rgb(214, 214, 214);}
.one_btn_p{margin:17px 0 0 8px;}
.one_btn_p2{margin:17px 0 0 7px;}
.one_btn_p3{margin:18px 0 0 7px;}
.one_btn_p4{margin:17px 0 0 9px;}
답변 2
우선 css 를 보니 p 태그의 margin 값이 다 다르게 들어가있네요.
이 부분은 통일 시켜서 확인해보고요.
더 정확히 잡는 방법은 각각의 높이 값을 지정해주면 똑같이 잡힙니다.
li 높이값은 지정했으니, img 를 div 로 한번 더 감싸서 높이값 지정해주고,
p 요소도 높이값을 지정해서 두 기계를 비교해보세요!
감사합니다!
전체적인 common css 가 어떻게 잡혔는지 모르지만, 각 영역별로 구획을 정확하게 나눠주시는 게 좋아요.
저렇게 글씨가 들쑥날쑥한 건 아마 img 태그 자체가 인라인 속성이라 약간씩의 공간이 생기는 이슈가 있어서 그런 거 같아요. 위에 댓글처럼 div에 따로 넣어주거나, 아니면 img 태그 속성을 display:block;으로 지정해 주면 여백 뜨는 거는 사라질 거예요.
역시 위에 댓글처럼 저렇게 각각 속성을 다르게 주면 수정시에도 번거롭기 때문에, 전체를 공통으로 주는 게 좋아요. float:left;를 쓰신다는 가정하에 예시 코드 이런식입니다.
-------------
.m_one_btn_wrap{margin:7px 0 50px 24px;color:#888888;float:left;}
/* 이부분 대신
.m_one_btn {margin:20px 0 0 0;}
.m_one_btn li{width:50px;height:50px;border-radius:50%;float:left;}
.m_one_btn img{width:30px;}
.m_one_img{margin:10px 0 0 10px;}
.m_one_img2{margin:10px 0 0 13px;}
.m_one_img3{margin:9px 0 0 10px;}
.m_one_img4{margin:10px 0 0 10px;}
.m_one_li1{margin:0 0 0 10px;border:1px solid rgb(214, 214, 214);}
.m_one_li2{margin:0 0 0 25px;border:1px solid rgb(214, 214, 214);}
.m_one_li3{margin:0 0 0 27px;border:1px solid rgb(214, 214, 214);}
.m_one_li4{margin:0 0 0 27px;border:1px solid rgb(214, 214, 214);}
.one_btn_p{margin:17px 0 0 8px;}
.one_btn_p2{margin:17px 0 0 7px;}
.one_btn_p3{margin:18px 0 0 7px;}
.one_btn_p4{margin:17px 0 0 9px;}
*/
.m_one_btn {box-sizing:border-box; width:290px; padding:0 5px;}
.m_one_btn::after {content:''; display:block; clear:both;}
.m_one_btn li {position:relative; box-sizing:border-box; float:left; width:50px; text-align:center;}
.m_one_btn li + li {margin-left:26px;}
.m_one_btn li a {display:block; padding-top:10px;}
.m_one_btn img {display:block; width:30px; margin:0px auto 17px;}
.m_one_btn li::before {content:''; position:absolute; z-index:-1; width:50px; height:50px; left:50%; top:0; -webkit-transform:translateX(-50%); transform:translateX(-50%); border:1px solid rgb(214, 214, 214); border-radius:50%;}
