모바일 스킨 | 특정 이미지/DIV 가로 여백 없이 최대로 확장하는 CSS

10월 06, 2022 4월 09, 2022

모바일 스킨 | 특정 이미지/DIV 가로 여백 없이 최대로 확장하는 CSS

오늘날의 인터넷은 모바일 친화력이 대세다. 모바일이 진정한 유비쿼터스 실현을 가능하게 해주기 때문이다. 제한적인 모바일 화면을 효과적으로 활용할 수 있는 이미지 가로 확대 css를 알아본다.

가로로 최대한 확장할 div에 class를 지정하고 아래와 같이 블로그 html(1)이나 페이지html(2)에 스타일을 적용하면 된다.

블로그 html

블로그 HTML의 </head> 앞에 아래와 같이 ‘스타일’을 만들고 ‘12번 줄’처럼 이미지를 모바일 화면에 가로로 꽉 차게 설정한다. 그리고 확장할 div나 이미지에 지정한 요소(id)를 지정한다. 이 경우 이미지 확장뿐만 아니라 모바일 화면의 색상과 글자 크기 등을 PC와 전혀 다르게 설정할 수 있다.

  <!--모바일-->
<b:if cond='data:blog.isMobile'> 
     <style>
@media only screen and (max-width: 768px) {
    html, body {
    background: #fff;
    max-width: 100%;
    overflow-x: hidden;
    width:100vw ; 
} 

#wide{
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}
}
</style>
</b:if>

페이지 html

확장할 이미지가 있는 게시글 HTML 페이지 맨 아래에 다음과 같은 ‘스타일’을 만들고 이미지를 모바일 화면에 가로로 꽉 차게 설정한다. 그리고 확장할 div나 이미지에 지정한 요소(id)를 지정한다. 이 경우 이미지 확장뿐만 아니라 모바일 화면상의 페이지 색상과 글자 크기 등을 PC와 전혀 다르게 설정할 수 있다.

 <style>
@media only screen and (max-width: 768px) {
    html, body {
#wide{
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}
}
</style>

Dream Chaser