이미지 위에 고정적인 위치 잡기 문제입니다ㅠ
본문
a.jpg 라는 이미지가 있을경우,
<div id="price">15,000</div>
라는 div를 pc상태이든,모바일상태이든 같은 위치에 넣고 싶습니다.
top,left를 px로 할경우 모바일에선 div가 다른위치로 가있고,
%로 할 경우엔 핸드폰마다 div 위치가 다 다르네요ㅠㅠ
pc든 모바일이든 같은 위치에 표시될 방법좀 알려주세요ㅠ
답변 3
그런데 이미지가 반응형이라면 width가 줄어들수록 계속 height도 줄어들텐데...
css에서 top,left, transform:translate() 3개를 퍼센테이지로 사용해보시기바랍니다..
예를들어 div가 이미지의 항상 가운데 있게 하고싶다 하시면
top:50%;left:50%;transform:translate(-50%,-50%) 등등,,
아니면 css에 flex모델도 괜찮은듯 싶습니다.
display:flex,
justify-content 대표적인 옵션으로 baseline,center,start,end
align-items 대표적인 옵션으로 baseline,center,start,end
그냥 단순하게.. 이렇게 PC,모바일의 경우를 두고
css id값을 저렇게 서로 다르게주어 조절하시는게 편할듯합니다.
<?php if(G5_IS_MOBILE) { // 모바일의경우 ?>
<div id="price_m">15,000</div>
<?php } else { // PC인경우 ?>
<div id="price_pc">15,000</div>
<?php } ?>
css 적인 부분으로만 본다면 부모의 위치값(?)부터 틀로 짜는 방식
<div style="position:relative;">
<div style="position:absolute;"></div>
답변을 작성하시기 전에 로그인 해주세요.
