모바일 웹 관련 문의드립니다

모바일 웹 관련 문의드립니다

QA

모바일 웹 관련 문의드립니다

본문

모바일 웹 관련 문의드립니다!

 

현재 메인화면 작업중에 갤럭시 s8, s9 이 두개를 가지고 작업하고 있습니다

 

반응형은 아니구 pc, 모바일 다르게 작업중에 있습니다.

 

작업하는 도중에 이상점을 발견했습니다

 

1888899041_1586335419.5666.png

이 사진은 갤럭시 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%;}

 

 

 

 

 

답변을 작성하시기 전에 로그인 해주세요.
전체 2,660
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT