크롬80버전 결제 이슈, 영카트5 주요패치 확인!

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

컨텐츠몰 10% 할인
그누보드5
영카트5
매뉴얼
Q & A
제작의뢰
컨텐츠몰
부가서비스
소모임
커뮤니티
모바일 웹 관련 문의드립니다

QA

가정의 달 맞이 SIR 컨텐츠몰 10% 특별할인 - 코로나19 바이러스로 어려운 시기, SIR이 함께 하겠습니다.

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

본문

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

 

현재 메인화면 작업중에 갤럭시 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

채택됨

DSLOVE님의 답변

우선  css 를 보니 p 태그의 margin 값이 다 다르게 들어가있네요.

이 부분은 통일 시켜서 확인해보고요.

 

더 정확히 잡는 방법은 각각의 높이 값을 지정해주면 똑같이 잡힙니다.

li 높이값은 지정했으니, img 를 div 로 한번 더 감싸서 높이값 지정해주고,

p 요소도 높이값을 지정해서 두 기계를 비교해보세요!

주소복사
채택됨
답변의 댓글

bob님의 답변

전체적인 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%;}

 

 

 

 

 

주소복사
답변의 댓글
답변을 작성하시기 전에 로그인 해주세요.
전체 87,702 | RSS
고마운 분의 도움으로 질문을 해결하셨다면, 채택을 눌러서 감사의 마음을 전하세요.
어떻게 질문해야 할지 모른다면 질문하는 방법을 읽어 보신후 질문해 보세요.
QA 내용 검색

회원로그인

진행중 포인트경매

  1. 참여12 회 시작20.05.27 19:24 종료20.06.01 19:24

(주)에스아이알소프트 (06253) 서울특별시 강남구 도곡로1길 14, 6층 624호 (역삼동, 삼일프라자) 대표메일:admin@sir.kr
사업자등록번호:217-81-36347 대표:홍석명 통신판매업신고번호:2014-서울강남-02098호 개인정보보호책임자:이총

© SIRSOFT